fix page not loading map and chart

.idea/workspace.xml

@@ -23,10 +23,13 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="99c957e4-aa42-481d-843d-3fbc901e0f79" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/vcs.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/vcs.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/dispatcher/dispatcher.go" beforeDir="false" afterPath="$PROJECT_DIR$/dispatcher/dispatcher.go" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/chart.js" beforeDir="false" afterPath="$PROJECT_DIR$/static/scripts/chart.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/hike.geo.json" beforeDir="false" afterPath="$PROJECT_DIR$/static/scripts/hike.geo.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/map.js" beforeDir="false" afterPath="$PROJECT_DIR$/static/scripts/map.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/websocket.js" beforeDir="false" afterPath="$PROJECT_DIR$/static/scripts/websocket.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/server.go" beforeDir="false" afterPath="$PROJECT_DIR$/server.go" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -86,6 +89,7 @@
       <recent name="C:\Users\Frank\Desktop\gyrogpsc" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Frank\Desktop\gyrogpsc\static" />
       <recent name="C:\Users\Frank\Desktop\gyrogpsc\scripts" />
       <recent name="$PROJECT_DIR$/serial" />
       <recent name="$PROJECT_DIR$/internal" />

index.html

@@ -10,7 +10,7 @@
         body { margin: 0; padding: 0; }
         #map { position: absolute; top: 0; bottom: 0; width: 100%; }
     </style>
-    <script src="scripts/websocket.js"></script>
+    <script src="static/scripts/websocket.js"></script>
     <style>
         * { box-sizing: border-box; }
 
@@ -92,7 +92,7 @@
             </div>
 
             <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-            <script src="scripts/map.js"></script>
+            <script src="static/scripts/map.js"></script>
             <div class="scene">
                 <div id="gyroscope" class="cube">
                     <div class="cube__face cube__face--front">front</div>
@@ -106,7 +106,7 @@
             <div style="width: 600px; height: 400px;">
                 <canvas id="myChart" width="400" height="200"></canvas>
             </div>
-            <script src="scripts/chart.js"></script>
+            <script src="static/scripts/chart.js"></script>
 
         </td>
         <td valign="top" width="50%">

server.go

@@ -75,6 +75,7 @@ func main() {
 	go tcp(d)
 	http.HandleFunc("/echo", echo(d))
 	http.HandleFunc("/", home)
+	http.Handle("/static/", http.FileServer(http.Dir(".")))
 	log.Fatal(http.ListenAndServe(":3011", nil))
 }
 

static/scripts/map.js

@@ -4,13 +4,24 @@ var map = new mapboxgl.Map({
     style: 'mapbox://styles/mapbox/streets-v11',
     zoom: 0
 });
+var emptyjson = {
+    type: "FeatureCollection",
+    features: [
+        {
+            type: "Feature",
+            geometry: {
+                type: "LineString",
+                coordinates: []
+            }
+        }]
+}
 
 map.on('load', function () {
     // We use D3 to fetch the JSON here so that we can parse and use it separately
     // from GL JS's use in the added source. You can use any request method (library
     // or otherwise) that you want.
     d3.json(
-        'scripts/hike.geo.json',
+        'static/scripts/hike.geo.json',
         function (err, data) {
             if (err) throw err;
 

static/scripts/websocket.js

@@ -22,7 +22,7 @@ window.addEventListener("load", function(evt) {
             print("Websocket already open")
             return false;
         }
-        ws = new WebSocket("{{.}}");
+        ws = new WebSocket("ws://localhost:3011/echo");
         ws.onopen = function(evt) {
             print("OPEN");
         }