feat: Add Docker config, Gitea workflow, and map improvements

- Add Dockerfile, nginx.conf, docker-compose.yml - Add Gitea Actions workflow - Improve map mobile UX (safe area, no pull-to-refresh) - Persist map state (zoom, center, layer) to localStorage - Add Google Hybrid map layer - Configure Vite for Cloudflare tunnel
2026-03-01 07:15:17 +00:00
parent 0db2f55831
commit fa1165558b
10 changed files with 267 additions and 14 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+.git
+.vscode
+.DS_Store
--- a/.gitea/workflows/docker-build.yml
+++ b/.gitea/workflows/docker-build.yml
@@ -0,0 +1,18 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Build the Docker image
+      run: docker build . --file Dockerfile --tag my-image-name:$(date +%s)
--- a/20
+++ b/20
@@ -0,0 +1,20 @@
+# Stage 1: Build the Vue application
+FROM node:lts-alpine as build-stage
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:stable-alpine as production-stage
+
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,13 @@
+version: '3'
+services:
+  geo-words:
+    build: .
+    ports:
+      - "3002:80"
+    restart: always
+    networks:
+      - npm_public
+
+networks:
+  npm_public:
+    external: true
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/earth.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Geo Words</title>
    <!-- Meta tags for social media -->
    <meta property="og:title" content="Geo Words" />
--- a/nginx.conf
+++ b/nginx.conf
@@ -0,0 +1,15 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,8 @@ import Map from './components/Map.vue';
 <style scoped>
 .app-container {
  width: 100vw;
-  height: 100vh;
+  height: 100vh; /* Fallback for browsers not supporting dvh */
+  height: 100dvh; /* Dynamic Viewport Height - fixes issues with mobile browser toolbars */
  margin: 0;
  padding: 0;
  overflow: hidden;
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -13,7 +13,8 @@
        attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>"
        layer-type="base"
        name="Voyager (Jasny)"
-        :visible="true"
+        :visible="activeLayer === 'Voyager (Jasny)'"
+        @add="activeLayer = 'Voyager (Jasny)'"
      ></l-tile-layer>

      <l-tile-layer
@@ -21,7 +22,8 @@
        attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>"
        layer-type="base"
        name="Dark Matter (Ciemny)"
-        :visible="false"
+        :visible="activeLayer === 'Dark Matter (Ciemny)'"
+        @add="activeLayer = 'Dark Matter (Ciemny)'"
      ></l-tile-layer>

      <l-tile-layer
@@ -29,7 +31,17 @@
        attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
        layer-type="base"
        name="Satelita (Esri)"
-        :visible="false"
+        :visible="activeLayer === 'Satelita (Esri)'"
+        @add="activeLayer = 'Satelita (Esri)'"
+      ></l-tile-layer>
+
+      <l-tile-layer
+        url="https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}"
+        attribution="&copy; <a href='https://www.google.com/maps'>Google Maps</a>"
+        layer-type="base"
+        name="Satelita + Drogi (Google)"
+        :visible="activeLayer === 'Satelita + Drogi (Google)'"
+        @add="activeLayer = 'Satelita + Drogi (Google)'"
      ></l-tile-layer>

      <l-tile-layer
@@ -37,24 +49,177 @@
        attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
        layer-type="base"
        name="OpenStreetMap (Standard)"
-        :visible="false"
+        :visible="activeLayer === 'OpenStreetMap (Standard)'"
+        @add="activeLayer = 'OpenStreetMap (Standard)'"
      ></l-tile-layer>
    </l-map>
+
+    <button class="control-btn locate-btn" @click="locateUser" title="Lokalizuj mnie">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+        <circle cx="12" cy="12" r="3"></circle>
+        <line x1="12" y1="2" x2="12" y2="4"></line>
+        <line x1="12" y1="20" x2="12" y2="22"></line>
+        <line x1="2" y1="12" x2="4" y2="12"></line>
+        <line x1="20" y1="12" x2="22" y2="12"></line>
+      </svg>
+    </button>
+
+    <button class="control-btn refresh-btn" @click="reloadPage" title="Odśwież aplikację">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M23 4v6h-6"></path>
+        <path d="M1 20v-6h6"></path>
+        <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+      </svg>
+    </button>
  </div>
 </template>

 <script setup>
 import "leaflet/dist/leaflet.css";
 import { LMap, LTileLayer, LControlLayers } from "@vue-leaflet/vue-leaflet";
-import { ref } from "vue";
+import { ref, onMounted, watch } from "vue";

-const zoom = ref(2);
-const center = ref([20, 0]); // Lekko przesunięte, żeby ładniej wyglądało na start
+// Domyślne wartości
+const DEFAULT_ZOOM = 2;
+const DEFAULT_CENTER = [0, 0];
+const DEFAULT_LAYER = 'Voyager (Jasny)';
+
+// Próba odczytu z localStorage
+const savedZoom = localStorage.getItem('mapZoom');
+const savedCenter = localStorage.getItem('mapCenter');
+const savedLayer = localStorage.getItem('mapLayer');
+
+const zoom = ref(savedZoom ? parseInt(savedZoom) : DEFAULT_ZOOM);
+const center = ref(savedCenter ? JSON.parse(savedCenter) : DEFAULT_CENTER);
+const activeLayer = ref(savedLayer || DEFAULT_LAYER);
+const map = ref(null); // Ref do instancji mapy
+
+// Zapisywanie stanu do localStorage przy zmianach
+watch(zoom, (newZoom) => {
+  localStorage.setItem('mapZoom', newZoom.toString());
+});
+
+watch(center, (newCenter) => {
+  localStorage.setItem('mapCenter', JSON.stringify(newCenter));
+}, { deep: true });
+
+watch(activeLayer, (newLayer) => {
+  localStorage.setItem('mapLayer', newLayer);
+});
+
+const locateUser = () => {
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        const { latitude, longitude } = position.coords;
+        const zoomLvl = 18;
+        // Jeśli mapa jest dostępna, używamy flyTo dla płynnej animacji
+        if (map.value && map.value.leafletObject) {
+          map.value.leafletObject.flyTo([latitude, longitude], zoomLvl, {
+            duration: 1.0, // Czas trwania animacji w sekundach
+            easeLinearity: 0.25
+          });
+        } else {
+          // Fallback jeśli mapa nie jest jeszcze gotowa
+          center.value = [latitude, longitude];
+          zoom.value = zoomLvl;
+        }
+      },
+      (error) => {
+        console.warn("Geolocation error:", error);
+        // alert("Nie udało się pobrać lokalizacji. Sprawdź uprawnienia.");
+      },
+      {
+        enableHighAccuracy: true,
+        timeout: 5000,
+        maximumAge: 0
+      }
+    );
+  } else {
+    // alert("Twoja przeglądarka nie obsługuje geolokalizacji.");
+  }
+};
+
+const reloadPage = () => {
+  window.location.reload();
+};
+
+onMounted(() => {
+  // Jeśli nie mamy zapisanego stanu, próbujemy zlokalizować użytkownika na starcie
+  if (!savedCenter) {
+    locateUser();
+  }
+  
+  // Nasłuchiwanie zmian warstw mapy
+  // Czekamy chwilę na inicjalizację mapy w Vue
+  setTimeout(() => {
+    if (map.value && map.value.leafletObject) {
+      const leafletMap = map.value.leafletObject;
+      
+      leafletMap.on('baselayerchange', (e) => {
+        // Używamy nextTick aby upewnić się, że zmiana stanu Vue nie zakłóci Leafleta
+        setTimeout(() => {
+          activeLayer.value = e.name;
+        }, 0);
+      });
+    }
+  }, 100);
+});
 </script>

 <style scoped>
 .map-wrapper {
-  height: 100%;
-  width: 100%;
+  height: 100vh; /* Fallback for browsers not supporting dvh */
+  height: 100dvh; /* Dynamic Viewport Height - fixes issues with mobile browser toolbars */
+  width: 100vw;
+  position: relative;
+}
+
+.control-btn {
+  position: absolute;
+  /* Używamy env(safe-area-inset-bottom) dla iPhone'ów z notchem + stały margines */
+  bottom: calc(20px + env(safe-area-inset-bottom, 20px));
+  z-index: 2000;
+  background: white;
+  border: none;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+  color: #333;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+
+.locate-btn {
+  right: 20px;
+}
+
+.refresh-btn {
+  left: 20px;
+}
+
+.control-btn:hover {
+  background-color: #f0f0f0;
+}
+
+.control-btn:active {
+  background-color: #e0e0e0;
+  transform: scale(0.95);
+}
+
+/* Dostosowanie dla bardzo małych ekranów jeśli potrzebne */
+@media (max-width: 400px) {
+  .control-btn {
+    bottom: 20px;
+    width: 48px;
+    height: 48px;
+  }
 }
 </style>
--- a/src/style.css
+++ b/src/style.css
@@ -13,14 +13,21 @@
  -moz-osx-font-smoothing: grayscale;
 }

-body {
+html, body {
  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overscroll-behavior: none; /* Zapobiega "pull-to-refresh" na mobilkach */
+}
+
+body {
  display: flex;
-  place-items: start; /* Changed from center */
+  place-items: start;
  min-width: 320px;
-  min-height: 100vh;
 }

 #app {
  width: 100%;
+  height: 100%;
 }
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,4 +4,13 @@ import vue from '@vitejs/plugin-vue'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [vue()],
+  server: {
+    host: true,
+    allowedHosts: true,
+    headers: {
+      'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
+      'Pragma': 'no-cache',
+      'Expires': '0',
+    }
+  }
 })