Implementing Popup - implement the template for buses data in popup a…

…nd sync with background.js

js/background/background-entry.js

@@ -55,7 +55,7 @@ setInterval(function () {
         // alarm notifications if needed.
         function (result, cb) {
             if (!alarmFlag) {
-                console.log(`alarmFlag is false. No need to execute.`);
+                console.log(`alarmFlag is false. No need to alarm user.`);
                 return cb(null);
             }
             else {

js/popup/popup-msg-handler.js

@@ -39,7 +39,15 @@ function handleBackgroundResponse(response) {
 
 // Refresh the accordion with latest bus real time data.
 function refreshBusesRealTimeData(calculatedResults) {
-    $('#buses-real-time-data').html(entireAccordionTemplate(calculatedResults));
+    if(_.isEmpty(calculatedResults)) {
+        $('#reminder-segment').show();
+        $('#buses-real-time-data-segment').hide();
+    }
+    else {
+        $('#reminder-segment').hide();
+        $('#buses-real-time-data').html(entireAccordionTemplate(calculatedResults));
+        $('#buses-real-time-data-segment').show();
+    }
 }
 
 // Refresh other meta data.
@@ -78,7 +86,7 @@ $('input:checkbox').change(function () {
     // Auto refresh UI data
     setInterval(function () {
         requestBackgroundForData()
-    }, INTERVAL_OF_CHECK_BUS);
+    }, INTERVAL_OF_CHECK_BUS / 2);
 })();
 
 

manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 2,
-  "name": "ZhuHai Bus Notifier",
+  "name": "ZhuHai Bus Arrival Notifier",
   "version": "0.0.1",
   "description": "珠海公交到站提醒器",
   "homepage_url": "https://github.com/yellowb/zhuhai-bus-notifier",

views/options.html

@@ -12,7 +12,7 @@
     <h2 class="ui aligned center header">
         <img class="ui image" src="../images/icon48.png">
         <div class="content">
-            ZhuHai Bus Notifier setups
+            珠海公交到站提醒器设定
         </div>
     </h2>
 </div>
@@ -41,7 +41,9 @@ <h2 class="ui aligned center header">
             <!-- Welcome messages -->
             <div id="line-setup-panel-welcome-message" class="ui info message">
                 <i class="close icon"></i>
-                <span>欢迎使用本插件! 请通过以下步骤配置你想关注的巴士路线信息, 插件会自动获取该巴士路线上实时的巴士状态, 并在巴士快到站时通知你.</span>
+                <span>欢迎使用本插件! 请通过以下步骤配置你想关注的公交路线信息, 插件会自动获取该公交路线上实时的公交车状态, 并在公交车快到站时通知你.<br/><br/>
+                默认每20秒刷新一次公交车数据, 在公交车离设定站点不超过3个站时会在屏幕右下角有弹出式通知, 当然你也可以点击浏览器右上角的插件图标查看线路上
+                    所有公交车的状态. 更详细的资料可以参阅<a href="https://github.com/yellowb/zhuhai-bus-notifier" target="_blank">Github</a>.</span>
             </div>
 
             <!-- Success messages, default hidden -->

views/popup.html

@@ -47,7 +47,7 @@ <h4 class="ui aligned left header">
     <div id="reminder-segment" class="ui segment">
         <!-- Message for no data received. -->
         <div id="reminder-no-line" class="ui info message">
-            <span>等待后台刷新数据... 也可以点击右上角<i class="setting icon"></i>按钮添加更多路线 :)</span>
+            <span>等待后台刷新数据... Tips: 如果是第一次使用, 可以点击右上角<i class="setting icon"></i>按钮添加路线 :)</span>
         </div>
 
     </div>