From 8f840fd1c12c1165c1254e445531c8e3ad052535 Mon Sep 17 00:00:00 2001 From: Argiris Deligiannidis Date: Sun, 14 Apr 2024 23:07:07 +0300 Subject: [PATCH] Edit Readme and info --- README.md | 51 +++++++++++++++++++++++- components/WeatherDashboard.vue | 7 ++-- components/WeatherModals/AddLocation.vue | 7 ++++ tailwind.config.ts | 4 ++ 4 files changed, 64 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c455f79..238607d 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,50 @@ -# weather-app +## Weather Dashboard -Nuxt 3 Weather App (uses weather_api, gets data from open meteo) \ No newline at end of file +This project is a weather dashboard that retrieves and displays weather data for different locations. + +## Installation + +#### npm: + +1. Clone the repository. +2. Run `npm install` to install the project dependencies. +3. Start the development server with `npm run dev` or build the production index.mjs with `npx nuxi build` and run it with `node .output/server/index.mjs`. + - Don't forget to change the apiBaseURL at line 16 in WeatherDashboard.vue !\* + +#### Docker: + +1. There is a Dockerfile for image building +2. Also there is apublic image can be used: + + - docker pull git.argideli.com/argideli/weather-app:latest + +## Usage + +- The dashboard fetches weather data from the API based on configured locations. +- Add new locations by clicking on "+ Add Location" + - Upon entering a search input you will be presented with a list of locations + - Click on the desired location and then Add Location +- View weather details by clicking on a specific location. +- Remove a location by clicking on the trash bin + +## Components + +### Pages + +- index.vue + +### Components + +- WeatherDashBoard.vue + + - Displays the main table + - Subcomponents: + - AddLocation.vue + - Modal for adding a new location + - DeleteLocation.vue + + - Modal confirming deletion of a location + + - SlideDetails.vue + + - Provides the seven day forecast of the location that was clicked diff --git a/components/WeatherDashboard.vue b/components/WeatherDashboard.vue index dd6acfb..8f0ab4f 100644 --- a/components/WeatherDashboard.vue +++ b/components/WeatherDashboard.vue @@ -13,7 +13,7 @@ export default defineNuxtComponent({ DeleteLocation, }, data: () => ({ - apiBaseURL: 'http://10.1.1.2:8880', + apiBaseURL: 'https://api-weather.argideli.com', apiURL: '', addModalOpen: false, addConfirmModalOpen: false, @@ -25,7 +25,6 @@ export default defineNuxtComponent({ locID: null, locations: [], databaseLocations: [], - weatherData: [], weatherIcons: { 1: [0], @@ -91,7 +90,9 @@ export default defineNuxtComponent({ }, /** - * A description of the entire function. + * Calls the API to fetch weather data for the specified location. + * a bulk parameter can be passed to fetch weather data for a list oflocations + * or a single location. * * @param {type} bulk - description of parameter * @param {type} location - description of parameter diff --git a/components/WeatherModals/AddLocation.vue b/components/WeatherModals/AddLocation.vue index 2564f96..fcbb8bb 100644 --- a/components/WeatherModals/AddLocation.vue +++ b/components/WeatherModals/AddLocation.vue @@ -48,6 +48,13 @@ export default defineNuxtComponent({ getWeatherIcon(wmoCode) { return utils.getWeatherIcon(wmoCode); }, + /** + * Adds a new location based on the input provided. + * if the location already exists in the database, it will not be added. + * + * + * @param {Object} input - The input object containing location details. + */ async addLocation(input) { this.apiURL = `${this.apiBaseURL}/locations`; if (input) { diff --git a/tailwind.config.ts b/tailwind.config.ts index d9e9b70..e175096 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,10 @@ import type { Config } from 'tailwindcss'; import defaultTheme from 'tailwindcss/defaultTheme'; +/** + * Custom color palettes: + * bunker, linkwater, silver, blacknight + */ export default >{ content: [ './components/**/*.{js,vue,ts}',