Merge remote-tracking branch 'origin/main' into deployment-to-cloud

msi-se · Jan 20, 2024 · 9f01d3b · 9f01d3b
2 parents 4b7a8dc + 0e9d73e
commit 9f01d3b
Show file tree

Hide file tree

Showing 18 changed files with 183 additions and 105 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .DS_Store
 node_modules
 **/.env
-!fusionauth/.env
+!fusionauth/.env
+!tenant/.env
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Reveal the World</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/frontend/public/demo.png b/frontend/public/demo.png
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,28 +1,35 @@
 <template>
   <v-layout>
     <v-app-bar :elevation="16" :color="tenantBackgroundColor">
-      <img
-        alt="logo-black"
-        :src="TENANT_LOGO"
-        width="200"
-        class="d-inline-block align-top ml-2"
-        style="cursor: pointer"
-      />
+      <a :href="`${PATH}/`" class="d-inline-block ml-2 align-middle">
+        <img
+          alt="logo-white"
+          :src="TENANT_LOGO"
+          width="200"
+          style="cursor: pointer"
+        />
+      </a>
       <a :href="`${PATH}/`" style="text-decoration: none; color: inherit">
         <div class="mr-15 ml-4 app-bar-title" style="cursor: pointer">
-          {{ TENANT }}
+          {{ TENANT === 'default' ? '' : TENANT }}
         </div>
       </a>
       <v-spacer></v-spacer>
-      <a :href="`${PATH}/pin`">
-        <v-btn class="mr-2"> My Travel Records </v-btn>
+      <a :href="`${PATH}/pin`" v-if="isLoggedIn">
+        <v-btn class="mr-2"> My Pins </v-btn>
       </a>
       <a :href="`${PATH}/heatmap`">
         <v-btn class="mr-2"> Heatmap </v-btn>
       </a>
       <!-- display login state -->
       <div v-if="isLoggedIn" class="mr-2">
-        <p>Logged in as {{ username }}</p>
+        <p>{{ username }}</p>
+      </div>
+      <div v-if="isLoggedIn">
+        <v-btn @click="logout" class="mr-2"> Logout </v-btn>
+      </div>
+      <div v-else>
+        <v-btn @click="login" class="mr-2"> Login </v-btn>
       </div>
     </v-app-bar>
     <v-main>

diff --git a/frontend/src/components/LoadingIndicator.vue b/frontend/src/components/LoadingIndicator.vue
@@ -0,0 +1,15 @@
+<template>
+  <v-progress-circular class="floating-spinner" indeterminate color="primary"></v-progress-circular>
+</template>
+
+<script></script>
+
+<style scoped>
+.floating-spinner {
+    position: absolute;
+    float: left;
+    bottom: 5px;
+    left: 5px;
+    z-index: 100000;
+}
+</style>
diff --git a/frontend/src/js/requests.js b/frontend/src/js/requests.js
@@ -1,8 +1,5 @@
 import { TENANT, BACKEND_URL } from "./config";
 
-/**
- * @param {string} username
- */
 export async function getPins() {
     try {
         const response = await fetch(`${BACKEND_URL}/pin/`, {
@@ -22,21 +19,8 @@ export async function getPins() {
     }
 }
 
-// pin: {
-// userId
-// longitude
-// latitude
-// name
-// description
-// date
-// companions
-// duration
-// budget
-// }
-
 /**
- * @param {{username: string, longitude: number, latitude: number, name: string, description: string, date: string, companions: string, duration: string, budget: string}} pin
- * @param {string} token
+ * @param {{longitude: number, latitude: number, name: string, description: string, date: string, companions: string, duration: string, budget: string}} pin
  */
 export async function createPin(pin) {
     try {

diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -28,7 +28,7 @@ const router = createRouter({
       path: `/heatmap`,
       name: 'heatmap',
       component: () => import('../views/HeatmapView.vue'),
-      beforeEnter: routeGuard(`/`)
+      // beforeEnter: routeGuard(`/`)
     }
   ]
 })

diff --git a/frontend/src/views/HeatmapView.vue b/frontend/src/views/HeatmapView.vue
@@ -1,4 +1,5 @@
 <template>
+  <LoadingIndicator v-if="isLoading" />
   <div style="height: 90vh; width: 100vw">
     <l-map
       :center="[47.41322, -1.219482]"
@@ -33,12 +34,14 @@
 import { LMap, LTileLayer, LControlLayers, LRectangle, LPolygon } from '@vue-leaflet/vue-leaflet'
 import 'leaflet/dist/leaflet.css'
 import * as requests from '../js/requests.js'
+import LoadingIndicator from '../components/LoadingIndicator.vue'
 
 export default {
   components: {
     LMap,
     LTileLayer,
-    LPolygon
+    LPolygon,
+    LoadingIndicator
   },
   data() {
     return {
@@ -48,12 +51,15 @@ export default {
       },
       /** @type {Array<{key: string, latlngs: number[][], color: string , opacity: number}>} */
       polygons: [],
-      clickedOnPolygon: false
+      clickedOnPolygon: false,
+      isLoading: true
     }
   },
   computed: {},
   methods: {
     async loadHeatRegions() {
+
+      this.isLoading = true
       const getDesityColorForFloat = (float) => {
         let h = (1.0 - float) * 240
         return 'hsl(' + h + ', 100%, 50%)'
@@ -81,6 +87,8 @@ export default {
       }
 
       console.table(this.polygons)
+
+      this.isLoading = false
     }
   },
   async mounted() {

diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
@@ -1,28 +1,27 @@
 <template>
-    <h1>Home</h1>
-    <div v-if="isLoggedIn">
-        <p>Logged in as {{ username }}</p>
-        <button @click="logout">Logout</button>
-    </div>
-    <div v-else>
-        <button @click="login">Login</button>
-    </div>
-</template>
+    <div class="mt-4 ml-4 mr-4">
 
-<script setup>
-import { computed } from 'vue';
-import { getUser, login, logout } from '../js/user';
+        <h1>Welcome to Reveal the World!</h1>
 
-// get userDetails from cookie with regex match
+        <p>Reveal the World is a platform to visualize your travels. You can mark the places you have already visited on a world map and color in regions. Like with an analog scratch map -- just cooler!</p>
+        <br>
+        <p>You can also check the heatmap to see which regions of the world are particularly frequently visited.</p>
+        <br>
+        <br>
+        <strong>Color your world!</strong>
 
-let isLoggedIn = computed(() => {
-    return getUser() !== null;
-});
+        <div class="mt-4">
+            <v-img
+                alt="demo"
+                :src="`/demo.png`"
+                width="100%"
+            />
 
-let username = computed(() => {
-    return getUser().username;
-});
+        </div>
 
-console.log(getUser());
+    </div>
+</template>
+
+<script setup>
 
 </script>
diff --git a/frontend/src/views/PinView.vue b/frontend/src/views/PinView.vue
@@ -1,5 +1,6 @@
 <template>
   <DataInputDialog v-if="clickedOnMap" @save="saveData" @cancel="cancelData" />
+  <LoadingIndicator v-if="isLoading" />
   <div style="height: 90vh; width: 100vw">
     <l-map
       :center="[47.41322, -1.219482]"
@@ -43,6 +44,7 @@
 import { LMap, LTileLayer, LControlLayers, LRectangle, LPolygon } from '@vue-leaflet/vue-leaflet'
 import 'leaflet/dist/leaflet.css'
 import DataInputDialog from '../components/DataInputDialog.vue'
+import LoadingIndicator from '../components/LoadingIndicator.vue'
 import { getOutlineForLatLng, getRandomPastelColor } from '../js/helpers.js'
 import { getPolygonAndName } from '../js/helpers-new.js'
 import * as requests from '../js/requests.js'
@@ -53,7 +55,8 @@ export default {
     LMap,
     LTileLayer,
     LPolygon,
-    DataInputDialog
+    DataInputDialog,
+    LoadingIndicator
   },
   data() {
     return {
@@ -66,7 +69,8 @@ export default {
         minZoom: 1
       },
       clickedOnMap: false,
-      selectedCoords: { lat: 0, lng: 0 }
+      selectedCoords: { lat: 0, lng: 0 },
+      isLoading: true
     }
   },
   computed: {
@@ -104,20 +108,20 @@ export default {
     async saveData(data) {
       console.log('saveData', data)
 
+      this.clickedOnMap = false
+      this.isLoading = true
+
       const { lat, lng } = this.selectedCoords
-      const saveResponse = await requests.createPin(
-        {
-          name: data.name,
-          description: data.description,
-          date: data.date,
-          companions: data.companions,
-          duration: data.duration,
-          budget: data.budget,
-          latitude: lat,
-          longitude: lng
-        },
-        this.token
-      )
+      const saveResponse = await requests.createPin({
+        name: data.name,
+        description: data.description,
+        date: data.date,
+        companions: data.companions,
+        duration: data.duration,
+        budget: data.budget,
+        latitude: lat,
+        longitude: lng
+      })
 
       // add the marker
       this.markers.push({
@@ -128,13 +132,18 @@ export default {
       // add also the polygon (returned by the post request)
       console.log('saveResponse', saveResponse)
       let polygonLatlngs = saveResponse.polygon
-      this.polygons.push({
-        key: this.polygons.length + 1,
-        latlngs: polygonLatlngs,
-        color: getRandomPastelColor(),
-        polygonname: saveResponse.polygonname
-      })
-      this.clickedOnMap = false
+
+      // only add the polygon if does not exist yet
+      if (!this.polygons.find((polygon) => polygon.polygonname === saveResponse.polygonname)) {
+        this.polygons.push({
+          key: this.polygons.length + 1,
+          latlngs: polygonLatlngs,
+          color: getRandomPastelColor(),
+          polygonname: saveResponse.polygonname
+        })
+      }
+
+      this.isLoading = false
     },
     /**
      * Cancels the DataInputDialog
@@ -143,6 +152,8 @@ export default {
       this.clickedOnMap = false
     },
     async updatePinsAndPolygons() {
+
+      this.isLoading = true
       this.markers = []
       this.polygons = []
 
@@ -161,13 +172,18 @@ export default {
       for (let i = 0; i < pins.length; i++) {
         const pin = pins[i]
         const polygonLatlngs = pin.polygon
-        this.polygons.push({
-          key: this.polygons.length + 1,
-          latlngs: polygonLatlngs,
-          color: getRandomPastelColor(),
-          polygonname: pin.polygonname
-        })
+
+        // only add the polygon if does not exist yet
+        if (!this.polygons.find((polygon) => polygon.polygonname === pin.polygonname)) {
+          this.polygons.push({
+            key: this.polygons.length + 1,
+            latlngs: polygonLatlngs,
+            color: getRandomPastelColor(),
+            polygonname: pin.polygonname
+          })
+        }
       }
+      this.isLoading = false
     }
   },
   async mounted() {

diff --git a/frontend/version.txt b/frontend/version.txt
@@ -1 +1 @@
-v1.0.3
+v2.0.3