V1.1.0 Responsive

Footer angepasst
Lauffähigkeit auf Server verbessert
deploy.sh mit for loop

frontend/Dockerfile

@@ -1,5 +1,11 @@
+# syntax=docker/dockerfile:1
+
 # Build stage
-FROM node:20-alpine AS builder
+FROM --platform=$BUILDPLATFORM node:20-alpine AS builder
+
+# Build arguments
+ARG BUILD_DATE=unknown
+ARG VERSION=unknown
 
 WORKDIR /app
 
@@ -12,14 +18,18 @@ RUN npm ci
 # Copy source code
 COPY . .
 
-# Build app
+# Build app with build info
+ENV VITE_BUILD_DATE=${BUILD_DATE}
+ENV VITE_VERSION=${VERSION}
 RUN npm run build
 
 # Production stage
 FROM nginx:alpine
 
+WORKDIR /usr/share/nginx/html
+
 # Copy built app from builder
-COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/dist .
 
 # Copy nginx configuration
 COPY nginx.conf /etc/nginx/conf.d/default.conf

frontend/nginx.conf

@@ -4,6 +4,10 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
+    # Docker DNS resolver für dynamische Service-Auflösung
+    resolver 127.0.0.11 valid=30s;
+    resolver_timeout 5s;
+
     # Gzip compression
     gzip on;
     gzip_vary on;
@@ -12,7 +16,8 @@ server {
 
     # API proxy (wird im Docker-Compose-Netzwerk aufgelöst)
     location /api/ {
-        proxy_pass http://api:8000/;
+        set $upstream_api api:8000;
+        proxy_pass http://$upstream_api/;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wetterstation-frontend",
   "private": true,
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/WeatherDashboard.css

@@ -1,6 +1,6 @@
 .dashboard {
   width: 100%;
-  max-width: 795px;
+  max-width: 1900px;
   margin: 0 auto;
 }
 
@@ -65,3 +65,83 @@
   color: #666;
   font-weight: 500;
 }
+
+.dashboard-footer {
+/*  margin-top: 2rem;
+*/  padding-top: 1rem;
+}
+
+.footer-divider {
+  border: none;
+  border-top: 1px solid #ccc;
+  margin: 0 0 1rem 0;
+}
+
+.footer-credits {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.85rem;
+  color: #666;
+  margin-bottom: 0.75rem;
+}
+
+.footer-left {
+  text-align: left;
+}
+
+.footer-right {
+  text-align: right;
+}
+
+.footer-sponsor {
+  text-align: center;
+  font-size: 0.85rem;
+  color: #666;
+}
+
+.footer-sponsor a {
+  color: #0066cc;
+  text-decoration: none;
+}
+
+.footer-sponsor a:hover {
+  text-decoration: underline;
+}
+
+.version-line {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+
+.version-short {
+  display: none;
+}
+
+.version-full {
+  display: inline;
+}
+
+/* Responsive Design für schmale Bildschirme (Smartphones) */
+@media (max-width: 768px) {
+  .charts-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .current-values {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .dashboard {
+    padding: 0 0.5rem;
+  }
+  
+  .version-short {
+    display: inline;
+  }
+  
+  .version-full {
+    display: none;
+  }
+}

frontend/src/components/WeatherDashboard.jsx

@@ -4,7 +4,9 @@ import HighchartsReact from 'highcharts-react-official'
 import { format } from 'date-fns'
 import { de } from 'date-fns/locale'
 import './WeatherDashboard.css'
-
+// Build-Informationen (werden beim Build eingef\u00fcgt)
+const buildDate = __BUILD_DATE__
+const version = __VERSION__
 // Deutsche Lokalisierung für Highcharts
 Highcharts.setOptions({
   lang: {
@@ -426,6 +428,30 @@ const WeatherDashboard = ({ data }) => {
         </div>
 
       </div>
+
+      {/* Footer */}
+      <div className="dashboard-footer">
+        <div className="version-line">
+          <div><a href="mailto:rxf@gmx.de">
+                mailto:rxf@gmx.de
+              </a>
+          </div>
+          <div>
+            <span className="version-full">Version</span>
+            <span className="version-short">V</span>
+            {' '}{version} – {buildDate}
+          </div>
+        </div>
+        <hr />
+        <div className="footer-credits">
+          <div className="footer-left">Daten-Erfassung mit einer Davis VantagePro.</div>
+          <div className="footer-right">Grafiken erzeugt mit HighCharts</div>
+        </div>
+        <div className="footer-sponsor">
+          Die Wetterstation wurde vom Zeitungsverlag Waiblingen <a href="https://www.zvw.de" target="_blank" rel="noopener noreferrer">www.zvw.de</a> gestiftet.
+        </div>
+      </div>
+
     </div>
   )
 }

frontend/vite.config.js

@@ -3,8 +3,10 @@ import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   plugins: [react()],
-  base: './',
-  server: {
+  base: './',  define: {
+    __BUILD_DATE__: JSON.stringify(process.env.VITE_BUILD_DATE || 'dev'),
+    __VERSION__: JSON.stringify(process.env.VITE_VERSION || '0.0.0')
+  },  server: {
     host: '0.0.0.0',
     port: 3000,
     proxy: {