This commit is contained in:
parent
ac7ac4f922
commit
8f840fd1c1
51
README.md
51
README.md
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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) {
|
||||||
|
@ -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}',
|
||||||
|
Loading…
x
Reference in New Issue
Block a user