more CSS an JS voodoo for bugblues table view

12 years ago · 4c329ecbf9
parent 76efad3c5b
commit 4c329ecbf9
5 changed files with 72 additions and 18 deletions
--- a/includes/pages/user_shifts.php
+++ b/includes/pages/user_shifts.php
@ -324,6 +324,11 @@ function view_user_shifts() {
      $_SESSION['user_shifts'][$key] = array_map('get_ids_from_array', $$key);
  }

+  if (!isset($_REQUEST['new_style']))
+    $_SESSION['user_shifts']['new_style'] = false;
+  else
+    $_SESSION['user_shifts']['new_style'] = true;
+
  if (isset ($_REQUEST['days'])) {
    $filtered = array_filter($_REQUEST['days'], create_function('$a', 'return preg_match("/^\d\d\d\d-\d\d-\d\d\\$/", $a);'));
    if (!empty ($filtered))
@ -343,7 +348,6 @@ function view_user_shifts() {
      ORDER BY `start`");

  $shifts_table = "";
-  $row_count = 0;
  //qqqq
  /*
  [0] => Array
@ -358,7 +362,7 @@ function view_user_shifts() {
      [room_name] => test1
  )
  */
-  if(count($_SESSION['user_shifts']['days'])==1) {
+  if(count($_SESSION['user_shifts']['days'])==1 && $_SESSION['user_shifts']['new_style']) {
    $myrooms=$rooms;
    foreach($myrooms as $k => $v) {
      if(array_search($v["id"],$_SESSION['user_shifts']['rooms'])===FALSE)
@ -380,7 +384,7 @@ function view_user_shifts() {
        }
      }
    }
-    $shifts_table="<table><tr><th>-</th>";
+    $shifts_table="<table id=\"shifts\" style=\"background-color: #fff\"><colgroup><col><col span=\"100\"></colgroup><thead><tr><th>-</th>";
    foreach($myrooms as $room) {
      $rid=$room["id"];
      $colspan=1;
@ -390,7 +394,7 @@ function view_user_shifts() {
        $todo[$rid][$i]=$colspan;
      $shifts_table.="<th colspan=\"$colspan\">".$room['name']."</th>\n";
    }
-    $shifts_table.="</tr>";
+    $shifts_table.="</tr></thead><tbody>";
    for($i=0;$i<24*4;$i++) {
      $thistime=$first+($i*15*60);
      if($thistime%(60*60)==0) {
@ -486,13 +490,13 @@ function view_user_shifts() {
                  $shifts_row .= '<a href="' . page_link_to('user_shifts') . '&shift_id=' . $shift['SID'] . '&type_id=' . $angeltype['id'] . '">Weitere Helfer eintragen &raquo;</a>';
                }
              }
-              $color="";
-              if($is_free) {
-                $color="style=\"background: #F6CECE\";";
-              } else {
-                $color="style=\"background: #BCF5A9\";";
-              }
-              $shifts_table.="<td rowspan=$blocks $color>";
+              if ($is_free && in_array(0, $_SESSION['user_shifts']['filled']))
+                $style='background-color: #F6CECE';
+              elseif (!$is_free && in_array(1, $_SESSION['user_shifts']['filled']))
+                $style='background-color: #BCF5A9';
+              else
+                $style='border: 0';
+              $shifts_table.="<td rowspan=$blocks style=\"$style\">";
              if (($is_free && in_array(0, $_SESSION['user_shifts']['filled'])) || (!$is_free && in_array(1, $_SESSION['user_shifts']['filled']))) {
                $shifts_table.=$shifts_row;
              }
@ -504,13 +508,13 @@ function view_user_shifts() {
          }
        }
        while($todo[$rid][$i]) {
-          $shifts_table.='<td style="border: 1px"></td>';
+          $shifts_table.='<td style="border: 0"></td>';
          $todo[$rid][$i]--;
        }
      }
      $shifts_table.="</tr>\n";
    }
-    $shifts_table.="</table>";
+    $shifts_table.='</tbody></table><script type="text/javascript">scrolltable(document.getElementById("shifts"))</script>';
    // qqq
  } else {
    $shifts_table = array();
@ -623,6 +627,7 @@ function view_user_shifts() {
    'type_select' => make_select($types, $_SESSION['user_shifts']['types'], "types", ucfirst(Get_Text("tasks")) . '<sup>1</sup>'),
    'filled_select' => make_select($filled, $_SESSION['user_shifts']['filled'], "filled", ucfirst(Get_Text("occupancy"))),
    'task_notice' => '<sup>1</sup>' . Get_Text("pub_schichtplan_tasks_notice"),
+    'new_style_checkbox' => '<label><input type="checkbox" name="new_style" value="1" ' . ($_SESSION['user_shifts']['new_style']? ' checked' : '') . '> Use new style if possible</label>',
    'shifts_table' => $shifts_table,
    'ical_text' => sprintf(Get_Text('inc_schicht_ical_text'), make_user_shifts_ical_link($user['ical_key']), page_link_to('user_myshifts') . '&reset'),
    'filter' => ucfirst(Get_Text("to_filter")),
--- a/public/css/base.css
+++ b/public/css/base.css
@ -4,10 +4,8 @@
 }

 body {
-    font-family: Arial;
-    sans-serif;
-    font-size:
-    14px;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
 }

 header {
@ -107,6 +105,29 @@ a.sprache img {
 table {
    border-collapse: collapse;
 	margin-top: 5px;
+	display: block;
+}
+
+table.scrollable {
+	max-width: 100%;
+	overflow-x: scroll;
+	overflow-y: hidden;
+}
+
+table.scrollable thead tr {
+	display: block;
+	position: relative;
+}
+
+table.scrollable tbody {
+	display: block;
+	position: relative;
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+table.scrollable tbody * {
+	width: auto;
 }

 fieldset hr {
--- a/public/css/scrolltable.js
+++ b/public/css/scrolltable.js
@ -0,0 +1,26 @@
+function scrolltable(elem) {
+	var widths = new Array();
+	var thead = elem.getElementsByTagName('thead')[0];
+	var tbody = elem.getElementsByTagName('tbody')[0];
+	var ths = Array.prototype.slice.call(thead.getElementsByTagName('th'),0);
+	ths = ths.concat(Array.prototype.slice.call(tbody.getElementsByTagName('tr')[0].getElementsByTagName('td'), 0));
+	ths.push(tbody.getElementsByTagName('th')[0]);
+	console.debug(ths);
+	for(var i = 0; i < ths.length; i++)
+		widths.push(ths[i].offsetWidth);
+	widths.push(tbody.offsetWidth);
+	elem.className = elem.className + ' scrollable';
+	var tbodywidth = widths.pop();
+	tbody.style.width = (tbodywidth + 16) + 'px';
+	tbody.style.height = (window.innerHeight - 50) + 'px';
+	for(var i = 0; i < ths.length; i++) {
+		var paddingLeft = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('padding-left'));
+		var paddingRight = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('padding-right'));
+		var borderLeft = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('border-left-width'));
+		var borderRight = parseInt(window.getComputedStyle(ths[i], null).getPropertyValue('border-right-width'));
+		var targetwidth = widths.shift();
+		ths[i].style.maxWidth = ths[i].style.minWidth = (targetwidth - paddingLeft - paddingRight - borderRight) + 'px';
+		if (ths[i].offsetWidth > targetwidth)
+			ths[i].style.maxWidth = ths[i].style.minWidth = (parseInt(ths[i].style.minWidth) - 1) + 'px';
+	}
+}
--- a/templates/layout.html
+++ b/templates/layout.html
@ -12,6 +12,7 @@
        <meta name="revisit-after" content="1 days" />
        <script type="text/javascript" src="css/grossbild.js"></script>
        <script type="text/javascript" src="css/forms.js"></script>
+        <script type="text/javascript" src="css/scrolltable.js"></script>
        <link rel="stylesheet" type="text/css" href="css/base.css" />
        <link rel="stylesheet" type="text/css" href="css/style%theme%.css" />
        %atom_link%
--- a/templates/user_shifts.html
+++ b/templates/user_shifts.html
@ -1,4 +1,4 @@
-<form action="" type="get">
+<form action="#shifts" type="get">
 <fieldset class="form" id="filter"><legend>Filter</legend>
 <input type="hidden" name="p" value="user_shifts">
 %room_select%
@ -6,6 +6,7 @@
 %day_select%
 %filled_select%
 <div>%task_notice%</div>
+<div>%new_style_checkbox%</div>
 <input class="button" type="submit" style="width: 100%;" value="%filter%">
 </fieldset>
 </form>