feat: ✨ implemented pwa capabillities and refactored lots of backend things

web/src/App.vue

@@ -3,11 +3,15 @@ import {defineComponent, Ref, ref, SetupContext} from 'vue';
 import DebugLog from "./classes/debugger";
 import Settings from "./components/Settings.vue";
 import cookiePrompt from "./components/cookiePrompt.vue";
+import Map from "./components/map.vue";
+import FileUpload from './components/fileUpload.vue';
 
 export default defineComponent({
-  components: {Settings, cookiePrompt},
+  components: {Settings, cookiePrompt, Map},
   setup() {
     var showSettings:Ref<boolean> = ref(false);
+    var showCookiePrompt:Ref<boolean> = ref(localStorage.getItem('allow-data-storage') == undefined);
+      
 
     // check if data storage was allowed and if check for localstorage settings
     if (localStorage.getItem("allow-data-storage") !== null) {
@@ -32,29 +36,55 @@ export default defineComponent({
       showSettings.value = !showSettings.value;
     }
 
-
-
-    const attemptList = ref<InstanceType<typeof AttemptList> | null>(null);
-
-    return { showSettings, toggleSettings };
+    return { showSettings, toggleSettings, showCookiePrompt };
   },
 });
 </script>
 
 <template>
-  <div class="container">
-    <button class="btn btn-primary round" style="float: right" @click="toggleSettings">
-      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
-        <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
-      </svg>
-    </button>
     <Settings v-if="showSettings" @close="toggleSettings"/>
-    <cookiePrompt></cookiePrompt>
-  </div>
+    <cookiePrompt v-if="showCookiePrompt"></cookiePrompt>
+    <FileUpload></FileUpload>
+    <div class="grid-cols-2">
+      <div>
+        <ul class="menu bg-base-200 w-56 p-0 [&_li>*]:rounded-none" style="height: calc(100vh - 77px);">
+          <li><a>Item 1</a></li>
+          <li><a>Item 2</a></li>
+          <li><a>Item 3</a></li>
+        </ul>
+      </div>
+      <div>
+        <div style="float: right; width: 100%;">
+          <ul class="menu bg-base-200 lg:menu-horizontal" style="width: 100%;">
+            <li>
+              <a>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-upload-fill" viewBox="0 0 16 16">
+                  <path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0m-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0"/>
+                </svg>
+                Upload
+              </a>
+            </li>
+            <li>
+              <a @click="toggleSettings">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sliders" viewBox="0 0 16 16">
+                  <path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z"/>
+                </svg>
+                Settings
+              </a>
+            </li>
+          </ul>
+        </div>
+        <Map></Map>
+      </div>
+    </div>
 </template>
 
 <style scoped>
+  body {
+    margin: 0;
+    padding: 0;
+  }
   .container {
-    margin: 10%;
+    margin: 0;
   }
 </style>

web/src/App.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

web/src/assets/lang.json

@@ -8,5 +8,7 @@
     "en_audio_feedback": "Audio Feedack",
     "ger_audio_feedback": "Ton Wiedergabe",
     "en_language": "Language",
-    "ger_language": "Sprache"
+    "ger_language": "Sprache",
+    "en_localizedUploadHeader":"GPX File Upload",
+    "ger_localizedUploadHeader": "Lade eine GPX Datei hoch"
 }

web/src/classes/settings.ts

@@ -7,7 +7,7 @@ enum SettingNodes {
 /**
  * class which handles reading and writing settings
  */
-class SettingsHandler implements ISettings{
+var SettingsHandler = class SettingsHandler implements ISettings{
 
     settings:Map<SettingNodes, any>
     constructor() {
@@ -31,4 +31,6 @@ class SettingsHandler implements ISettings{
     FetchSetting(name:SettingNodes):any {
         return ""
     }
-}
+}
+
+export {SettingsHandler, SettingNodes};

web/src/components/Settings.vue

@@ -17,6 +17,8 @@ export default defineComponent({
       settingsLangLocalized.value = await GetLocalizedText("lang")
     }
 
+    // TODO: if time rework this to function with the new intended settings class
+    // NOTE: this has low priority as the system inplace allthough not very intuitive works
     const changeTheme = (theme:string) => {
 
           document.documentElement.setAttribute('data-theme', theme);
@@ -53,7 +55,7 @@ export default defineComponent({
 
 
 <template>
-  <div class="card bg-base-100 w-full shadow-xl">
+  <div class="card bg-base-100 w-full shadow-xl" style="">
     <div class="card-body">
 
       <h2 class="card-title">Settings</h2>
@@ -91,6 +93,12 @@ export default defineComponent({
 </template>
 
 <style scoped>
+  .settingsBody {
+    position: absolute; 
+    margin: 10% 10% 0 10%; 
+    width: 80%; 
+    z-index: 10;
+  }
   .btn.close {
     position: absolute;
     right: 30px;

web/src/components/cookiePrompt.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import {defineComponent, SetupContext, ref, Ref} from 'vue';
 import GetLocalizedText from "../classes/language";
-import SettingsHandler from "../classes/settings";
+import {SettingsHandler, SettingsNodes} from "../classes/settings";
 import ISettings from "../interfaces/ISettings"
 
 export default defineComponent({
@@ -12,11 +12,11 @@ export default defineComponent({
         var settings:ISettings = new SettingsHandler();
 
         function acceptCookies(){
-
+            localStorage.setItem("allow-data-storage", "true")
         }
 
         function rejectCookies(){
-
+            localStorage.setItem("allow-data-storage", "false")
         }
 
         return { 
@@ -40,8 +40,8 @@ export default defineComponent({
                         Ein cookie welcher die entscheidung speichert wird immer gesetzt
                     </p>
                     <div class="divider"></div>
-                    <button class="btn btn-success">Cookies zulassen</button>
-                    <button class="btn btn-error" style="margin-left: 15px;">Cookies verbieten</button>
+                    <button class="btn btn-success" v-on:click="acceptCookies">Cookies zulassen</button>
+                    <button class="btn btn-error" style="margin-left: 15px;" v-on:click="rejectCookies">Cookies verbieten</button>
                 </div>
             </div>
         </div>

web/src/components/fileUpload.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import {defineComponent, SetupContext, ref, Ref} from 'vue';
+import GetLocalizedText from "../classes/language";
+
+export default defineComponent({
+  emits: ['close'],
+  name: 'settings',
+  setup(_, { emit }: SetupContext) {
+    var showUploadEmbed:Ref<boolean> = ref(false);
+
+    // localized text
+    // if there is time left this gets moved out to its own class
+    var localizedUploadHeader:Ref<string> = ref("")
+    async function getLocalization() {
+      localizedUploadHeader.value = await GetLocalizedText("localizedUploadHeader")
+    }
+
+    getLocalization()
+    const close = () => {
+      emit("close");
+    };
+
+    return { 
+      close, 
+      localizedUploadHeader
+    };
+  },
+});
+</script>
+
+
+<template>
+  <div class="card bg-base-100 w-full shadow-xl" style="">
+    <div class="card-body">
+
+      <h2 class="card-title">{{ localizedUploadHeader }}</h2>
+
+      <button class="btn btn-error close round" @click="close()">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
+          <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .settingsBody {
+    position: absolute; 
+    margin: 10% 10% 0 10%; 
+    width: 80%; 
+    z-index: 10;
+  }
+  .btn.close {
+    position: absolute;
+    right: 30px;
+    top: 30px;
+    margin: 0;
+  }
+</style>

web/src/components/map.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="map-wrap">
+      <div class="map" ref="mapContainer"></div>
+    </div>
+  </template>
+
+  <script>
+  import { Map, NavigationControl, Marker } from 'maplibre-gl';
+  import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue';
+  
+  export default {
+    name: "Map",
+    setup () {
+      const mapContainer = shallowRef(null);
+      const map = shallowRef(null);
+  
+      onMounted(() => {
+        const apiKey = "irEA6TiXQV7M8II74un7";
+        if (apiKey == null) {
+          throw new Error("You need to configure env VUE_APP_API_KEY first, see README");
+        }
+  
+        const initialState = { lng: 139.753, lat: 35.6844, zoom: 14 };
+  
+        map.value = markRaw(new Map({
+          container: mapContainer.value,
+          style: `https://api.maptiler.com/maps/streets/style.json?key=${apiKey}`,
+          center: [initialState.lng, initialState.lat],
+          zoom: initialState.zoom
+        }));
+        map.value.addControl(new NavigationControl(), 'top-right');
+        new Marker({color: "#FF0000"})
+          .setLngLat([139.7525,35.6841])
+          .addTo(map.value);
+      });
+  
+      onUnmounted(() => {
+        map.value?.remove();
+      });
+  
+      return {
+        map, mapContainer
+      };
+    }
+  };
+  </script>
+  
+  
+  <style scoped>
+  @import 'maplibre-gl/dist/maplibre-gl.css';
+  
+  .map-wrap {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - 77px); /* calculate height of the screen minus the heading */
+  }
+  
+  .map {
+    width: 100%;
+    height: 100%;
+  }
+  </style>

web/src/main.d.ts

@@ -1 +0,0 @@
-import './style.css';

web/src/registerServiceWorker.js

@@ -0,0 +1,32 @@
+/* eslint-disable no-console */
+
+import { register } from 'register-service-worker'
+
+if (process.env.NODE_ENV === 'production') {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready () {
+      console.log(
+        'App is being served from cache by a service worker.\n' +
+        'For more details, visit https://goo.gl/AFskqB'
+      )
+    },
+    registered () {
+      console.log('Service worker has been registered.')
+    },
+    cached () {
+      console.log('Content has been cached for offline use.')
+    },
+    updatefound () {
+      console.log('New content is downloading.')
+    },
+    updated () {
+      console.log('New content is available; please refresh.')
+    },
+    offline () {
+      console.log('No internet connection found. App is running in offline mode.')
+    },
+    error (error) {
+      console.error('Error during service worker registration:', error)
+    }
+  })
+}