Merge branch 'main' into debian12

merged bug fix by first loading in to the page

README.md

@@ -1,56 +1,9 @@
 # Weather App
 
-This is a simple weather application that allows users to view current weather data for a specified location. The app is built using React and TypeScript, and it fetches weather data from an external API.
+This version is only meant for publishing on the web. It is not meant for local development or use.
 
-> For that we use the OpenWeatherMap API. You can get your own API key by signing up at [OpenWeatherMap](https://openweathermap.org/api).
+You can find the web version of the Weather App at [https://weather.the1s.de](https://weather.the1s.de).
-
-## Features
-
-- Search for weather by city name
-- Display current weather conditions including temperature, humidity, and wind speed
-- Responsive design for mobile and desktop views
-- Change API key preferences
-- Display weather data in a user-friendly format
-
-## Installation
-
-1. Clone the repository:
-   ```bash
-   git clone https://git.the1s.de/theis.gaedigk/weather-app.git
-   ```
-2. Navigate to the frontend project directory:
-   ```bash
-   cd weather-app/frontend
-   ```
-3. Install dependencies:
-   ```bash
-   npm install
-   ```
-4. Start the development server:
-   ```bash
-   npm run dev
-   ```
-5. Open your browser and go to `http://localhost:7002` to view the app.
-   **Note:** There is also a backend server directory, which is currently not in use. - You can ignore it for now.
-
-## Usage
-
-1. Get an API key from [OpenWeatherMap](https://openweathermap.org/api).
-2. Click on the "Set API Key" button in the header to enter your API key.
-3. Enter a city name in the search bar and press Enter or click the "Get Weather" button.
-
-**Now you can view the current weather data for the specified city!**
-
-# Other Information
-
-## Technologies Used
-
-- React
-- TypeScript
-- Tailwind CSS
-- OpenWeatherMap API
-- Vite
 
 ## Version
 
-**1.0.0**
+Currently hosted version: **1.0.1**

docker-compose.yml

@@ -1,21 +1,26 @@
 services:
-  # frontend:
+  frontend:
-  #   container_name: frontend
+    container_name: weather-frontend
-  #   build: ./frontend
+    build: ./frontend
-  #   ports:
-  #     - "7002:7002"
-  #   environment:
-  #     - CHOKIDAR_USEPOLLING=true
-  #   volumes:
-  #     - ./frontend:/app
-  #     - /app/node_modules
-  #   restart: unless-stopped
-
-  backend:
-    container_name: backend
-    build: ./backend
     ports:
-      - "7001:7001"
+      - "7002:7002"
+    networks:
+      - proxynet
+    environment:
+      - CHOKIDAR_USEPOLLING=true
     volumes:
-      - ./backend:/bikelane-backend
+      - ./frontend:/app
+      - /app/node_modules
     restart: unless-stopped
+#  backend:
+#   container_name: backend
+#  build: ./backend
+# ports:
+#  - "7001:7001"
+#volumes:
+#  - ./backend:/bikelane-backend
+# restart: unless-stopped
+
+networks:
+  proxynet:
+    external: true

frontend/Dockerfile

@@ -9,4 +9,4 @@ COPY . .
 
 EXPOSE 7002
 
-CMD ["npm", "start"]
+CMD ["npm", "run", "dev"]

frontend/src/components/ChangeAPI.tsx

@@ -64,7 +64,7 @@ const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
           />
         </div>
         <button
-          type="button"
+          type="submit"
           className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
           onClick={handleUpdate}
         >

frontend/src/components/ChangePreferences.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { myToast } from "../utils/toastify";
 
 const getInitialTheme = () => localStorage.getItem("theme") || "light";
-const getInitialUnit = () => localStorage.getItem("unit") || "celsius";
+const getInitialUnit = () => localStorage.getItem("unit") || "metric";
 
 interface Props {
   onClose: () => void;

frontend/src/components/WeatherData.tsx

@@ -24,7 +24,9 @@ const WeatherData: React.FC = () => {
             ? "°C"
             : localStorage.getItem("unit") === "imperial"
             ? "°F"
-            : "K"}
+            : localStorage.getItem("unit") === "standard"
+            ? "K"
+            : "°C"}
         </p>
         <p className="flex items-center justify-center gap-2">
           {weatherData?.sys?.country && (

frontend/src/utils/apiFunc.ts

@@ -7,7 +7,7 @@ export const fetchWeather = async (
 ) => {
   // Get location data
   const location = await fetch(
-    `http://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
+    `https://api.openweathermap.org/geo/1.0/direct?q=${city}&appid=${apiKey}`
   ).then((response) => {
     if (response.status === 401) {
       myToast(

frontend/vite.config.ts

@@ -1,12 +1,17 @@
 import { defineConfig } from "vite";
 import tailwindcss from "@tailwindcss/vite";
+
 export default defineConfig({
   plugins: [tailwindcss()],
-    server: {
+  server: {
     host: "0.0.0.0",
+    allowedHosts: ["weather.the1s.de"],
     port: 7002,
-    watch: {
+    watch: { usePolling: true },
-      usePolling: true,
+    hmr: {
+      host: "weather.the1s.de",
+      port: 7002,
+      protocol: "wss",
     },
   },
 });