Merge pull request #18 from nspalo/development

BWA-Dev-6-Weather-App-Sending-Request-UI-Functionality

src/resources/js/app.js

@@ -1,3 +1,8 @@
 import './bootstrap';
 
 import '../sass/app.scss';
+
+
+import { sendMessage } from './weather-app.js'
+
+window.sendMessage = sendMessage;

src/resources/js/weather-app.js

@@ -0,0 +1,18 @@
+/**
+ * Simple Javascript to get input and set to url then reload!
+ */
+const chatInput = document.querySelector('#inputAddress')
+
+export function sendMessage() {
+    let message =  chatInput.value;
+    let queryParams = new URLSearchParams(window.location.search);
+
+    // Set new or modify existing parameter value.
+    queryParams.set("location", message);
+
+    // Replace current querystring with the new one.
+    history.replaceState(null, null, "?"+queryParams.toString());
+
+    window.location.reload()
+    chatInput.value = message;
+}

src/resources/views/layouts/main.blade.php

@@ -36,5 +36,7 @@
 
         @include("layouts.footer")
     </div>
+
+    @yield('custom-js')
 </body>
 </html>

src/resources/views/weather-app/weather-update.blade.php

@@ -20,8 +20,8 @@
 
                 <form class="row g-3">
                     <div class="d-flex input-group rounded mb-3">
-                        <input id="inputAddress2" class="form-control rounded" type="search" placeholder="City" aria-label="Search" aria-describedby="search-input">
-                        <button id="search-button" class="btn btn-outline-secondary rounded" type="button">Search</button>
+                        <input id="inputAddress" class="form-control rounded" type="search" placeholder="City" aria-label="Search" aria-describedby="search-input">
+                        <button id="searchButton" class="btn btn-outline-secondary rounded" type="button" onclick="sendMessage()">Search</button>
                     </div>
                 </form>
             </div><!-- Header: Weather Card -->
@@ -152,3 +152,7 @@
     </div>
 </div>
 @endsection
+
+@section('custom-js')
+    @vite(['resources/js/weather-app.js'])
+@endsection

src/vite.config.js

@@ -7,6 +7,7 @@ export default defineConfig({
         laravel([
             'resources/sass/app.scss',
             'resources/js/app.js',
+            'resources/js/weather-app.js',
         ]),
     ],
     resolve: {