v0.0.2

 * better contrast and font for stations
 * larger click area to change stations
 * when only 2 stations configured in app, switch around
 * display spinner when loading data

app/index.js

@@ -122,6 +122,7 @@ messaging.peerSocket.onmessage = evt => {
 };
 
 function populateResults(results) {
+  document.getElementById("spinner").state = "disabled";
   departureTimes = [];
   delays = [];
   //populate all elements
@@ -166,7 +167,13 @@ function populateResults(results) {
 }
 
 function launchLookup(from, to) {
-  //TODO: show spinner?
+  // show spinner and hide panes
+  document.getElementById("spinner").state = "enabled";
+  for (var i = 0; i < MAX_PANES; i++) {
+    let index = i+1;
+    let pane = document.getElementById("item"+index);
+    pane.style.display = "hidden";
+  }
   departureTimes = [];
   delays = [];
   document.getElementById("txt-from").text = from;
@@ -184,24 +191,36 @@ messaging.peerSocket.onclose = () => {
   console.log("App Socket Closed");
 };
 
-document.getElementById('txt-from').onclick = (a, evt) => {
+document.getElementById('click-space-from').onclick = (a, evt) => {
   fromStationId ++;
   fromStationId %= stations.length;
-  //Make sure origin and destination are not the same
+  //Make sure origin and destination are not the same, unless there are only 2 in the lest, then swith them around
   if (fromStationId === toStationId) {
-    fromStationId ++;
-    fromStationId %= stations.length;
+    if (stations.length === 2) {
+      let helper = fromStationId;
+      toStationId = fromStationId;
+      fromStationId = helper;
+    } else {
+      fromStationId ++;
+      fromStationId %= stations.length;
+    }
   }
   launchLookup(stations[fromStationId], stations[toStationId]);
 }
 
-document.getElementById('txt-to').onclick = (a, evt) => {
+document.getElementById('click-space-to').onclick = (a, evt) => {
   toStationId ++;
   toStationId %= stations.length;
-  //Make sure origin and destination are not the same
+  //Make sure origin and destination are not the same, unless there are only 2 in the lest, then swith them around
   if (fromStationId === toStationId) {
-    toStationId ++;
-    toStationId %= stations.length;
+    if (stations.length === 2) {
+      let helper = fromStationId;
+      toStationId = fromStationId;
+      fromStationId = helper;
+    } else {
+      toStationId ++;
+      toStationId %= stations.length;
+    }
   }
   launchLookup(stations[fromStationId], stations[toStationId]);
 }

resources/index.gui

@@ -212,11 +212,15 @@
   <text id="text-date-and-time">2020-12-25         00:00</text>
   <rect id="background-from" class="station"/>
   <rect id="background-to" class="station"/>
-  <text id="txt-from" pointer-events="visible">_loading</text>
-  <text id="txt-to" pointer-events="visible">_loading</text>
+  <text id="txt-from">_loading</text>
+  <rect id="click-space-from" pointer-events="visible"/>
+  <text id="txt-to">_loading</text>
+  <rect id="click-space-to" pointer-events="visible"/>
   <!-- these are the end dots for the line visualizing the number of transfers -->
   <use id="from-circle" href="#circle" x="6" y="15%-10"/>
   <line x1="16" y1="15%+10" x2="16" y2="15%+15" fill="white" stroke-width="4" />
   <use id="to-circle" href="#circle" x="6" y="100%-25"/>
   <line x1="16" y1="100%-25" x2="16" y2="100%-29" fill="white" stroke-width="4" />
+  <!--Loading spinner -->
+  <use id="spinner" href="#spinner" />
 </svg>

resources/styles.css

@@ -17,7 +17,7 @@
   display:none;
   width: 100%;
   height: 240;
-  fill: "black";
+  fill: fb-black;
   y: 30;
 }
 
@@ -28,7 +28,7 @@
   text-anchor: end;
   font-family: Seville-Bold;
   display: none;
-  fill: white;
+  fill: fb-white;
 }
 .platform-text {
   y: 150;
@@ -37,14 +37,14 @@
   text-anchor: end;
   font-family: Seville-Bold;
   text-length: 15;
-  fill: white;
+  fill: fb-white;
 }
 .duration-text {
   y: 30%;
   x: 10%;
   font-size: 21;
   text-length: 30;
-  fill: white;
+  fill: fb-white;
 }
 .countdown {
   y: 200;
@@ -54,33 +54,33 @@
   text-length: 32;
   text-anchor: end;
   x: 100%-20;
-  fill: white;
+  fill: fb-white;
 }
 .delay {
   font-size: 30;
   font-family: Seville-Bold;
   font-weight: regular;
   text-length: 32;
-  fill: red;
+  fill: fb-red;
   y: 230;
   x: 100%-20;
   text-anchor: end;
 }
 
 .station {
-  fill: red;
+  fill: "#AA0000";
   height: 10%;
   width: 100%;
 }
 #background-date-and-time {
   y: 0;
   height: 10%;
-  fill: black;
+  fill: fb-black;
 }
 #text-date-and-time {
   text-anchor: middle;
   x: 50%;
-  fill: white;
+  fill: fb-white;
   font-size: 24;
   y: 10%-8;
 
@@ -91,22 +91,51 @@
 #background-to {
   y: 90%;
 }
+
+
+#click-space-from {
+  x: 0;
+  y: 0;
+  width: 100%;
+  height: 25%;
+  opacity:0;
+}
 #txt-from {
   /*text-anchor: middle;*/
   x: 10%;
   y: 10%+25;/*+font-size + 5 margin */ 
   font-size: 30;
+  font-family: Seville-Bold;
+  fill: fb-white;
+
 }
+#click-space-to {
+  x: 0;
+  y: 75%;
+  width: 100%;
+  height: 25%;
+  opacity:0;
+}
+
 #txt-to {
   /*text-anchor: middle;
   x: 50%;*/
   x: 10%;
   y: 100%-5; 
   font-size: 30;
+  font-family: Seville-Bold;
+  fill: fb-white;
 }
 
 
 #pagination-dots {
   height: 235;
 }
 
+#spinner {
+  x: 30%-25;
+  y: 50%-25; 
+  width: 50; 
+  height: 50; 
+  fill: fb-white; }
+}

resources/widgets.gui

@@ -5,5 +5,6 @@
     <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui" />
     <link rel="import" href="/mnt/sysassets/widgets/panoramaview_widget.gui" />
     <link rel="import" href="/mnt/sysassets/widgets/pagination_dots.gui" />
+    <link rel="import" href="/mnt/sysassets/widgets/spinner_widget.gui" />
   </defs>
 </svg>