Merge pull request #3767 from meeting-room-booking-system/3765-next-a…

…nd-previous-week-buttons-in-day-view 3765 next and previous week buttons in day view
meeting-room-booking-system · Oct 27, 2024 · b2f6591 · b2f6591
2 parents f5b64b5 + 7bc7f87
commit b2f6591
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 24 deletions.
diff --git a/web/css/mrbs.css.php b/web/css/mrbs.css.php
@@ -644,12 +644,32 @@
   text-decoration: none;
 }
 
+nav a.symbol::before {
+  font-size: large;
+  line-height: 0;
+}
+
 nav a.prev::before {
-  content: '\00276e';  /* HEAVY LEFT-POINTING ANGLE QUOTATION MARK ORNAMENT */
+  content: '\002039';  /* Single left-pointing angle quotation mark */
+}
+
+nav a.next::before {
+  content: '\00203a';  /* Single left-pointing angle quotation mark */
+}
+
+nav a.prev.week::before {
+  content: '\0000ab';  /* Left-pointing double angle quotation mark */
+}
+
+nav a.next.week::before {
+  content: '\0000bb';  /* Right-pointing double angle quotation mark */
 }
 
-nav a.next::after {
-  content: '\00276f';  /* HEAVY RIGHT-POINTING ANGLE QUOTATION MARK ORNAMENT */
+<?php // Don't display the << and >> buttons on narrow screens ?>
+@media (max-width: 30rem) {
+  nav a.week {
+    display: none;
+  }
 }
 
 .message_top {

diff --git a/web/index.php b/web/index.php
@@ -156,29 +156,33 @@ function make_room_select_html (string $view, int $view_all, int $year, int $mon
 
 
 // Gets the link to the next/previous day/week/month
-function get_adjacent_link(string $view, int $view_all, int $year, int $month, int $day, int $area, int $room, bool $next=false) : string
+function get_adjacent_link(string $view, int $view_all, int $year, int $month, int $day, int $area, int $room, int $increment) : string
 {
   $date = new DateTime();
   $date->setDate($year, $month, $day);
 
   switch ($view)
   {
     case 'day':
-      $modifier = ($next) ? '+1 day' : '-1 day';
-      // find the next non-hidden day
-      $i = 0;
-      do {
-        $i++;
-        $date->modify($modifier);
-      } while ($date->isHiddenDay() && ($i < DAYS_PER_WEEK)); // break the loop if all days are hidden
+      $modifier = "$increment day";
+      $date->modify($modifier);
+      if ($increment === 1)
+      {
+        // find the next non-hidden day
+        $i = 0;
+        while ($date->isHiddenDay() && ($i < DAYS_PER_WEEK)) // break the loop if all days are hidden
+        {
+          $i++;
+          $date->modify($modifier);
+        }
+      }
       break;
     case 'week':
-      $modifier = ($next) ? '+1 week' : '-1 week';
+      $modifier = "$increment week";
       $date->modify($modifier);
       break;
     case 'month':
-      $n = ($next) ? 1 : -1;
-      $date->modifyMonthsNoOverflow($n);
+      $date->modifyMonthsNoOverflow($increment);
       break;
     default:
       throw new \Exception("Unknown view '$view'");
@@ -273,6 +277,10 @@ function get_arrow_nav(string $view, int $view_all, int $year, int $month, int $
       $title_prev = get_vocab('daybefore');
       $title_this = get_vocab('gototoday');
       $title_next = get_vocab('dayafter');
+      $title_prev_week = get_vocab('weekbefore');
+      $title_next_week = get_vocab('weekafter');
+      $link_prev_week = get_adjacent_link($view, $view_all, $year, $month, $day, $area, $room, -7);
+      $link_next_week = get_adjacent_link($view, $view_all, $year, $month, $day, $area, $room, +7);
       break;
     case 'week':
       $title_prev = get_vocab('weekbefore');
@@ -292,18 +300,28 @@ function get_arrow_nav(string $view, int $view_all, int $year, int $month, int $
   $title_prev = htmlspecialchars($title_prev);
   $title_next = htmlspecialchars($title_next);
 
-  $link_prev = get_adjacent_link($view, $view_all, $year, $month, $day, $area, $room, false);
+  $link_prev = get_adjacent_link($view, $view_all, $year, $month, $day, $area, $room, -1);
   $link_today = get_today_link($view, $view_all, $area, $room);
-  $link_next = get_adjacent_link($view, $view_all, $year, $month, $day, $area, $room, true);
+  $link_next = get_adjacent_link($view, $view_all, $year, $month, $day, $area, $room, 1);
 
   $link_prev = multisite($link_prev);
   $link_today = multisite($link_today);
   $link_next = multisite($link_next);
 
+  // For the day view we also offer buttons to go back/forward by one week.
+  // The links without any text have their content filled by CSS.
   $html .= "<nav class=\"arrow\">\n";
-  $html .= "<a class=\"prev\" title=\"$title_prev\" aria-label=\"$title_prev\" href=\"" . htmlspecialchars($link_prev) . "\"></a>";  // Content will be filled in by CSS
+  if ($view == 'day')
+  {
+    $html .= "<a class=\"prev week symbol prefetch\" title=\"$title_prev_week\" aria-label=\"$title_prev_week\" href=\"" . htmlspecialchars($link_prev_week) . "\"></a>";
+  }
+  $html .= "<a class=\"prev symbol prefetch\" title=\"$title_prev\" aria-label=\"$title_prev\" href=\"" . htmlspecialchars($link_prev) . "\"></a>";
   $html .= "<a title= \"$title_this\" aria-label=\"$title_this\" href=\"" . htmlspecialchars($link_today) . "\">" . get_vocab('today') . "</a>";
-  $html .= "<a class=\"next\" title=\"$title_next\" aria-label=\"$title_next\" href=\"" . htmlspecialchars($link_next) . "\"></a>";  // Content will be filled in by CSS
+  $html .= "<a class=\"next symbol prefetch\" title=\"$title_next\" aria-label=\"$title_next\" href=\"" . htmlspecialchars($link_next) . "\"></a>";
+  if ($view == 'day')
+  {
+    $html .= "<a class=\"next week symbol prefetch\" title=\"$title_next_week\" aria-label=\"$title_next_week\" href=\"" . htmlspecialchars($link_next_week) . "\"></a>";
+  }
   $html .= "</nav>";
 
   return $html;

diff --git a/web/js/index.js.php b/web/js/index.js.php
@@ -216,10 +216,12 @@
     return;
   }
 
+  var activeConnections = 0;
   var delay = <?php echo $prefetch_refresh_rate?> * 1000;
   var hrefs = [];
-  ['a.prev', 'a.next'].forEach(function(anchor) {
-      var a = $(anchor);
+
+  $('a.prefetch').each(function() {
+      var a = $(this);
       <?php
       // Don't waste time prefetching data for links that aren't visible, which
       // they won't be if we are in kiosk mode.
@@ -248,19 +250,21 @@
   }
 
   hrefs.forEach(function(href) {
+    activeConnections++;
     $.get({url: href, dataType: 'html'})
       .fail(function() {
           <?php // Don't do anything if the request failed ?>
         })
       .done(function(response) {
           updateBody.prefetched[href] = response;
+          activeConnections--;
           <?php // Once we've got all the responses back set off another timeout ?>
-          if (Object.keys(updateBody.prefetched).length === hrefs.length)
+          if (activeConnections === 0)
           {
             <?php
-            // Only set another timeout if the request was successful.  There's no point
-            // in doing so if it failed: it will probably fail again and just fill up
-            // the PHP error log.
+            // Only set another timeout if all the requests were successful.  There's no
+            // point in doing so if one failed: it will probably fail again and just fill
+            // up the PHP error log.
             ?>
             prefetch.timeoutId = setTimeout(prefetch, delay);
           }