[WRT][Extension] Update AppManager & app timer

Change-Id: Ia52adaafcff85970a14663c36671064a8225038b
Signed-off-by: jaekuk, lee <juku1999@samsung.com>

diff --git a/wrt/wrt_support/extensions_repo/app_timer/background.js b/wrt/wrt_support/extensions_repo/app_timer/background.js
index 13b3859..c0e1a4f 100755 (executable)
--- a/wrt/wrt_support/extensions_repo/app_timer/background.js
+++ b/wrt/wrt_support/extensions_repo/app_timer/background.js
@@ -7,28 +7,47 @@ var TimerState = {
   time: {
     hours: 0,
     minutes: 0,
-    seconds: 10
+    seconds: 10,
+  },
+  displayTime: {
+    hours: '00',
+    minutes: '00',
+    seconds: '10',
   },
   defaultTime: {
     hours: 0,
     minutes: 0,
-    seconds: 10
+    seconds: 10,
+  },
+  defaultDisplayTime: {
+       hours: '00',
+       minutes: '00',
+       seconds: '10',
   }
 };
 
 var thisclock;
 
 chrome.runtime.onConnect.addListener(function(port) {
+  chrome.pageAction.onClicked.addListener(function(tab) {
+    console.log('Send page action from background to contentscript!');
+    port.postMessage({page_action: 'execute'});
+  });
 
-  function init() {
+  (function () {
     thisclock = new Clock({
-      second: function (clock) {
-        update(clock);
-      },
-      finish: function (clock) {
-        port.postMessage({background: "timer-finish"});
-      }
-    });
+    second: function (clock) {
+      update(clock);
+    },
+    finish: function (clock) {
+      port.postMessage({background: "timer-finish"});
+    }
+  });
+})();
+
+
+  function init() {
+    port.postMessage({background: "timer-init", value:TimerState});
   }
 
   function reset() {
@@ -40,13 +59,21 @@ chrome.runtime.onConnect.addListener(function(port) {
     if (time.hours != TimerState.time.hours ||
       time.minutes != TimerState.time.minutes ||
       time.seconds != TimerState.time.seconds) {
-        TimerState.defaultTime = time;
+        //TimerState.defaultTime = time;
+        // TimerState.defaultDisplayTime = _getDisplayableTime(time);
       }
       TimerState.time = time;
+      TimerState.displayTime = _getDisplayableTime(time);
+  }
+
+  function _getDisplayableTime(time) {
+    var dh = (time.hours < 10 ? '0' : '') + String(time.hours),
+      dm = (time.minutes < 10 ? '0' : '') + String(time.minutes),
+      ds = (time.seconds < 10 ? '0' : '') + String(time.seconds)
+    return {hours: dh, minutes: dm, seconds: ds};
   }
 
   function start() {
-//    alert('start, '+TimerState.time.hours+' : '+TimerState.time.minutes+' : '+TimerState.time.seconds);
     thisclock.start(TimerState.time.hours, TimerState.time.minutes, TimerState.time.seconds);
   }
 

diff --git a/wrt/wrt_support/extensions_repo/app_timer/contentscript.js b/wrt/wrt_support/extensions_repo/app_timer/contentscript.js
index 4e79c0a..3d8ccb5 100755 (executable)
--- a/wrt/wrt_support/extensions_repo/app_timer/contentscript.js
+++ b/wrt/wrt_support/extensions_repo/app_timer/contentscript.js
@@ -4,27 +4,77 @@ const EXIT_HTML = '\
 <img id = "exit-img" src = "../../extensions/app_timer/images/exit.jpg"></img> \
 </div>\
 </div>';
-//"
 
 const TIME_HTML = '\
 <div id="time-container"> \
 <center><div id="time-contents"> \
-<span id="hours-digit">00</span> \
-<span class="colon">:</span> \
-<span id="minutes-digit">00</span> \
-<span class="colon">:</span> \
-<span id="seconds-digit">00</span> \
+<span id="hours-timedigit">00</span> \
+<span class="timecolon">:</span> \
+<span id="minutes-timedigit">00</span> \
+<span class="timecolon">:</span> \
+<span id="seconds-timedigit">00</span> \
 </div></center> \
 </div>';
 
+const SET_HTML = '\
+<div id="set-container"> \
+<center><div id="set-contents"> \
+<div id = "set-title"><h1> App Timer</h1></div> \
+<div class = "setline"> </div> \
+<div class = "action"> \
+<div class="timer-group"> \
+<span id="hours-setdigit" class="digit seteditable" >00</span> \
+<span class="setcolon">:</span> \
+<span id="minutes-setdigit" class="digit seteditable">00</span> \
+<span class="setcolon">:</span> \
+<span id="seconds-setdigit" class="digit seteditable">10</span> \
+<div class = "time_range_options"> \
+<input id = "work_time_range_input" type = "range" min = "0" max = "3600" value = "10" step = "10" /> \
+</div> \
+</div> \
+<div class = "setline"> </div> \
+<div class="btn-group"> \
+<button id="start-button" class="setbutton">start</button> \
+<button id="reset-button" class="setbutton">reset</button> \
+</div> \
+</div> \
+</div></center> \
+</div>';
+
+var tmpTime = {
+  displayTime: {
+       hours: '00',
+       minutes: '00',
+       seconds: '10',
+  },
+  defaultDisplayTime: {
+       hours: '00',
+       minutes: '00',
+       seconds: '10',
+  }
+};
+
+var f1Key = false;
+const path = require('path');
 var jsonfile = require('jsonfile');
-var jsonobj = {timerStart: false, time:{hours: 0, minutes: 0, seconds: 0}};
-var filepath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('apps_repo'))+'apps_repo/AppManager/data/timer.json';
+var jsonobj = {timerStart: false, time:{hours: 0, minutes: 0, seconds: 10}};
+var filepath = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('apps_repo'))+'extensions/app_timer/data/timer.json';
 var app_id = location.href.split('/');
-
 var port = chrome.runtime.connect({name: "contentscript"});
+
 port.onMessage.addListener(function(msg) {
   console.log('from background : ' + msg.background);
+
+  if (msg.page_action === 'execute') {
+    if (f1Key) {
+      hideModal();
+      f1Key = false;
+    } else {
+      showModal();
+      f1Key = true;
+    }
+  }
+
   if (msg.background == "timer-init") {
     setTime(msg.value);
   }
@@ -36,32 +86,50 @@ port.onMessage.addListener(function(msg) {
     jsonfile.writeFile(filepath, jsonobj, function (err) {
       console.error(err);
     });
-    document.getElementById('hours-digit').innerHTML = jsonobj.time.hours;
-    document.getElementById('minutes-digit').innerHTML = jsonobj.time.minutes;
-    document.getElementById('seconds-digit').innerHTML = jsonobj.time.seconds;
+    document.getElementById('hours-setdigit').innerHTML = jsonobj.time.hours;
+    document.getElementById('minutes-setdigit').innerHTML = jsonobj.time.minutes;
+    document.getElementById('seconds-setdigit').innerHTML = jsonobj.time.seconds;
+    document.getElementById('hours-timedigit').innerHTML = jsonobj.time.hours;
+    document.getElementById('minutes-timedigit').innerHTML = jsonobj.time.minutes;
+    document.getElementById('seconds-timedigit').innerHTML = jsonobj.time.seconds;
   }
   else if (msg.background == "timer-finish") {
+    port.postMessage({contentscript: "timer-stop"});
+    jsonfile.writeFile(filepath, jsonobj, function (err) {
+      console.error(err);
+    });
     exitPopup();
   }
 });
 
+document.body.insertAdjacentHTML('beforeend', EXIT_HTML);
+document.body.insertAdjacentHTML('afterbegin', TIME_HTML);
+document.body.insertAdjacentHTML('beforeend', SET_HTML);
+
 jsonfile.readFile(filepath, function(err, obj) {
-  if (app_id[app_id.length - 2] == 'installer'
-    || app_id[app_id.length - 2] == 'launcher'
-    || app_id[app_id.length - 2] == 'extensions_settings'
-    || app_id[app_id.length - 2] == 'AppManager') {
+  if (app_id[app_id.length - 2] === 'installer'
+    || app_id[app_id.length - 2] === 'launcher'
+    || app_id[app_id.length - 2] === 'extensions_settings'
+    || app_id[app_id.length - 2] === 'AppManager') {
     console.log('Except for '+app_id[app_id.length - 2]);
     return;
   }
-  if (obj.timerStart==true) {
-    console.log('exitPopup: '+window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')));
+  if ( err )
+    console.log('err; '+err);
+  else
     jsonobj = obj;
-    if (obj.time.hours + obj.time.minutes + obj.time.seconds > 0) {
-      initialize();
-    }
-    else {
-      exitPopup();
-    }
+  runningMode();
+
+  tmpTime.displayTime=_getDisplayableTime(jsonobj.time);
+  setTime(tmpTime);
+  bindAll();
+
+  console.log('exitPopup: '+window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')));
+  if (jsonobj.time.hours + jsonobj.time.minutes + jsonobj.time.seconds > 0) {
+    initialize();
+  }
+  else {
+    exitPopup();
   }
 });
 
@@ -73,58 +141,132 @@ window.onbeforeunload = function() {
     console.log('Except for '+app_id[app_id.length - 2]);
     return;
   }
-  stop();
-}
-
-window.onkeydown = function(event) {
-  if (app_id[app_id.length - 2] == 'installer'
-    || app_id[app_id.length - 2] == 'launcher'
-    || app_id[app_id.length - 2] == 'extensions_settings'
-    || app_id[app_id.length - 2] == 'AppManager') {
-    console.log('Except for '+app_id[app_id.length - 2]);
-    return;
-  }
-  if (event.keyCode === 10009){   //esc
-    stop();
-  }
+  pauseMode();
+  port.postMessage({contentscript: "timer-stop"});
 }
 
 function exitPopup() {
-  document.body.insertAdjacentHTML('beforeend', EXIT_HTML);
-  stop();
+  document.getElementById('exit-container').style.display = 'block';
   document.getElementById('exit-img').onclick= function(event) {
     console.log('exitPopup: ');
+    document.getElementById('exit-container').style.display = 'none';
     var launcher = require('electron').remote.getCurrentWindow();
     launcher.close();
   };
 }
 
+function _getDisplayableTime(time) {
+  var dh = (time.hours < 10 ? '0' : '') + String(time.hours),
+       dm = (time.minutes < 10 ? '0' : '') + String(time.minutes),
+       ds = (time.seconds < 10 ? '0' : '') + String(time.seconds)
+  return {hours: dh, minutes: dm, seconds: ds};
+}
+
 function initialize() {
   port.postMessage({contentscript: "timer-init"});
   start();
+  document.getElementById('time-container').style.display = 'block';
+}
+
+function showModal() {
+  console.log('showModal()');
+  document.getElementById('exit-container').style.display = 'none';
+  document.getElementById('time-container').style.display = 'none';
+  document.getElementById('set-container').style.display = 'block';
+}
+
+function hideModal() {
+  console.log('hideModal()');
+  if (jsonobj.timerStart === true && jsonobj.time.hours + jsonobj.time.minutes + jsonobj.time.seconds === 0) {
+    document.getElementById('exit-container').style.display = 'block';
+  }
+  if (jsonobj.timerStart === true && jsonobj.time.hours + jsonobj.time.minutes + jsonobj.time.seconds > 0) {
+    document.getElementById('time-container').style.display = 'block';
+  }
+  document.getElementById('set-container').style.display = 'none';
+}
+
+function bindAll() {
+  document.getElementById('work_time_range_input').addEventListener("input", function(event){
+    tmpTime.displayTime.hours = (Math.floor(event.srcElement.value / 3600)).toString();
+    tmpTime.displayTime.minutes = (Math.floor(Math.floor(event.srcElement.value % 3600) / 60)).toString();
+    tmpTime.displayTime.seconds = (event.srcElement.value % 60).toString();
+    if(tmpTime.displayTime.hours .length < 2){
+      tmpTime.displayTime.hours  = "0" + tmpTime.displayTime.hours ;
+    };
+    if(tmpTime.displayTime.minutes.length < 2){
+      tmpTime.displayTime.minutes = "0" + tmpTime.displayTime.minutes;
+    };
+    if(tmpTime.displayTime.seconds.length < 2){
+      tmpTime.displayTime.seconds = "0" + tmpTime.displayTime.seconds;
+    };
+    setTime(tmpTime);
+  });
+  document.getElementById('start-button').onclick= function(event) {
+    if (jsonobj.timerStart === false) {
+      start();
+    } else {
+      stop();
+    }
+  };
+  document.getElementById('reset-button').onclick= function(event) {
+    if (jsonobj.timerStart === false) {
+      reset();
+    }
+  };
 }
 
 function start() {
-  console.log('start, '+jsonobj.time.hours+' : '+jsonobj.time.minutes+' : '+jsonobj.time.seconds);
-  document.body.insertAdjacentHTML('afterbegin', TIME_HTML);
-  port.postMessage({contentscript: "timer-setTime", value:jsonobj.time});
-  port.postMessage({contentscript: "timer-start"});
+  jsonobj.timerStart = true;
+  jsonobj.time.hours   = Number(document.getElementById('hours-setdigit').innerHTML);
+  jsonobj.time.minutes = Number(document.getElementById('minutes-setdigit').innerHTML);
+  jsonobj.time.seconds = Number(document.getElementById('seconds-setdigit').innerHTML);
+
+  if (jsonobj.time.hours + jsonobj.time.minutes + jsonobj.time.seconds > 0) {
+    runningMode();
+    port.postMessage({contentscript: "timer-setTime", value:jsonobj.time});
+    port.postMessage({contentscript: "timer-start"});
+  }
 }
 
 function reset() {
+  jsonobj.timerStart = false;
+  jsonobj.time.hours = 0;
+  jsonobj.time.minutes = 0;
+  jsonobj.time.seconds = 10;
+  tmpTime.displayTime=_getDisplayableTime(jsonobj.time);
+  setTime(tmpTime);
   port.postMessage({contentscript: "timer-reset"});
 }
 
 function stop() {
+  jsonobj.timerStart = false;
+  pauseMode();
   port.postMessage({contentscript: "timer-stop"});
+}
+
+function setTime(time) {
+  console.log('setTime, '+time.displayTime.hours+' : '+time.displayTime.minutes+' : '+time.displayTime.seconds);
+  document.getElementById('hours-setdigit').innerHTML = time.displayTime.hours;
+  document.getElementById('minutes-setdigit').innerHTML = time.displayTime.minutes;
+  document.getElementById('seconds-setdigit').innerHTML = time.displayTime.seconds;
+  document.getElementById('hours-timedigit').innerHTML = time.displayTime.hours;
+  document.getElementById('minutes-timedigit').innerHTML = time.displayTime.minutes;
+  document.getElementById('seconds-timedigit').innerHTML = time.displayTime.seconds;
+}
+
+function runningMode() {
+  document.getElementById('start-button').innerHTML = 'stop';
+  document.getElementById('work_time_range_input').disabled = true;
   jsonfile.writeFile(filepath, jsonobj, function (err) {
     console.error(err);
   });
 }
 
-function setTime(time) {
-  console.log('setTime, '+time.defaultTime.hours+' : '+time.defaultTime.minutes+' : '+time.defaultTime.seconds);
-  jsonobj.time.hours = time.defaultTime.hours;
-  jsonobj.time.minutes = time.defaultTime.minutes;
-  jsonobj.time.seconds = time.defaultTime.seconds;
+function pauseMode() {
+  document.getElementById('start-button').innerHTML = 'start';
+  document.getElementById('work_time_range_input').disabled = false;
+  jsonfile.writeFile(filepath, jsonobj, function (err) {
+    console.error(err);
+  });
 }

diff --git a/wrt/wrt_support/extensions_repo/app_timer/data/timer.json b/wrt/wrt_support/extensions_repo/app_timer/data/timer.json
new file mode 100755 (executable)
index 0000000..e69de29

diff --git a/wrt/wrt_support/extensions_repo/app_timer/icon.png b/wrt/wrt_support/extensions_repo/app_timer/icon.png
index 249ab48..5515365 100755 (executable)
Binary files a/wrt/wrt_support/extensions_repo/app_timer/icon.png and b/wrt/wrt_support/extensions_repo/app_timer/icon.png differ

diff --git a/wrt/wrt_support/extensions_repo/app_timer/manifest.json b/wrt/wrt_support/extensions_repo/app_timer/manifest.json
index 7fb0db3..c3417b0 100755 (executable)
--- a/wrt/wrt_support/extensions_repo/app_timer/manifest.json
+++ b/wrt/wrt_support/extensions_repo/app_timer/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "app_timer",
-  "version": "2.0.0",
+  "version": "4.0.0",
   "manifest_version": 1,
   "background": {
     "scripts": ["background.js"]
@@ -11,5 +11,8 @@
       "js": ["contentscript.js"],
       "css": ["style.css"]
     }
-  ]
+  ],
+  "page_action": {
+    "default_icon" : "icon.png"
+  }
 }

diff --git a/wrt/wrt_support/extensions_repo/app_timer/style.css b/wrt/wrt_support/extensions_repo/app_timer/style.css
index 8953663..e09b5b8 100755 (executable)
--- a/wrt/wrt_support/extensions_repo/app_timer/style.css
+++ b/wrt/wrt_support/extensions_repo/app_timer/style.css
@@ -1,5 +1,83 @@
 /*----------------------------------------------------*/
+#set-container {
+  display: none; /* Hidden by default */
+  position: fixed;
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+#set-contents {
+  margin: auto;
+  margin-top: 10%;
+  border: 1px solid #888;
+  height: auto;
+  width: 350px;
+  background-color: rgb(255,255,255);
+}
+#set-title {
+  line-height: 24px;
+  font-weight: bold;
+  text-shadow:0 0 10px white;
+  position: relative;
+  margin-top: 5%;
+}
+.setline  {
+  width:90%;
+  height: 1%;
+  border-top:  1px solid rgba(175, 154, 110, 0.51);
+  padding: 0 0 5px;
+  position: relative;
+  margin-top: 5%;
+}
+.action {
+  display: block;
+  position: relative;
+}
+.timer-group {
+  margin-top: 5%;
+}
+.seteditable {
+  display: inline-block;
+  font-size: 80px;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.seteditable:focus {
+  outline: none;
+}
+.setcolon {
+  display: inline-block;
+  font-size: 70px;
+  vertical-align: top;
+}
+.setdigit {
+  vertical-align: middle;
+}
+#work_time_range_input {
+  cursor: pointer;
+  width: 30%;
+}
+.btn-group {
+  margin-top: 25%;
+  margin-bottom: 10%;
+}
+.setbutton {
+  width: 100px;
+  height: 50px;
+  font-size: 30px;
+  margin-left: 5%;
+  margin-right: 5%;
+  cursor: pointer;
+}
+/*----------------------------------------------------*/
 #exit-container {
+  display: none; /* Hidden by default */
   position: fixed;
   z-index: 1; /* Sit on top */
   left: 0;
@@ -20,6 +98,7 @@
 }
 /*----------------------------------------------------*/
 #time-container {
+  display: none; /* Hidden by default */
   margin-top: 2%;
   margin-left: 2%;
   height: auto;
@@ -34,11 +113,12 @@
   text-align: center;
 }
 
-.colon {
+.timecolon {
   display: inline-block;
   vertical-align: top;
 }
 
-.digit {
+.timedigit {
   vertical-align: middle;
 }
+/*----------------------------------------------------*/

diff --git a/wrt/wrt_support/sample/wgt/AppManager.wgt b/wrt/wrt_support/sample/wgt/AppManager.wgt
deleted file mode 100755 (executable)
index 3c76a55..0000000
Binary files a/wrt/wrt_support/sample/wgt/AppManager.wgt and /dev/null differ