Merge pull request #3 from Luuk0510/develop

feat(weather api) add:weather form

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

assets/css/style.scss

@@ -62,6 +62,19 @@ body {
 button {
     @include button-style($primary-color, $primary-hover-color);
     margin: 8px 4px;
+
+    &:disabled {
+        background-color: $background-dark !important;
+        color: $text-color-light !important;
+        cursor: not-allowed;
+        box-shadow: none; 
+        transform: none;
+        pointer-events: none;
+
+        &:hover {
+            background-color: $background-dark;
+        }
+    }
 }
 
 input,
@@ -233,4 +246,65 @@ select {
         transform: translateX(1000px);
         opacity: 0;
     }
+}
+
+#weather-container {
+    background-color: $background-light;
+    border: 1px solid $background-dark;
+    padding: 15px;
+    @include border-radius($border-radius);
+    @include box-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
+    max-width: 300px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    font-family: $font-family;
+    float: left;
+    display: block;
+    clear: both; 
+
+    label {
+        display: block;
+        font-size: $font-size-base;
+        font-weight: bold;
+        margin-bottom: 5px;
+        color: $text-color;
+    }
+
+    input {
+        width: calc(100% - 10px);
+        padding: 8px;
+        border: 1px solid $background-dark;
+        margin-bottom: 10px;
+        @include border-radius($border-radius);
+        @include transition(all, $transition-time);
+        font-size: 15px;
+        box-sizing: border-box;
+
+        &:focus {
+            border-color: $primary-hover-color;
+            outline: none;
+            @include box-shadow(0 0 6px rgba(0, 123, 255, 0.4));
+        }
+    }
+
+    button {
+        @include button-style($primary-color, $primary-hover-color);
+        width: 100%;
+        padding: 8px 15px;
+        font-size: 16px;
+        margin-top: 5px;
+    }
+
+    #weather-message {
+        color: $secondary-color;
+        font-size: 14px;
+        margin-top: 10px;
+    }
+
+    #weather-info-container {
+        padding: 10px;
+        background-color: $background-dark;
+        @include border-radius($border-radius);
+        font-size: 14px;
+    }
 }

src/app.js

@@ -3,7 +3,3 @@ import MainView from './view/mainView.js';
 
 const mainView = new MainView();
 const controller = new Controller(mainView);
-
-
-
-

src/controller/controller.js

@@ -1,17 +1,25 @@
 import PackageService from '../services/packageService.js';
+import WeatherService from '../services/weatherService.js';
+import TruckService from '../services/truckService.js';
 import ConveyorBelt from '../model/conveyorBelt.js';
+import LoadingBay from '../model/loadingBay.js';
 import ConveyorBeltView from '../view/conveyorBeltView.js';
 import Truck from '../model/truck.js';
 import TruckView from '../view/truckView.js';
-import LoadingBay from '../model/loadingBay.js';
+import TruckFormView from '../view/truckFormView.js';
+import WeatherFormView from '../view/weatherFormView.js';
+
+const API_KEY = 'f3500d75fca4725b12c2978ff64c7538';
 
 export default class Controller {
     constructor(mainView) {
         this.mainView = mainView;
+        this.mainView.setController(this);
+        this.weatherFormView = new WeatherFormView();
         this.packageService = new PackageService();
-        this.loadingBays = [new LoadingBay(1), new LoadingBay(2)]; 
+        this.weatherService = new WeatherService(API_KEY); 
+        this.loadingBays = [new LoadingBay(1), new LoadingBay(2)];
         this.currentLoadingBayIndex = 0;
-        this.currentCity = 'Amsterdam';
 
         this.addConveyorBeltButton = document.getElementById('add-conveyor-belt');
         this.removeConveyorBeltButton = document.getElementById('remove-conveyor-belt');
@@ -21,6 +29,7 @@ export default class Controller {
         this.removeConveyorBeltButton.addEventListener('click', this.removeConveyorBelt.bind(this));
         this.switchLoadingBayButton.addEventListener('click', this.switchLoadingBay.bind(this));
         document.addEventListener('truckFormSubmit', this.handleTruckFormSubmit.bind(this));
+        document.addEventListener('weatherFormSubmit', this.handleWeatherFormSubmit.bind(this));
 
         const truckContainer = document.getElementById('truck-container');
 
@@ -49,6 +58,15 @@ export default class Controller {
         event.preventDefault();
     }
 
+    showTruckForm() {
+        if (!this.currentCity) {
+            this.mainView.showWeatherMessage('Vul eerst een stad/dorp in.');
+            return;
+        }
+        const truckFormView = new TruckFormView(this.weatherService, this.weatherData);
+        document.body.appendChild(truckFormView.getFormContainer());
+    }
+
     handleDrop(event) {
         event.preventDefault();
         const packageIndex = parseInt(event.dataTransfer.getData('package-index'));
@@ -68,13 +86,11 @@ export default class Controller {
                 truckView.render(); 
                 this.renderCurrentLoadingBay();
             } else {
-                console.log("Package did not fit in the truck");
                 belt.addPackage(droppedPackage);
             }
         }
     }
 
-
 
     async addConveyorBelt() {
         const currentLoadingBay = this.getCurrentLoadingBay();
@@ -110,15 +126,30 @@ export default class Controller {
             });
         });
 
-        console.log("Conveyor belt started.");
         setInterval(async () => {
             const randomPackage = await this.packageService.getRandomPackage();
-            console.log("Random package added to conveyor belt.");
             randomPackage.position = { x: 0, y: 0 };
             conveyorBelt.addPackage(randomPackage);
         }, 10000);
     }
 
+    async handleWeatherFormSubmit(event) {
+        const { city } = event.detail;
+        if (!city) {
+            this.mainView.showWeatherMessage('Vul een stad/dorp in.');
+            return;
+        }
+
+        try {
+            this.currentCity = city;
+            this.weatherData = await this.weatherService.getWeather(this.currentCity);
+            this.mainView.showWeatherInfo(this.weatherData);
+            this.mainView.enableButtons();
+        } catch (error) {
+            this.mainView.showWeatherMessage(`Kon het weer niet ophalen, vul het opnieuw in: ` + error);
+        }
+    }
+
     handleTruckFormSubmit(event) {
         const truckData = event.detail;
         const currentLoadingBay = this.getCurrentLoadingBay();

src/data/packages.json

@@ -8,6 +8,15 @@
             {"x": 3, "y": 0}
         ]
     },
+    {
+        "type": "I",
+        "blocks": [
+            {"x": 0, "y": 0},
+            {"x": 0, "y": 1},
+            {"x": 0, "y": 2},
+            {"x": 0, "y": 3}
+        ]
+    },
     {
         "type": "O",
         "blocks": [
@@ -26,15 +35,105 @@
             {"x": 1, "y": 1}
         ]
     },
+    {
+        "type": "T",
+        "blocks": [
+            {"x": 1, "y": 0},
+            {"x": 0, "y": 1},
+            {"x": 1, "y": 1},
+            {"x": 1, "y": 2}
+        ]
+    },
+    {
+        "type": "T",
+        "blocks": [
+            {"x": 1, "y": 0},
+            {"x": 0, "y": 1},
+            {"x": 1, "y": 1},
+            {"x": 2, "y": 1}
+        ]
+    },
+    {
+        "type": "T",
+        "blocks": [
+            {"x": 0, "y": 0},
+            {"x": 0, "y": 1},
+            {"x": 0, "y": 2},
+            {"x": 1, "y": 1}
+        ]
+    },
+    {
+        "type": "L",
+        "blocks": [
+            {"x": 0, "y": 0},
+            {"x": 1, "y": 0},
+            {"x": 2, "y": 0},
+            {"x": 2, "y": 1}
+        ]
+    },
+    {
+        "type": "L",
+        "blocks": [
+            {"x": 1, "y": 0},
+            {"x": 1, "y": 1},
+            {"x": 1, "y": 2},
+            {"x": 0, "y": 2}
+        ]
+    },
+    {
+        "type": "L",
+        "blocks": [
+            {"x": 0, "y": 0},
+            {"x": 0, "y": 1},
+            {"x": 1, "y": 1},
+            {"x": 2, "y": 1}
+        ]
+    },
     {
         "type": "L",
+        "blocks": [
+            {"x": 1, "y": 0},
+            {"x": 0, "y": 1},
+            {"x": 1, "y": 1},
+            {"x": 2, "y": 1}
+        ]
+    },
+    {
+        "type": "J",
+        "blocks": [
+            {"x": 0, "y": 0},
+            {"x": 1, "y": 0},
+            {"x": 2, "y": 0},
+            {"x": 0, "y": 1}
+        ]
+    },
+    {
+        "type": "J",
+        "blocks": [
+            {"x": 0, "y": 0},
+            {"x": 0, "y": 1},
+            {"x": 0, "y": 2},
+            {"x": 1, "y": 2}
+        ]
+    },
+    {
+        "type": "J",
         "blocks": [
             {"x": 0, "y": 0},
             {"x": 1, "y": 0},
             {"x": 2, "y": 0},
             {"x": 2, "y": 1}
         ]
     },
+    {
+        "type": "J",
+        "blocks": [
+            {"x": 1, "y": 0},
+            {"x": 1, "y": 1},
+            {"x": 1, "y": 2},
+            {"x": 0, "y": 0}
+        ]
+    },
     {
         "type": "S",
         "blocks": [
@@ -43,5 +142,32 @@
             {"x": 0, "y": 1},
             {"x": 1, "y": 1}
         ]
+    },
+    {
+        "type": "S",
+        "blocks": [
+            {"x": 0, "y": 0},
+            {"x": 0, "y": 1},
+            {"x": 1, "y": 1},
+            {"x": 1, "y": 2}
+        ]
+    },
+    {
+        "type": "Z",
+        "blocks": [
+            {"x": 0, "y": 0},
+            {"x": 1, "y": 0},
+            {"x": 1, "y": 1},
+            {"x": 2, "y": 1}
+        ]
+    },
+    {
+        "type": "Z",
+        "blocks": [
+            {"x": 1, "y": 0},
+            {"x": 1, "y": 1},
+            {"x": 0, "y": 1},
+            {"x": 0, "y": 2}
+        ]
     }
-]
+]

src/model/conveyorBelt.js

@@ -18,10 +18,10 @@ export default class ConveyorBelt {
   startConveyorBelt(callback) {
       this.intervalId = setInterval(() => {
           this.packages.forEach(pkg => {
-              pkg.position.x += 1; // Adjust movement speed as needed
+              pkg.position.x += 1;
           });
-          callback(this.packages); // Callback to update the view
-      }, 1000); // Update every second
+          callback(this.packages);
+      }, 1000);
   }
 
   stopConveyorBelt() {