Merge pull request #47 from Mooney91/admin25

Admin25

README.md

@@ -30,6 +30,8 @@ You can run this service individually by executing `docker-compose up database`.
 
 This is the system's API. The current version is v1 and documentation can be found in the `server/v1` directory. 
 
+You can look at the API documentation [here](https://github.com/Mooney91/vteam6-HT23/blob/main/server/v1/API.md).
+
 You can run this service individually by executing `docker-compose up database server`. The database for the server/API to function.
 
 ## admin-interface (Administrative Interface)

admin-interface/src/assets/button.css

@@ -0,0 +1,33 @@
+.city-button {
+    border-color: #000000;
+    border-width: 2px;
+    margin: 5px;
+    background-color: #f1f1f1;
+}
+
+
+.title-page-button {
+    border-color: #000000;
+    border-width: 2px;
+    margin: 5px;
+    background-color: #f1f1f1;
+    height: 100px;
+    width: 100px;
+}
+
+.title-page-button {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 5px;
+}
+
+.title-page-button div {
+    border-color: #000000;
+    border-width: 1px;
+    border-style: solid;
+    margin: 5px;
+    background-color: #f1f1f1;
+    height: 100px;
+    width: 100px;
+    aspect-ratio: 1;
+}

admin-interface/src/assets/form.css

@@ -8,7 +8,7 @@
     margin: 5px;
     background-color: #90ee90;
     border-radius: 25px;
-    display: block
+    display: block;
 }
 
 .edit-form {
@@ -17,5 +17,5 @@
     margin: 5px;
     background-color: #ffa07a;
     border-radius: 25px;
-    display: block
+    display: block;
 }

admin-interface/src/assets/image.css

@@ -44,4 +44,11 @@
 
 .map-icon:hover {
     filter: invert(100%) sepia(0%) saturate(31%) hue-rotate(156deg) brightness(107%) contrast(108%);
+}
+
+.home-images {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+
 }

admin-interface/src/assets/main.css

@@ -5,6 +5,7 @@
 @import './image.css';
 @import './form.css';
 @import './map.css';
+@import './button.css';
 
 body {
   margin: 0;
@@ -52,6 +53,8 @@ body {
   font-weight: 600;
   color: #ff0000;
 }
+
+
 /* @import './base.css'; */
 
 /* #app {

admin-interface/src/components/TitleItem.vue

@@ -1,5 +1,5 @@
 <script>
-// import { RouterLink, RouterView } from 'vue-router'
+import { RouterLink } from 'vue-router'
 // import { useAuth0 } from '@auth0/auth0-vue';
 
 export default {
@@ -23,14 +23,19 @@ export default {
 
 <template>
     <div class="header">
-        <img alt="scooter logo" class="logo" src="@/assets/scooter-logo.png" width="25" height="25" />
+
+        <RouterLink to="/">
+            <img alt="scooter logo" class="logo" src="@/assets/scooter-logo.png" width="25" height="25" />
+        </RouterLink>
         <h2 class="title">Admin Interface - Svenska Elsparkscyklar AB</h2>
+
         <!-- <template v-if="isAuthenticated">
         <div @click="logout" class="login-button">Logout</div>
         </template>
         <template v-else>
             <div @click="login" class="login-button">Login</div>
         </template> -->
+
     </div>
 </template>
 

admin-interface/src/views/BigMapView.vue

@@ -5,9 +5,12 @@
         <circle cx='20' cy='20' r='14' fill='#FF0000' stroke='#742227' stroke-width='2' />
         <circle cx='20' cy='20' r='4' fill='#742227' />
     </svg>Scooter  
+    <button @click="zoomToCity('59.334591, 18.063240')" class="city-button">Stockholm</button>
+    <button @click="zoomToCity('57.708870, 11.974560')" class="city-button">Gothenburg</button>
+    <button @click="zoomToCity('55.60587, 13.00073')" class="city-button">Malmö</button>
     </p>
       <div class="map" style="height:80vh; width:100%">
-      <l-map class="map" ref="map" v-model:zoom="zoom" :center="[57.5477, 14.0157]" :use-global-leaflet="false">
+      <l-map class="map" ref="map" v-model:zoom="zoom" v-model:center="coordinates" :use-global-leaflet="false">
         <l-tile-layer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           layer-type="base"
@@ -48,7 +51,7 @@
           </l-marker>
         </template>
 
-        <template :key="item.ScooterID" v-for="item in scooters">
+        <template :key="item.Location" v-for="item in scooters">
           <l-marker :icon="redDotIcon" :lat-lng="item.Location.split(',')">
             <l-popup>
               <div>
@@ -89,7 +92,7 @@
         return {
           // socket: null,
           zoom: 6,
-          coordinates: null,
+          coordinates: [57.5477, 14.0157],
           charging: [],
           parking: [],
           city: null,
@@ -138,7 +141,9 @@
               } catch (error) {
                   console.error('Error fetching station data:', error);
                   throw error;
-              }
+              } finally {
+                    this.forceRerender()
+                }
           },
           async fetchScooters() {
               try {
@@ -156,7 +161,9 @@
               } catch (error) {
                   console.error('Error fetching scooter data:', error);
                   throw error;
-              } 
+              } finally {
+                    this.forceRerender()
+                }
           },
 
           // async updateData() {
@@ -186,6 +193,10 @@
               this.coordinates = item.Location.split(',');
               this.zoom = 20;
           },
+          zoomToCity(coordinates) {
+              this.coordinates = coordinates.split(',')
+              this.zoom = 15;
+          },
       },
       async mounted() {
               try {
@@ -197,10 +208,12 @@
                   await this.fetchStations();
 
                   setInterval(async () => {
+                    console.log("Fetching!")
                     await this.fetchStations();
                     await this.fetchScooters();
                     // Add more data fetching and map updating if needed
-                  }, 3000);
+                    console.log('Data updated:', this.charging, this.parking, this.scooters);
+                  }, 1000);
 
                   // await this.updateData()
               } catch (error) {

admin-interface/src/views/CityView.vue

@@ -3,7 +3,7 @@
         <div class="small-content">
             <h1>Cities</h1>
             <h2>Manage the cities in the system.</h2>
-
+            
             <div v-if="addForm">
                 <div @click="addForm = !addForm"><img alt="add icon" class="add" src="@/assets/circle-plus-solid.svg" width="30" height="30" />Add a city</div>
             </div>
@@ -30,15 +30,15 @@
                     <tr>
                         <td>
                             <button>
-                                <router-link
-                                :to="{
-                                    name: 'CitySingle',
-                                    params: {
-                                        id: item.CityID
-                                    }
-                                }">
-                                {{ item.CityID }}
-                                </router-link>
+                                <RouterLink
+                                    :to="{
+                                        name: 'CitySingle',
+                                        params: {
+                                            id: item.CityID
+                                        }
+                                    }">
+                                    {{ item.CityID }}
+                                </RouterLink>
                             </button>    
                         </td>
                         <td>{{ item.CityName }}</td>

admin-interface/src/views/HomeView.vue

@@ -31,10 +31,22 @@ import HomeItem from '../components/HomeItem.vue'
   <p>This is the administrative interface (admin panel) for <i>Svenska Elsparkscyklar AB</i>.</p>
   <p>Here you can view and manage data in the system.</p>
 
+  <div class="title-page-button">
+    <div> <RouterLink to="/map"><img src="@/assets/map-location-dot-solid.svg" class="home-images"></RouterLink></div>
+    <div><RouterLink to="/city"><img src="@/assets/city-solid.svg" class="home-images"></RouterLink></div>
+    <div><RouterLink to="/scooter"><img src="@/assets/scooter.svg" class="home-images"></RouterLink></div>
+    <div><RouterLink to="/charging"><img src="@/assets/charging-station-solid.svg" class="home-images"></RouterLink></div>
+    <div><RouterLink to="/parking"><img src="@/assets/square-parking-solid.svg" class="home-images"></RouterLink></div>
+    <div><RouterLink to="/rental"><img src="@/assets/cart-shopping-solid.svg" class="home-images"></RouterLink></div>
+    <div><RouterLink to="/user"><img src="@/assets/user-solid.svg" class="home-images"></RouterLink></div>
+    <div><RouterLink to="/settings"><img src="@/assets/gear-solid.svg" class="home-images"></RouterLink></div>
+  </div>
+
 </template>
 
 <script>
   // import { useAuth0 } from '@auth0/auth0-vue';
+  import { RouterLink } from 'vue-router'
 
   export default {
       setup() {

admin-interface/src/views/ScooterView.vue

@@ -72,6 +72,8 @@
                                 <input type="number" id="Speed" v-model="Speed" required>
                                 <label for="Battery">Battery:</label>
                                 <input type="number" id="Battery" v-model="Battery" required>
+                                <label for="StationID">StationID:</label>
+                                <input type="number" id="StationID" v-model="StationID" required>
                                 <button type="submit">Update Scooter</button>
                             </form>
                         </td>

admin-interface/src/views/UserView.vue

@@ -46,15 +46,15 @@
                 <tr>
                 <td>
                     <button>
-                        <router-link
+                        <RouterLink
                             :to="{
                                 name: 'UserSingle',
                                 params: {
                                     id: item.UserID
                                 }
                             }">
                             {{ item.UserID }}
-                        </router-link>
+                        </RouterLink>
                     </button>
                 </td>
                 <td>{{ item.FirstName }}</td>
@@ -105,7 +105,7 @@
 </template>
 
 <script>
-    // import { getCurrentInstance } from 'vue';
+    import { getCurrentInstance } from 'vue';
     import { RouterLink } from 'vue-router'
 
     export default {

server/users.json

@@ -8,10 +8,6 @@
       {
         "date": "2024-01-01",
         "count": 0
-      },
-      {
-        "date": "2024-01-09",
-        "count": 22
       }
     ]
   },

simulation/SimulatedClient.js

@@ -60,7 +60,9 @@ class SimulatedClient {
             const zero = 0;
             this.scooter.Speed = zero.toFixed(2);
 
-            this.scooter.Location = this.trip.Destination;
+            const waypointCoordsString = String(this.trip.Destination)
+            this.scooter.Location = waypointCoordsString.replace(/[\[\]']+/g,'');
+            // this.scooter.Location = this.trip.Destination;
 
             // Update scooter in database when trip has ended
             publicHelper.updateScooter(this.scooter);
@@ -73,10 +75,13 @@ class SimulatedClient {
         } else {
             this.scooter.Speed = (Math.random() * 30).toFixed(2);
 
-            this.scooter.Location = this.trip.Waypoints[this.tripIndex];
+            const waypointCoordsString = String(this.trip.Waypoints[this.tripIndex])
+            this.scooter.Location = waypointCoordsString.replace(/[\[\]']+/g,'');
+            // this.scooter.Location = this.trip.Waypoints[this.tripIndex];
 
             // Update scooter in database every x waypoints
             if (this.tripIndex % SimulatedClient.updateInterval === 0) {
+
                 publicHelper.updateScooter(this.scooter);
             }
 

simulation/simulator.js

@@ -14,6 +14,10 @@ const waypointInterval = 1;
 const updateInterval = 1;
 
 async function startSimulator() {
+
+    const maxClients = 5;
+    const clientInterval = 5; 
+
     SC.waypointInterval = waypointInterval;
     SC.updateInterval = updateInterval;
 

simulation/utils.js

@@ -1,8 +1,8 @@
 const sqlite3 = require('sqlite3').verbose();
 
 const fetchHelper = {
-    BASE_URL: "http://localhost:1337",
-    // BASE_URL: "http://vteam6_server:1337",
+    // BASE_URL: "http://localhost:1337",
+    BASE_URL: "http://vteam6_server:1337",
 
     async getData(endpoint) {
         const response = await fetch(`${this.BASE_URL}/v1/${endpoint}`,
@@ -149,9 +149,11 @@ const scooterHelper = {
 
     async updateScooter(scooter) {
         const data = {
+            "Status": scooter.Status,
             "Location": scooter.Location,
             "Speed": scooter.Speed,
-            "Battery": scooter.Battery
+            "Battery": scooter.Battery,
+            "StationID": scooter.StationID
         };
 
         const endpoint = `scooter/${scooter.ScooterID}`;