Redesign using bootstrap 3

author: Christoph Brill <egore911@gmail.com> 2017-02-07 12:29:03 +0100
committer: Christoph Brill <egore911@gmail.com> 2017-02-07 12:30:01 +0100
commit: 87e3127729906d3fe5748816e6f94a4b8776c005 (patch)
tree: dc71da8443175fe91d46895f69dda161856837ef /index.php
parent: 776410cf7d709d18317d0734099e486224882a3b (diff)
1 files changed, 121 insertions, 78 deletions
diff --git a/index.php b/index.php
index bf87965..ee97d49 100755
--- a/index.php
+++ b/index.php
@@ -18,123 +18,166 @@
 require_once('common.inc.php');
 
 if (isset($date)) {
-	$title = 'IRC Logs of #'.$channel.' on irc.freenode.net for '.$date;
-	$oneday = new DateInterval("P1D");
-	$prevday = date_sub(date_create_from_format("Y-m-d", $date), $oneday)->format("Y-m-d");
-	$nextday = date_add(date_create_from_format("Y-m-d", $date), $oneday)->format("Y-m-d");
-
-	// Set a cookie to store the reference to the last time we showed the log
-	if (isset($_COOKIE[$channel . '_last_visit'])) {
-		$last_visit = $_COOKIE[$channel . '_last_visit'];
-		if ($date == date('Y-m-d', $last_visit)) {
-			$last_visit = date('H:i', $last_visit);
-			setcookie($channel . '_last_visit', time(), time()+2592000);
-		} else {
-			unset($last_visit);
-		}
-	} else {
-		setcookie($channel . '_last_visit', time(), time()+2592000);
-	}
+  $title = 'IRC Logs of #'.$channel.' on irc.freenode.net for '.$date;
+  $oneday = new DateInterval("P1D");
+  $prevday = date_sub(date_create_from_format("Y-m-d", $date), $oneday)->format("Y-m-d");
+  $nextday = date_add(date_create_from_format("Y-m-d", $date), $oneday)->format("Y-m-d");
+
+  // Set a cookie to store the reference to the last time we showed the log
+  if (isset($_COOKIE[$channel . '_last_visit'])) {
+    $last_visit = $_COOKIE[$channel . '_last_visit'];
+    if ($date == date('Y-m-d', $last_visit)) {
+      $last_visit = date('H:i', $last_visit);
+      setcookie($channel . '_last_visit', time(), time()+2592000);
+    } else {
+      unset($last_visit);
+    }
+  } else {
+    setcookie($channel . '_last_visit', time(), time()+2592000);
+  }
 
 } else {
-	$title = 'DRI IRC log overview';
+  $title = 'DRI IRC log overview';
 }
 $show_html = !isset($_GET['channel']) || (isset($_GET['show_html']) && $_GET['show_html'] == 'true');
 $show_joins = isset($_GET['show_joins']) && $_GET['show_joins'] == 'true';
 $show_irssi = isset($_GET['show_irssi']) && $_GET['show_irssi'] == 'true';
 $highlight_names = isset($_GET['highlight_names']) ? $_GET['highlight_names'] : (isset($_COOKIE['stored_users']) ? $_COOKIE['stored_users'] : '');
 if ($highlight_names == '') {
-	$users = array();
+  $users = array();
 } else {
-	$users = explode(';', $highlight_names);
+  $users = explode(';', $highlight_names);
 }
 if (isset($_GET['highlight_names'])) {
-	setcookie('stored_users', $highlight_names, time()+2592000);
+  setcookie('stored_users', $highlight_names, time()+2592000);
 }
 
 $colors = array('#009900', '#CC3300', '#330099', '#FF6600', '#CC33CC', '#66CCCC', '#FF0066', '#9900FF', '#00FFCC', '#6600FF');
 
-echo '<?xml version="1.0" encoding="UTF-8" ?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
+echo '<!DOCTYPE html>
+<html lang="en">
  <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-  <title>'.$title.'</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">  <title>'.$title.'</title>
   <link rel="shortcut icon" href="favicon.ico" />
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <link rel="stylesheet" href="css/bootstrap-datepicker3.min.css">
+  <script src="js/bootstrap-datepicker.min.js"></script>
   <style type="text/css">
-body { font-family:monospace; }
-h1 { text-align: center; }
+body { padding-top: 60px; }
 #setupdiv {position: absolute; top: 8.6em; right: 2em; width: 18em; background-color:white; border:solid 1px gray; padding: 10px;}
-html>body #setupdiv { position: fixed; }
-  </style>
-  <script src="js/date-functions.js" type="text/javascript"></script>
-  <script src="js/datechooser.js" type="text/javascript"></script>
-  <link rel="stylesheet" type="text/css" href="css/datechooser.css"/>
-  <!--[if lte IE 6.5]>
-  <link rel="stylesheet" type="text/css" href="css/select-free.css"/>
-  <![endif]-->'.PHP_EOL;
+html { position: relative; min-height: 100%; }
+body { margin-bottom: 60px; }
+.footer { position: absolute; bottom: 0; width: 100%; height: 45px; background-color: #f5f5f5; }
+div.checkbox { margin-left: 10px; }
+ul#usernames li > span { margin-left: 10px; }
+ul#usernames li > span > a, a.inherit { color: inherit; }
+  </style>'.PHP_EOL;
 
 if (!isset($_SERVER['HTTP_DNT']) || $_SERVER['HTTP_DNT'] != 1) {
-	include_once("analyticstracking.php");
+  include_once("analyticstracking.php");
 }
 
 if (isset($date)) {
-	echo '	<script type="text/javascript" src="js/core-min.js"></script>
+  echo '  <script type="text/javascript" src="js/core-min.js"></script>
   <script type="text/javascript" src="js/sha1-min.js"></script>
   <script type="text/javascript" src="js/script.js"></script>
-	<script type="text/javascript">
-<!--
-
-function prevDay() {
-	$s = document.getElementById("date");
-	$s.value="' . $prevday . '";
-	document.getElementById("datepick").submit();
-}
-function nextDay() {
-	$s = document.getElementById("date");
-	$s.value="' . $nextday . '";
-	document.getElementById("datepick").submit();
-}
-
-//-->
   </script>'.PHP_EOL;
 
-	if (count($users) > 0) {
-		echo '	<style type="text/css">'.PHP_EOL;
-		foreach ($users as $user) {
-			echo '		span.user_'.$user.' { '.get_color($user).'; }'.PHP_EOL;
-		}
-		echo '	</style>'.PHP_EOL;
-	}
+  if (count($users) > 0) {
+    echo '  <style type="text/css">'.PHP_EOL;
+    foreach ($users as $user) {
+      echo '    span.user_'.$user.' { '.get_color($user).'; }'.PHP_EOL;
+    }
+    echo '  </style>'.PHP_EOL;
+  }
 }
 
-echo ' </head>'.PHP_EOL;
+echo ' </head>
+ <body>
+  <nav class="navbar navbar-default navbar-fixed-top">
+   <div class="container-fluid">
+    <div class="navbar-header">
+     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+     </button>
+     <a class="navbar-brand" href="index.php">Home</a>
+    </div>
+    <div id="navbar" class="collapse navbar-collapse">
+     <form method="get" action="" id="mainform" name="mainform">
+      <ul class="nav navbar-nav">'.PHP_EOL;
+foreach ($channels as $channel_) {
+  echo '       <li'.($channel_ == $channel ? ' class="active"' : '').'><a href="#" onclick="$(\'#channel\').val(\''.$channel_.'\'); $(\'#mainform\').submit(); return false;">'.$channel_.'</a></li>'.PHP_EOL;
+}
+echo '      </ul>
+      <div class="navbar-form navbar-right">
+       <input id="channel" name="channel" type="hidden" value="' . $channel . '" style="display: none; visibility: hidden;"/>
+       <input id="highlight_names" name="highlight_names" type="hidden" value="'.$highlight_names.'" style="display: none; visibility: hidden;"/>
+       <div class="input-group date">
+        <input type="text" class="form-control" id="date" name="date" value="'.(isset($date) ? $date : date('Y-m-d')).'">
+        <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
+       </div>
+      </div>'.PHP_EOL;
 if (isset($date)) {
-	echo ' <body onload="draginit()">'.PHP_EOL;
-} else {
-	echo ' <body>'.PHP_EOL;
+echo '      <ul class="nav navbar-nav navbar-right">
+       <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Options
+        <span class="caret"></span></a>
+        <ul class="dropdown-menu">
+         <li><div class="checkbox"><label><input type="checkbox" name="show_joins" value="true"'.($show_joins ? ' checked="checked"' : '').' onchange="this.form.submit();">Joins/Disconnects</label></div></li>
+         <li><div class="checkbox"><label><input type="checkbox" name="show_irssi" value="true"'.($show_irssi ? ' checked="checked"' : '').' onchange="this.form.submit();">IRSSI</label></div></li>
+         <li><div class="checkbox"><label><input type="checkbox" name="show_html" value="true"'.($show_html ? ' checked="checked"' : '').' onchange="this.form.submit();">Linkify HTML</label></div></li>
+        </ul>
+       </li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+       <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span id="users_label">Users'.(count($users) > 0 ? ' ('.count($users).')' : '').'</span>
+        <span class="caret"></span></a>
+        <ul class="dropdown-menu" id="usernames">'.PHP_EOL;
+foreach ($users as $user) {
+    echo '         <li id="user_'.$user.'"><span class="checkbox user_'.$user.'"><a href="javascript:addUser(\''.$user.'\');">'.$user.'</a></span></li>'.PHP_EOL;
+}
+echo '        </ul>
+       </li>
+      </ul>'.PHP_EOL;
 }
+echo '     </form>
+    </div>
+   </div>
+  </nav>
+  <div class="container-fluid">'.PHP_EOL;
 
 function get_color($user) {
-	global $users;
-	$isUser = array_search($user, $users);
-	if ($isUser !== false) {
-		return 'color: #'.substr(sha1($user), 0, 6);
-	}
+  global $users;
+  $isUser = array_search($user, $users);
+  if ($isUser !== false) {
+    return 'color: #'.substr(sha1($user), 0, 6);
+  }
 }
 
 if (!isset($date)) {
-	require_once('overview.php');
+  require_once('overview.php');
 } else {
-	require_once('details.php');
+  require_once('details.php');
 }
 
-echo '  &nbsp;<br/>
-  <hr/>
-  <span>Written by <a href="mailto:egore911%20-%20at%20%21%20egore911%20/%20de">Christoph Brill</a> © 2007-'.date('Y').'</span>
-  <p style="text-align: center;">
-   <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10"  style="border: none;" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a><br/><br/>
-   <a href="https://play.google.com/store/apps/details?id=de.egore911.drilog"><img src="http://www.android.com/images/brand/android_app_on_play_logo_small.png" style="border: none;" alt="Available in Android Market" height="45" width="129" /></a>
-  </p>
+echo '  </div>
+  <footer class="footer">
+   <div class="container-fluid">
+    <span class="text-muted">Written by <a href="mailto:egore911%20-%20at%20%21%20egore911%20/%20de">Christoph Brill</a> © 2007-'.date('Y').'<a href="https://play.google.com/store/apps/details?id=de.egore911.drilog"><img src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" height="45" /></a></span>
+   </div>
+  </footer>
  </body>
+ <script type="text/javascript">
+  $(\'.input-group.date\').datepicker({ format: \'yyyy-mm-dd\', autoclose: true, todayHighlight: true, endDate: \'+1d\' }).on(\'changeDate\', function(e) {
+        this.parentElement.parentElement.submit();
+    });
+ </script>
 </html>'.PHP_EOL;
author	Christoph Brill <egore911@gmail.com>	2017-02-07 12:29:03 +0100
committer	Christoph Brill <egore911@gmail.com>	2017-02-07 12:30:01 +0100
commit	87e3127729906d3fe5748816e6f94a4b8776c005 (patch)
tree	dc71da8443175fe91d46895f69dda161856837ef /index.php
parent	776410cf7d709d18317d0734099e486224882a3b (diff)