Fragment gemist bijna af

website/resources/views/radioschedule.blade.php

@@ -0,0 +1,123 @@
+@extends('page')
+
+@section('title') 
+  Radioprogrammering
+@endsection
+
+@section('content')
+  @parent
+
+  <nav>
+    <ul class="pager">
+      <li class="previous-week"><a href="#">&larr; Week eerder</a></li>
+      <li class="current-week"><a href="#">Deze week</a></li>
+      <li class="next-week"><a href="#">Week later &rarr;</a></li>
+    </ul>
+  </nav>
+  
+  <div id="loading" style="display: none; height: 300px;">
+    <div class="progress progress-striped active">
+      <div class="progress-bar"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
+        <b>Programmaschema ophalen...</b>
+      </div>
+    </div>
+  </div>
+
+  <div id='schedule'>
+    @include('radioscheduleweek', ['schedule' => $schedule])
+  </div>
+
+  <style type="text/css">
+    #schedule table {
+      margin-left: 10px;
+    }
+
+    #schedule table tr {
+    }
+
+    #schedule table td {
+      height: 70px;
+      vertical-align: top;
+    }
+
+    #schedule table td.time {
+      min-width: 150px;
+    }
+
+    #schedule table td.title {
+      width: auto;
+    }
+
+    #schedule table td a { 
+      display: block; 
+      width: 100%; 
+    }
+
+    #schedule .current-marker {
+      margin-left: 3px;
+      padding: 5px !important;
+    }
+  </style>
+
+  <nav>
+    <ul class="pager">
+      <li class="previous-week"><a href="#">&larr; Week eerder</a></li>
+      <li class="current-week"><a href="#">Deze week</a></li>
+      <li class="next-week"><a href="#">Week later &rarr;</a></li>
+    </ul>
+  </nav>
+  
+  <script type="text/javascript">
+    var week = 0;
+    var $loading = $("#loading");  
+    var $schedule = $("#schedule");
+
+    function gotoPage(week) {
+      $loading.css('height', $schedule.height() + 'px').show();
+      $schedule.hide();
+      window.location.hash = (!week) ? "deze-week" 
+                             : (week < 0) ? (week == -1 ? "1-week-geleden" : (-week) + "-weken-geleden")
+                             : "over-" + (week == 1 ? "1-week" : week + "-weken");
+      $.ajax({
+        'url': '{{url('gids')}}/' + week,
+        'success': function(html, status, xhr) { 
+          $schedule.hide().html(html).fadeIn(); 
+          scrollToMiddle($(".current-marker"));
+        }
+      }).done(function(data) { $loading.hide(); });
+    }
+
+    $(".pager .previous-week").click(function(e) { gotoPage(--week); e.preventDefault(); });
+    $(".pager .current-week").click(function(e) { gotoPage(week = 0); e.preventDefault(); });
+    $(".pager .next-week").click(function(e) { gotoPage(++week); e.preventDefault(); });
+
+    window.onhashchange = function() { 
+      if(window.location.hash == "#deze-week") { 
+        newWeek = 0;
+      } else if(window.location.hash.endsWith("1-week-geleden")) {
+        newWeek = -1;
+      } else if(window.location.hash.endsWith("over-1-week")) {
+        newWeek = 1;
+      } else if(window.location.hash.endsWith("weken-geleden")) {
+        newWeek = -parseInt(window.location.hash.substr(1));
+      } else if(window.location.hash.startsWith("#over-")) {
+        newWeek = parseInt(window.location.hash.substr(6));
+      }
+
+      if(newWeek != week) { 
+        gotoPage(newWeek); 
+      }
+    }
+
+    function scrollToMiddle($elt) {
+      if($elt.length == 0) { return; }
+      var elem_position = $elt.offset().top;
+      var window_height = $(window).height();
+      var y = elem_position - window_height / 2;
+      window.scrollTo(0,y);
+    }
+
+    scrollToMiddle($(".current-marker"));
+
+  </script>
+@endsection