initial commit

webapp/src/App.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+import { ref } from 'vue'
+
+const items = [
+  { title: 'Home', icon: 'mdi-home', to: '/' },
+  { title: 'About', icon: 'mdi-information', to: '/about' },
+]
+const drawer = ref(false)
+</script>
+
+<template>
+  <v-app>
+    <v-app-bar
+      flat
+      prominent
+    >
+      <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+
+      <v-toolbar-title>
+        <v-img height="36" width="200" src="/deflock-logo.png" />
+      </v-toolbar-title>
+
+      <v-spacer></v-spacer>
+
+      <template v-if="$vuetify.display.mdAndUp">
+        <v-btn icon="mdi-magnify" variant="text"></v-btn>
+
+        <v-btn icon="mdi-filter" variant="text"></v-btn>
+      </template>
+
+      <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
+    </v-app-bar>
+
+    <v-navigation-drawer
+      v-model="drawer"
+      temporary
+    >
+      <v-list nav>
+        <v-list-item
+          v-for="item in items"
+          :key="item.title"
+          link
+          :to="item.to"
+        >{{ item.title }}</v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+
+    <v-main>
+      <RouterView />
+    </v-main>
+  </v-app>
+</template>

webapp/src/main.ts

@@ -0,0 +1,23 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+const app = createApp(App)
+
+app.use(router)
+app.use(vuetify)
+
+app.mount('#app')

webapp/src/router/index.ts

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue')
+    }
+  ]
+})
+
+export default router

webapp/src/views/AboutView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

webapp/src/views/HomeView.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="map-container">
+    <!-- use-global-leaflet=false is a workaround for a bug in current version of vue-leaflet -->
+    <l-map v-if="center" ref="map" v-model:zoom="zoom" :center="center" :use-global-leaflet="false">
+      <l-tile-layer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        layer-type="base"
+        name="OpenStreetMap"
+      ></l-tile-layer>
+    </l-map>
+    <div v-else>
+      loading...
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import 'leaflet/dist/leaflet.css';
+import { LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet';
+import { ref, onMounted } from 'vue';
+import type { Ref } from 'vue';
+
+const zoom: Ref<number> = ref(12);
+const center: Ref<[number, number]|null> = ref(null);
+
+function getUserLocation(): Promise<[number, number]> {
+  return new Promise((resolve, reject) => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        (position) => {
+          resolve([position.coords.latitude, position.coords.longitude]);
+        },
+        (error) => {
+          reject(error);
+        },
+        {
+          timeout: 10000,
+          enableHighAccuracy: true,
+        }
+      );
+    } else {
+      reject(new Error('Geolocation is not supported by this browser.'));
+    }
+  });
+};
+
+onMounted(() => {
+  getUserLocation()
+    .then(location => {
+      center.value = location;
+    });
+});
+
+</script>
+
+<style scoped>
+.map-container {
+  width: 100%;
+  height: calc(100vh - 64px);
+  overflow: auto;
+}
+</style>