Edit Readme and info
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Argiris Deligiannidis 2024-04-14 23:07:07 +03:00
parent ac7ac4f922
commit 8f840fd1c1
4 changed files with 64 additions and 5 deletions

View File

@ -1,3 +1,50 @@
# weather-app ## Weather Dashboard
Nuxt 3 Weather App (uses weather_api, gets data from open meteo) 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

View File

@ -13,7 +13,7 @@ export default defineNuxtComponent({
DeleteLocation, DeleteLocation,
}, },
data: () => ({ data: () => ({
apiBaseURL: 'http://10.1.1.2:8880', apiBaseURL: 'https://api-weather.argideli.com',
apiURL: '', apiURL: '',
addModalOpen: false, addModalOpen: false,
addConfirmModalOpen: false, addConfirmModalOpen: false,
@ -25,7 +25,6 @@ export default defineNuxtComponent({
locID: null, locID: null,
locations: [], locations: [],
databaseLocations: [], databaseLocations: [],
weatherData: [], weatherData: [],
weatherIcons: { weatherIcons: {
1: [0], 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} bulk - description of parameter
* @param {type} location - description of parameter * @param {type} location - description of parameter

View File

@ -48,6 +48,13 @@ export default defineNuxtComponent({
getWeatherIcon(wmoCode) { getWeatherIcon(wmoCode) {
return utils.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) { async addLocation(input) {
this.apiURL = `${this.apiBaseURL}/locations`; this.apiURL = `${this.apiBaseURL}/locations`;
if (input) { if (input) {

View File

@ -1,6 +1,10 @@
import type { Config } from 'tailwindcss'; import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme'; import defaultTheme from 'tailwindcss/defaultTheme';
/**
* Custom color palettes:
* bunker, linkwater, silver, blacknight
*/
export default <Partial<Config>>{ export default <Partial<Config>>{
content: [ content: [
'./components/**/*.{js,vue,ts}', './components/**/*.{js,vue,ts}',