Fixes (#8)

* fix: replace car.png

* fix: base url

* capacity input component

* feature: send capacity

* feature: update host - set domain

* fix: minor fixes

* fix: decode route in store

.env.production

@@ -1,3 +1,3 @@
-VITE_APP_HOST="176.123.168.71"
+VITE_APP_HOST="nogorka42.ru"
 VITE_APP_PORT=3000
 

src/components/capacity-input.vue

@@ -0,0 +1,26 @@
+<script setup>
+
+import { ref } from 'vue'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+const form = ref({ capacity: store.state.capacity })
+
+const onChange = (event) => {
+  store.dispatch('updateCapacity', Number(event.target.value))
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 ">
+    <label class="flex items-center gap-4">
+      <span class="block font-medium text-gray-700">Capacity input</span>
+      <input
+        v-model.number="form.capacity"
+        @change="onChange"
+        class="flex-1 px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+    </label>
+  </div>
+</template>

src/http/helper.js

@@ -1,5 +1,8 @@
-const get_base_url = () =>
-  `https://${import.meta.env.VITE_APP_HOST}:${import.meta.env.VITE_APP_PORT}/`
+const get_base_url = () => {
+  if (import.meta.env.VITE_APP_HOST === 'localhost')
+    return `http://${import.meta.env.VITE_APP_HOST}:${import.meta.env.VITE_APP_PORT}/`
+  return `https://${import.meta.env.VITE_APP_HOST}:${import.meta.env.VITE_APP_PORT}/`
+}
 
 
 const post = async (endpoint, body) => {

src/store/index.js

@@ -9,6 +9,7 @@ const store = createStore({
         long: 0
       },
       inputPoints: [],
+      capacity: 1000,
       optimalRoute: {
         route: [],
         id: null
@@ -28,6 +29,9 @@ const store = createStore({
     setInputPoints(state, points) {
       state.inputPoints = [...points]
     },
+    setInputCapacity(state, value) {
+      state.capacity = value
+    },
     setOptimalRoute(state, route) {
       state.optimalRoute.route = [...route]
     },
@@ -65,22 +69,27 @@ const store = createStore({
     updateInputPoints({ commit }, points) {
       commit('setInputPoints', points)
     },
+    updateCapacity({ commit }, value) {
+      commit('setInputCapacity', value)
+    },
 
 
     async getOptimalRoute({ dispatch }, { id }) {
       const response = await api.getOptimalRoute(id)
       dispatch('updateRouteData', response)
     },
     async optimizeRoute({ state, dispatch }) {
-      if (state.inputPoints.length > 0) {
-        const response = await api.optimizeRoute(state.inputPoints)
+      if (state.inputPoints.length > 0 && state.capacity) {
+        const body = { points: state.inputPoints, capacity: state.capacity }
+        const response = await api.optimizeRoute(body)
         dispatch('updateRouteData', response)
         return response.data?._id || null
       }
     },
     updateRouteData({ commit, dispatch }, payload) {
       if (payload.success) {
         const { _id, route, date } = payload.data
+
         const decodedRoute = JSON.parse(route)
         // const decodedRoute = route.map(r =>
         //   r.map(point => JSON.parse(point))

src/utils/map.js

@@ -15,7 +15,7 @@ export const config = {
   defaultLatLong: [59.9342802, 30.3350986],
   key: import.meta.env.VITE_GRAPH_HOPPER_KEY,
   car: {
-    iconUrl: 'car.png',
+    iconUrl: '/img/car.png',
     iconSize: [30, 30],
     iconAnchor: [30, 30]
   }

src/views/FileImport.vue

@@ -2,6 +2,7 @@
 import GoBack from '@/components/go-back.vue'
 import { processCsv, processJson } from '@/utils/process-file-formats.js'
 import OptimizeRouteButton from '@/components/optimize-route-button.vue'
+import CapacityInput from '@/components/capacity-input.vue'
 
 const onChange = (e) => {
   const file = e.target.files[0]
@@ -31,22 +32,29 @@ const onChange = (e) => {
 <template>
   <div class="container mx-auto p-4">
     <go-back />
-    <div class="max-w-lg mx-auto">
-      <h1 class="text-center text-2xl font-bold my-4">File Import</h1>
-      <input
-        class="block w-full text-center p-2 mx-auto my-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:border-blue-500 focus:border-blue-500"
-        type="file"
-        accept=".json, .csv"
-        @change="onChange"
-      />
-      <span>Example:</span>
-      <a href="/example.json" download="ex" class="text-blue-600 visited:text-purple-600">
-        example.json
-      </a>
-      <span>, </span>
-      <a href="/example.csv" download="ex" class="text-blue-600 visited:text-purple-600">
-        example.csv
-      </a>
+    <div class="max-w-lg mx-auto gap-6">
+      <div>
+        <h1 class="text-center text-2xl font-bold my-4">File Import</h1>
+        <input
+          class="block w-full text-center p-2 mx-auto my-4 border-2 border-gray-300 rounded-lg cursor-pointer hover:border-blue-500 focus:border-blue-500"
+          type="file"
+          accept=".json, .csv"
+          @change="onChange"
+        />
+        <span class="font-medium text-gray-700">Example:</span>
+        <a href="/example.json" download="ex" class="text-blue-600 visited:text-purple-600">
+          example.json
+        </a>
+        <span>, </span>
+        <a href="/example.csv" download="ex" class="text-blue-600 visited:text-purple-600">
+          example.csv
+        </a>
+      </div>
+
+      <div>
+        <h1 class="text-center text-2xl font-bold my-4">Input vehicles capacity</h1>
+        <capacity-input />
+      </div>
 
       <optimize-route-button />
     </div>