[web-ui] added buttons to refresh data and start/stop/restart daemon

wof.py

@@ -67,7 +67,7 @@
  h3 {
  font-size: 2.2em!important;
  margin-top: 5px!important;
- margin-bottom: 50px!important;
+ margin-bottom: 20px!important;
  }
  .gravity {
  font-family: 'Gravity';
@@ -165,6 +165,28 @@
  top: 20px;
  line-height: 25px;
  }
+ #buttons * {
+ display: inline-block;
+ font-size: 1.3em;
+ margin-left: 10px;
+ margin-bottom: 50px;
+ }
+ #buttons button {
+ margin-top: 0px;
+ margin-bottom: 0px;
+ font-family: 'Haxr';
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ color: #fff;
+ background-color: #FF8200;
+ border: 0px;
+ width: auto;
+ padding: 5px 20px;
+ }
+ #buttons *:first-child {
+ margin-left: 0px;
+ }
  @media (max-width: 550px) {
  h1 {
  font-size: 3em!important;
@@ -198,6 +220,9 @@
  #plugin-version, #status-text {
  display: block;
  }
+ #buttons * {
+ font-size: 1em;
+ }
  }
 </style>
 {% endblock %}
@@ -209,8 +234,19 @@
  <h3 class="born2bs center"><span id="plugin-version">pwnagotchi plugin v{{ plugin_version }}</span><span id="status-divider"> - </span><span id="status-text">status: <span id="wof-status">-</span></span></h3>
  </div>
 
+ <div id="buttons" class="center">
+ <form id="form-refresh-data">
+ <button type="submit">REFRESH</button>
+ </form>
+ <form id="form-toggle-daemon">
+ <button type="submit" id="btn-toggle-service"></button>
+ </form>
+ <form id="form-restart-daemon">
+ <button type="submit">RESTART</button>
+ </form>
+ </div>
+
  <p id="status-sum" class="center"><span id="flippers-online">-</span> <span class="green">Online</span> - <span id="flippers-offline">-</span> <span class="red">Offline</span></p>
- 
  <div id="content"></div>
  
  <!-- Flipper modal -->
@@ -250,6 +286,18 @@ def __init__(self, json_file, online_timespan):
 
  if len(self.__known_flippers) > 0:
  logging.info(f"[wof] Already met {len(self.__known_flippers)} Flippers")
+
+ def __is_daemon_running(self):
+ return os.system("systemctl is-active --quiet wof.service") == 0
+
+ def toggle_daemon(self):
+ if self.__is_daemon_running():
+ os.system("systemctl stop wof.service")
+ else:
+ os.system("systemctl start wof.service")
+
+ def restart_daemon(self):
+ os.system("systemctl restart wof.service")
 
  def get_update(self):
  update = {
@@ -258,7 +306,7 @@ def get_update(self):
  "running": False
  }
 
- update["running"] = os.system("systemctl is-active --quiet wof.service") == 0
+ update["running"] = self.__is_daemon_running()
 
  flippers = self.__load_data()
  flippers.sort(key = lambda flipper: flipper["unixLastSeen"], reverse = True)
@@ -381,6 +429,12 @@ def on_webhook(self, path, request):
  if request.method == "GET":
  if path == "/" or not path:
  return render_template_string(INDEX, plugin_version = self.__version__ )
+ elif path == "toggle-daemon":
+ self.__wof_bridge.toggle_daemon()
+ return "{\"status\": \"ok\"}"
+ elif path == "restart-daemon":
+ self.__wof_bridge.restart_daemon()
+ return "{\"status\": \"ok\"}"
  elif path == "flippers":
  data = self.__wof_bridge.get_update()
  return json.dumps(data)

wof_assets/wof_ui.js

@@ -2,7 +2,7 @@ FLIPPER_WHITE = "wof/assets/flipper_white.png";
 FLIPPER_BLACK = "wof/assets/flipper_black.png"
 FLIPPER_TRASPARENT = "wof/assets/flipper_trasparent.png";
 
-function loadFlippers(url, callback) {
+function getRequest(url, callback) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', url, true);
@@ -25,10 +25,12 @@ function displayFlippers(flippers) {
  if(flippers.running) {
  document.getElementById("wof-status").innerHTML = "running";
  document.getElementById("wof-status").className = "green";
+ document.getElementById("btn-toggle-service").innerHTML = "STOP";
  }
  else {
  document.getElementById("wof-status").innerHTML = "not running";
  document.getElementById("wof-status").className = "red";
+ document.getElementById("btn-toggle-service").innerHTML = "START";
  }
  for(var i = 0; i < flippers.online.length; i++) {
  flippers.online[i].online = true;
@@ -110,12 +112,40 @@ function displayFlippers(flippers) {
  jQuery("time.lastSeen").timeago();
 }
 
-loadFlippers("wof/flippers", function(response) {
+getRequest("wof/flippers", function(response) {
  displayFlippers(response)
 })
 
+document.getElementById("form-refresh-data").addEventListener('submit', function(event) {
+ event.preventDefault();
+ getRequest("wof/flippers", function(response) {
+ displayFlippers(response)
+ })
+ return false;
+}, false);
+
+document.getElementById("form-toggle-daemon").addEventListener('submit', function(event) {
+ event.preventDefault();
+ getRequest("wof/toggle-daemon", function(response) {
+ getRequest("wof/flippers", function(response) {
+ displayFlippers(response)
+ })
+ })
+ return false;
+}, false);
+
+document.getElementById("form-restart-daemon").addEventListener('submit', function(event) {
+ event.preventDefault();
+ getRequest("wof/restart-daemon", function(response) {
+ getRequest("wof/flippers", function(response) {
+ displayFlippers(response)
+ })
+ })
+ return false;
+}, false);
+
 setInterval(function() {
- loadFlippers("wof/flippers", function(response) {
+ getRequest("wof/flippers", function(response) {
  displayFlippers(response) 
  })
 }, 60 * 1000) // reload data every minute