Extend list of available articles to 10 and add content for non-avail…

…able articles
SaskiaKeil · Jun 13, 2021 · b56b163 · b56b163
1 parent b5ca421
commit b56b163
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/app/index.js b/app/index.js
@@ -14,6 +14,17 @@ function initialize() {
 
   title.text = "Loading now...";
   extract.text = "Getting data for you ⌛ \nMake sure your internet is on and location access is granted to fitbit app on phone ⚙";
+
+  // Initialize all pages so there's content in case we can not load enough articles
+  for (var index=2; index <= 10; index++ ) {
+    var article = document.getElementById("article_" + index);
+    var extract = article.getElementsByClassName("extract")[0];
+    var title = article.getElementsByClassName("title")[0];
+    title.text = "No data available";
+    extract.text = "Probably there are no other articles available in 5km distance of your location.";
+  }
+
+
 }
 // Listen for the onmessage event
 messaging.peerSocket.onmessage = function(evt) {

diff --git a/companion/index.js b/companion/index.js
@@ -73,7 +73,7 @@ function getURL(position, language) {
       prop: "extracts",
       ggscoord: position.coords.latitude  + "|" + position.coords.longitude,
       ggsradius: "5000",
-      ggslimit: "5",
+      ggslimit: "10",
       format: "json",
       exintro: 1,
       // Only get 5 sentences, as the message size in companion->app is anyways limited

diff --git a/resources/index.gui b/resources/index.gui
@@ -1,14 +1,24 @@
 <svg class="background">
   <use href="#panoramaview">
-    <!-- Create 5 articles -->
+    <!-- Create 10 articles -->
     <use href="#article" id="article_1"/>
     <use href="#article" id="article_2"/>
     <use href="#article" id="article_3"/>
     <use href="#article" id="article_4"/>
     <use href="#article" id="article_5"/>
+    <use href="#article" id="article_6"/>
+    <use href="#article" id="article_7"/>
+    <use href="#article" id="article_8"/>
+    <use href="#article" id="article_9"/>
+    <use href="#article" id="article_10"/>
 
-    <!-- Create 5 pagination dots -->
+    <!-- Create 10 pagination dots -->
     <use id="pagination-dots" href="#pagination-widget" y="5">
+      <use href="#pagination-dot" />
+      <use href="#pagination-dot" />
+      <use href="#pagination-dot" />
+      <use href="#pagination-dot" />
+      <use href="#pagination-dot" />
       <use href="#pagination-dot" />
       <use href="#pagination-dot" />
       <use href="#pagination-dot" />