Done

diff --git a/index.html b/index.html
index 616ff915a0ffbc35e0fd51147f4d0e0b8eab8644..efa03ae03857d2676f2b25a127b01ae6d27fe24f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -56,7 +56,17 @@
     <form>
       <div data-map="jobs:jobSelection"></div>
       <div data-map="classes:classSelection"></div>
+      <center>
+        <ul class="pagination">
+          <li><a data-bind="onclick:lastWeek">&lt;</a></li>
+          <li><a data-content="week"></a></li>
+          <li><a data-bind="onclick:nextWeek">&gt;</a></li>
+        </ul>
+      </center>
       <div data-map="calendar:calendar"></div>
+      <div class="alert alert-info" data-bind="@display:displayInfo">
+        Es gibt keine Termine in dieser Woche
+      </div>
     </form>
   </body>
 </html>

diff --git a/js/main.js b/js/main.js
index cca04e4b41afc9670280ba8b56b7d0fa41df66d5..f347af2b6acffbfc118097c276905a4137a3b62e 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,7 @@
 model=window.model||{};
 
+var lastxhr;
+
 function load(path,onload,onerror){
   onerror = onerror||function(){};
   var xhr = new XMLHttpRequest();
@@ -20,14 +22,50 @@ function load(path,onload,onerror){
   } catch( e ) {
     errorHandler(e);
   }
+  if( lastxhr && lastxhr.readyState != 4 && lastxhr.abord )
+    lastxhr.abord();
+  lastxhr = xhr;
 }
 
 var jobId = null;
 var classId = null;
+var date = new Date();
+
+Date.prototype.getDayOfYear = function(){
+  var start = new Date(this.getFullYear(), 0, 0);
+  var diff = this - start;
+  var oneDay = 1000 * 60 * 60 * 24;
+  var day = Math.floor(diff / oneDay);
+  return day;
+};
+
+Date.prototype.nextWeek = function(){
+  this.setDate(this.getDate()+7);
+}
+
+Date.prototype.lastWeek = function(){
+  this.setDate(this.getDate()-7);
+}
+
+function updateDate(){
+  model.week = Math.floor(date.getDayOfYear()/7) + '-' + date.getFullYear();
+  loadCalendar();
+}
+
+model.nextWeek = function(){
+  date.nextWeek();
+  updateDate();
+}
+model.lastWeek = function(){
+  date.lastWeek();
+  updateDate();
+}
 
 function loadClasses(){
   jobId = this.value;
+  classId = null;
   model.classes = null;
+  model.displayInfo="none";
   model.calendar = null;
   load(
     "http://home.gibm.ch/interfaces/133/klassen.php?beruf_id=" + jobId,
@@ -42,21 +80,37 @@ function loadClasses(){
 }
 
 function loadCalendar(){
-  classId = this.value;
+  if( "value" in this )
+    classId = this.value;
+  if( classId === null || jobId === null )
+    return;
   model.calendar = null;
+  model.displayInfo="none";
   load(
-    "http://home.gibm.ch/interfaces/133/tafel.php?klasse_id=" + classId,
+    "http://home.gibm.ch/interfaces/133/tafel.php?klasse_id=" + classId + "&woche=" + model.week,
     function( res ){
-      model.calendar = {
-        events: JSON.parse( res )
-      };
+      var events = JSON.parse( res );
+      if( events.length ){
+        model.calendar = {
+          events: events
+        };
+        model.displayInfo="none";
+      }else{
+        model.displayInfo="block";
+      }
     },
     console.error
   );
 }
 
+updateDate();
+
+model.displayInfo="none";
+
 model.jobs = null;
 load("http://home.gibm.ch/interfaces/133/berufe.php", function( res ){
+  jobId = null;
+  model.displayInfo="none";
   model.jobs = {
     list: JSON.parse( res ),
     loadClasses: loadClasses