Add GPS beacon to mobile page

This patch adds the GPS beacon button to the mobile layout.

aprsd/cmds/webchat.py

@@ -358,7 +358,7 @@ class WebChatFlask(flask_classful.FlaskView):
             html_template = "index.html"
 
         # For development
-        # html_template = "mobile.html"
+        html_template = "mobile.html"
 
         LOG.debug(f"Template {html_template}")
 
@@ -443,7 +443,7 @@ class SendMessageNamespace(Namespace):
         data["from"] = self._config["aprs"]["login"]
         msg = messaging.TextMessage(
             data["from"],
-            data["to"],
+            data["to"].upper(),
             data["message"],
         )
         self.msg = msg

aprsd/web/chat/static/js/gps.js

@@ -0,0 +1,63 @@
+
+function init_gps() {
+   console.log("init_gps Called.")
+   $("#send_beacon").click(function() {
+       console.log("Send a beacon!")
+       getLocation();
+   });
+}
+
+function getLocation() {
+    if (navigator.geolocation) {
+        console.log("getCurrentPosition");
+        navigator.geolocation.getCurrentPosition(showPosition, showError);
+    } else {
+        var msg = "Geolocation is not supported by this browser."
+        console.log(msg);
+        alert(msg)
+    }
+}
+
+function showError(error) {
+    console.log("showError");
+    console.log(error);
+    var msg = "";
+      switch(error.code) {
+        case error.PERMISSION_DENIED:
+          msg = "User denied the request for Geolocation."
+          break;
+        case error.POSITION_UNAVAILABLE:
+          msg = "Location information is unavailable."
+          break;
+        case error.TIMEOUT:
+          msg = "The request to get user location timed out."
+          break;
+        case error.UNKNOWN_ERROR:
+          msg = "An unknown error occurred."
+          break;
+      }
+      console.log(msg);
+      $.toast({
+          title: 'GPS Error',
+          message: msg,
+          showProgress: 'bottom',
+          classProgress: 'red'
+      });
+}
+
+function showPosition(position) {
+  console.log("showPosition Called");
+  msg = {
+      'latitude': position.coords.latitude,
+      'longitude': position.coords.longitude
+  }
+  console.log(msg);
+  $.toast({
+      title: 'Sending GPS Beacon',
+      message: "Latitude: "+position.coords.latitude+"<br>Longitude: "+position.coords.longitude,
+      showProgress: 'bottom',
+      classProgress: 'red'
+  });
+
+  socket.emit("gps", msg);
+}

aprsd/web/chat/static/js/send-message-mobile.js

@@ -38,13 +38,15 @@ function init_chat() {
 
    $("#sendform").submit(function(event) {
        event.preventDefault();
-       msg = {'to': $('#to_call').val(),
+       msg = {'to': $('#to_call').val().toUpperCase(),
               'message': $('#message').val(),
               }
        socket.emit("send", msg);
        $('#message').val('');
        $('#to_call').val('');
    });
+
+   init_gps();
 }
 
 
@@ -76,16 +78,16 @@ function append_message(callsign, msg, msg_html) {
        message_list[callsign] = new Array();
   }
   message_list[callsign].push(msg);
+
+  // Find the right div to place the html
+  new_callsign = add_callsign(callsign);
+  append_message_html(callsign, msg_html, new_callsign);
   if (new_callsign) {
       //click on the new tab
       click_div = '#'+tab_string(callsign);
       console.log("Click on "+click_div);
       $(click_div).click();
   }
-
-  // Find the right div to place the html
-  new_callsign = add_callsign(callsign);
-  append_message_html(callsign, msg_html, new_callsign);
 }
 
 function tab_string(callsign) {

aprsd/web/chat/static/js/send-message.js

@@ -45,56 +45,9 @@ function init_chat() {
        $('#message').val('');
    });
 
-   $("#send_beacon").click(function() {
-       console.log("Send a beacon!")
-       getLocation();
-   });
+   init_gps();
 }
 
-function getLocation() {
-    if (navigator.geolocation) {
-        console.log("getCurrentPosition");
-        navigator.geolocation.getCurrentPosition(showPosition, showError);
-    } else {
-        var msg = "Geolocation is not supported by this browser."
-        console.log(msg);
-        alert(msg)
-    }
-}
-
-function showError(error) {
-    console.log("showError");
-    console.log(error);
-    var msg = "";
-      switch(error.code) {
-        case error.PERMISSION_DENIED:
-          msg = "User denied the request for Geolocation."
-          break;
-        case error.POSITION_UNAVAILABLE:
-          msg = "Location information is unavailable."
-          break;
-        case error.TIMEOUT:
-          msg = "The request to get user location timed out."
-          break;
-        case error.UNKNOWN_ERROR:
-          msg = "An unknown error occurred."
-          break;
-      }
-      console.log(msg);
-      alert(msg);
-}
-
-function showPosition(position) {
-  console.log("showPosition Called");
-  msg = {
-      'latitude': position.coords.latitude,
-      'longitude': position.coords.longitude
-  }
-  console.log(msg);
-  socket.emit("gps", msg);
-}
-
-
 function add_callsign(callsign) {
    /* Ensure a callsign exists in the left hand nav */
 

aprsd/web/chat/templates/index.html

@@ -6,15 +6,15 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
         <script src="https://cdn.socket.io/4.1.2/socket.io.min.js" integrity="sha384-toS6mmwu70G0fw54EGlWWeA4z3dyJ+dlXBtSURSKN4vyRFOcxd3Bzjj/AoOwY+Rg" crossorigin="anonymous"></script>
 
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
-        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.js"></script>
 
         <link rel="stylesheet" href="/static/css/index.css">
         <link rel="stylesheet" href="/static/css/tabs.css">
         <script src="/static/js/main.js"></script>
+        <script src="/static/js/gps.js"></script>
         <script src="/static/js/send-message.js"></script>
 
-
         <script type="text/javascript">
             var initial_stats = {{ initial_stats|tojson|safe }};
 

aprsd/web/chat/templates/mobile.html

@@ -11,6 +11,7 @@
 
         <link rel="stylesheet" href="/static/css/index.css">
         <script src="/static/js/main.js"></script>
+        <script src="/static/js/gps.js"></script>
         <script src="/static/js/send-message-mobile.js"></script>
 
         <script type="text/javascript">
@@ -59,6 +60,7 @@
                 </div>
                 <div class="right floated column">
                     <input type="submit" name="submit" class="ui button" id="send_msg" value="Send" />
+                    <button type="button" class="ui button" id="send_beacon" value="Send GPS Beacon">Send GPS Beacon</button>
                 </div>
 
             </form>