From 82031fbce9dec75911027f5b0aef23911a389440 Mon Sep 17 00:00:00 2001
From: BroodjeAap <davidzessen@gmail.com>
Date: Sun, 9 Aug 2020 15:25:50 +0000
Subject: [PATCH] also switched to json.Marshal at backend for watchAreas on
 stream page

---
 main.go               |  8 ++++++--
 static/js/stream.js   |  1 +
 templates/stream.html | 19 +++++++++++--------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/main.go b/main.go
index c95abb9..be64be8 100755
--- a/main.go
+++ b/main.go
@@ -41,16 +41,20 @@ func (server Server) index(w http.ResponseWriter, r *http.Request) {
 	}
 	streamTemplate, err := template.ParseFiles(streamHTML, baseHTML)
 
+	watchAreasJSON, _ := json.Marshal(stream.WatchAreas)
+
 	if err != nil {
 		log.Println(err)
 		return
 	}
 	streamTemplate.Execute(w, struct {
-		Streams map[string]*Stream
-		Stream  *Stream
+		Streams        map[string]*Stream
+		Stream         *Stream
+		WatchAreasJSON string
 	}{
 		server.Streams,
 		stream,
+		string(watchAreasJSON[:]),
 	})
 }
 
diff --git a/static/js/stream.js b/static/js/stream.js
index 366e1cb..3047707 100755
--- a/static/js/stream.js
+++ b/static/js/stream.js
@@ -40,6 +40,7 @@ let watchArea = new WatchArea(
 let watchAreas = [];
 
 document.addEventListener("DOMContentLoaded", function(){
+    loadWatchAreas();
     canvas = document.getElementById("canvas");
     ctx = canvas.getContext("2d");
     src = document.getElementById("current_color_stream");
diff --git a/templates/stream.html b/templates/stream.html
index ba52a4b..7f62518 100755
--- a/templates/stream.html
+++ b/templates/stream.html
@@ -83,14 +83,17 @@
 </template>
 
 <script>
-    {{range $watchArea := .Stream.WatchAreas}}
-        watchAreas.push(new WatchArea(
-            '{{ $watchArea.Name }}',
-            {{ $watchArea.Area.Min.X }}, {{ $watchArea.Area.Min.Y }},
-            {{ $watchArea.Area.Max.X }}, {{ $watchArea.Area.Max.Y }},
-            {{ $watchArea.Color.R }}, {{ $watchArea.Color.G }}, {{ $watchArea.Color.B }}
-        ));
-    {{end}}    
+    let _watchAreas = {{.WatchAreasJSON}};
+    function loadWatchAreas(){
+        _watchAreas.forEach(watchArea => {
+            watchAreas.push(new WatchArea(
+                watchArea.name,
+                watchArea.area.Min.X, watchArea.area.Min.Y,
+                watchArea.area.Max.X, watchArea.area.Max.Y,
+                watchArea.color.R, watchArea.color.G, watchArea.color.B
+            ));
+        }); 
+    }
 </script>
 
 {{end}}
\ No newline at end of file