From 0a10de795d67a7fb9594dbcbf5958231ed428ffc Mon Sep 17 00:00:00 2001
From: Gwendolyn <me@gwendolyn.dev>
Date: Fri, 27 Dec 2024 00:17:26 +0100
Subject: [PATCH] only update overlay if there was a change in the data

---
 src/c3nav/site/static/site/js/c3nav.js | 16 ++++++++++++----
 src/c3nav/static/c3nav/js/api.js       | 24 +++++++++++++++++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js
index c918fd5e..4a1b1512 100644
--- a/src/c3nav/site/static/site/js/c3nav.js
+++ b/src/c3nav/site/static/site/js/c3nav.js
@@ -3170,6 +3170,7 @@ class DataOverlay {
     levels = null;
     feature_geometries = {};
     fetch_timeout = null;
+    etag = null;
 
     constructor(options) {
         this.id = options.id;
@@ -3185,10 +3186,14 @@ class DataOverlay {
     }
 
     async create() {
-        const [features, feature_geometries] = await Promise.all([
-            c3nav_api.get(`mapdata/dataoverlayfeatures/?overlay=${this.id}`),
+        const [
+            {data: features, etag},
+            feature_geometries
+        ] = await Promise.all([
+            c3nav_api.get_with_etag(`mapdata/dataoverlayfeatures/?overlay=${this.id}`, null),
             c3nav_api.get(`mapdata/dataoverlayfeaturegeometries/?overlay=${this.id}`)
         ]);
+        this.etag = etag;
 
         this.feature_geometries = Object.fromEntries(feature_geometries.map(f => [f.id, f.geometry]));
 
@@ -3207,9 +3212,12 @@ class DataOverlay {
             window.clearTimeout(this.fetch_timeout);
             this.fetch_timeout = null;
         }
-        const features= await c3nav_api.get(`mapdata/dataoverlayfeatures/?overlay=${this.id}`);
+        const {data: features, etag} = await c3nav_api.get_with_etag(`mapdata/dataoverlayfeatures/?overlay=${this.id}`, this.etag);
 
-        this.update_features(features);
+        if (features !== null) {
+            this.update_features(features);
+            this.etag = etag;
+        }
 
         if (this.update_interval !== null && this.fetch_timeout === null) {
             this.fetch_timeout = window.setTimeout(() => {
diff --git a/src/c3nav/static/c3nav/js/api.js b/src/c3nav/static/c3nav/js/api.js
index bd176527..2d8e1766 100644
--- a/src/c3nav/static/c3nav/js/api.js
+++ b/src/c3nav/static/c3nav/js/api.js
@@ -49,20 +49,34 @@
             if (typeof body !== 'undefined') {
                 init.body = JSON.stringify(body);
             }
-            const res = await fetch(this.make_url(path), init);
-            return await res.json();
+            return await fetch(this.make_url(path), init);
         }
 
         get(path) {
-            return this.req('GET', path);
+            return this.req('GET', path).then(r => r.json());
+        }
+
+        async get_with_etag(path, etag) {
+            const res = await this.req('GET', path);
+            const res_etag = res.headers.get('etag');
+            if (etag !== null && res_etag === etag) {
+                return {
+                    etag: res_etag,
+                    data: null,
+                };
+            }
+            return {
+                etag: res_etag,
+                data: await res.json(),
+            };
         }
 
         post(path, data) {
-            return this.req('POST', path, data);
+            return this.req('POST', path, data).then(r => r.json());
         }
 
         put(path, data) {
-            return this.req('PUT', path, data);
+            return this.req('PUT', path, data).then(r => r.json());
         }
     }