✨ Tour

index.html

@@ -55,7 +55,11 @@ <h2 class="title is-2" data-fillin-text="cwb_location_select_value">...</h2>
       </div>
 
       <!-- refresh button -->
-      <button class="button is-large is-success is-outlined is-fullwidth mt-3 mb-3" onclick="refresh_all()">
+      <button
+        id="refresh_button"
+        class="button is-large is-success is-outlined is-fullwidth mt-3 mb-3"
+        onclick="refresh_all()"
+      >
         <span class="icon is-small">
           <i class="fas fa-sync"></i>
         </span>

js/app.js

@@ -92,7 +92,7 @@ function first_time_tour() {
       text: '由此查看當時段的天氣情況',
       attachTo: {
         element: '#step1',
-        on: 'bottom',
+        on: 'top',
       },
       buttons: [
         {
@@ -105,6 +105,20 @@ function first_time_tour() {
         },
       ],
     })
+    tour.addStep({
+      text: '點擊重新整理天氣資料',
+      attachTo: {
+        element: '#refresh_button',
+        on: 'top',
+      },
+      scrollTo: false,
+      buttons: [
+        {
+          text: 'Next',
+          action: tour.next,
+        },
+      ],
+    })
     tour.addStep({
       text: '由此查看接下來36小時的最高最低溫',
       attachTo: {
@@ -118,17 +132,57 @@ function first_time_tour() {
         },
       ],
     })
-    document.getElementById('configButton').addEventListener('click', () => {
-      tour.next()
-    })
+    let config_click_count = 0
+
+    const myClick = () => {
+      config_click_count++
+      if (config_click_count == 2) {
+        // to remove
+        document.getElementById('configButton').removeEventListener('click', myClick)
+      } else {
+        tour.next()
+      }
+    }
+    document.getElementById('configButton').addEventListener('click', myClick)
     tour.addStep({
       text: '點擊設定來調整地區',
       attachTo: {
         element: '#configButton',
         on: 'top',
       },
     })
+    tour.addStep({
+      text: '選取地區',
+      attachTo: {
+        element: '#cwb_location_select',
+        on: 'bottom',
+      },
+      scrollTo: false,
+      buttons: [
+        {
+          text: 'Next',
+          action: tour.next,
+        },
+      ],
+    })
+    tour.addStep({
+      text: '切換語言',
+      attachTo: {
+        element: '#lang_select',
+        on: 'bottom',
+      },
+      scrollTo: false,
+      buttons: [
+        {
+          text: 'Complete',
+          action: tour.next,
+        },
+      ],
+    })
     tour.start()
+    tour.on('cancel', () => {
+      document.getElementById('configButton').removeEventListener('click', myClick)
+    })
     localStorage.setItem('alsoweather_app_seen_tour', 'true')
   }
 }

js/i18n.js

@@ -82,7 +82,7 @@ function getLanguage() {
         return 'en'
       }
     } else {
-      return 'en'
+      return 'zh' //changed from en to zh
     }
   } else {
     return user_selected_lang