Development

package.json

@@ -40,6 +40,7 @@
     "vis-util": "^4.0.0",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.5",
+    "vue-carousel": "^0.18.0",
     "vue-chartjs": "^3.4.0",
     "vue-cli": "^2.9.6",
     "vue-codemirror": "^4.0.6",

src/pages/Starter/SampleLayout.vue

@@ -149,29 +149,30 @@
           }"
           ><sidebar-item
             :link="{
-              name: $t('Nearest Neighbour'),
-              path: '/nearest-neighbor'
+              name: $t('Traveling Salesman Problem'),
+              path: '/TSP'
             }"
           ></sidebar-item>
           <sidebar-item
             :link="{
-              name: $t('Clark and Wright'),
-              path: '/clark-and-wright'
-            }"
-          ></sidebar-item>
-          <sidebar-item
-            :link="{
-              name: $t('Opt3Move'),
-              path: '/opt-3-move'
+              name: $t('Vehicle Routing Problem'),
+              path: '/VRP'
             }"
           ></sidebar-item>
+        </sidebar-item>
+        <sidebar-item
+          :link="{
+            name: $t('Clustering'),
+            icon: 'tim-icons icon-controller'
+          }"
+          >
           <sidebar-item
             :link="{
-              name: $t('Sweep'),
-              path: '/sweep'
+              name: $t('K-Means'),
+              path: '/K-Means'
             }"
           ></sidebar-item>
-        </sidebar-item>
+          </sidebar-item>
       </template>
     </side-bar>
     <div class="main-panel" :data="sidebarBackground">

src/repositories/Modules/Routing/Routing.js

@@ -14,6 +14,10 @@ class Routing{
     solveClarkAndWright(NodesDTO){
         return axios.post(`${this.basePath}/routingModule/solveClarkAndWright`,NodesDTO);
     }
+
+    solveSweep(NodesDTO){
+        return axios.post(`${this.basePath}/routingModule/solveSweep`,NodesDTO);
+    }
 }
 
 export default new Routing();

src/routes/starterRouter.js

@@ -28,6 +28,11 @@ import NearestNeighbour from 'src/views/Modules/Routing/NearestNeighbor';
 import ClarkeAndWright from 'src/views/Modules/Routing/ClarkeAndWright';
 import Opt3Move from 'src/views/Modules/Routing/Opt3Move';
 import Sweep from 'src/views/Modules/Routing/Sweep';
+import TSP from 'src/views/Modules/Routing/TSPMainPage';
+
+import VRP from 'src/views/Modules/Routing/VRPMainPage';
+
+import KMeans from 'src/views/Modules/Clustering/KMeans';
 
 Vue.use(Router);
 
@@ -151,6 +156,21 @@ export default new Router({
           name: 'sp',
           components: { default: Sweep }
         },
+        {
+          path: 'K-Means',
+          name: 'km',
+          components: {default: KMeans}
+        },
+        {
+          path: 'TSP',
+          name: 'tsp',
+          components: {default: TSP}
+        },
+        {
+          path: 'VRP',
+          name: 'vrp',
+          components: { default: VRP}
+        }
       ]
     }
   ],

src/views/Modules/Clustering/KMeans.vue

@@ -0,0 +1,39 @@
+<template>
+  <div id="km">
+    <h1>Hello World!</h1>
+    <h2> {{ nombre }} </h2>
+
+    <input  type="button" v-on:click="increment" value="Increment">
+    <input v-model="nombre" type="text">
+    <div v-show="cshow" :key="i" v-for="(num, i) in list">ID: {{i}}, Num: {{ num }} </div>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+    name: "km",
+    data(){
+        return{
+            nombre: "Esteban",
+            list: [1, 2 , 3],
+            currentNumber: 4,
+            cshow: false
+        }
+
+    },
+    methods: {
+        increment(){
+            this.cshow = true;
+            this.list.push(this.currentNumber);
+            this.currentNumber = this.currentNumber + 1;
+        }
+    }
+}
+
+</script>
+
+<style>
+
+</style>

src/views/Modules/Routing/ClarkeAndWright.vue

@@ -1,10 +1,24 @@
 <template>
   <div>
     <h1>CLARK AND WRIGHT ALGORITHM</h1>
+
+    <div>
+      <button class="btn btn-primary float-start" v-on:click = "changeTuto"> {{tutorial.msg}}</button>
+    </div>
+    <div v-if="tutorial.value" class="card my-3 mx-auto p-5 text-center">
+
+     <b> <h3> How it works?</h3> </b>
+      <carousel :navigationEnabled="true" :perPage="1">
+        <slide :key="'tutorialGif'+ i" v-for="(tutorialGif,i) in tutorial.imgs">
+          <img  v-bind:src="tutorialGif" alt="Something wrong" class="w-75 m-auto">
+        </slide>
+      </carousel>
+
+    </div>
     <card>
         <nodes-table :nodes="nodes" @solve="solve"> </nodes-table>
     </card>
-    
+
     <card v-show="solveStatus">
       <routing-solution :route="route" :routeCost="routeCost"></routing-solution>
     </card>
@@ -15,14 +29,25 @@
 import RRepository from './../../../repositories/Modules/Routing/Routing';
 import NodesTable from './NodesTable.vue';
 import RoutingSolution from './RoutingSolution.vue';
+import {Carousel, Slide} from 'vue-carousel';
 
 export default {
-  
+
   name: "ck",
-  
+
   data() {
     return {
-      nodes: [  
+      tutorial:{
+        value : false,
+        msg : "What is Clarke And Wright?",
+        imgs: [
+          "/img/Routing/clark/Step1.gif",
+          "/img/Routing/clark/Step2.gif",
+          "/img/Routing/clark/Step3.gif"
+
+        ],
+      },
+      nodes: [
         {
           id: 0,
           x: 1,
@@ -44,7 +69,7 @@ export default {
       this.solveStatus = true;
 
       var no = {nodes: nodes};
-      
+
       RRepository.solveClarkAndWright(no).then((response) => {
           if(response.status < 400){
             let r = response.data
@@ -54,15 +79,22 @@ export default {
         }
       );
 
+    },
+    changeTuto(){
+      this.tutorial.value = !this.tutorial.value;
+      if (this.tutorial.value) this.tutorial.msg = "Hide";
+      else this.tutorial.msg = "What is Nearest Neighbour?";
     }
   },
   components: {
     'nodes-table': NodesTable,
-    'routing-solution': RoutingSolution
+    'routing-solution': RoutingSolution,
+    'carousel':Carousel,
+    'slide':Slide,
   }
 }
 </script>
 
 <style>
 
-</style>
+</style>

src/views/Modules/Routing/LoadFileComponent.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/Modules/Routing/NearestNeighbor.vue

@@ -1,46 +1,81 @@
 <template>
   <div id="nn">
-
-    <h1>NEAREST NEIGHBOR ALGORITHM</h1>
+
+    <h1 class="m-auto text-center">NEAREST NEIGHBOR ALGORITHM</h1>
+
+
+
+
+    <div>
+      <button class="btn btn-primary float-start" v-on:click = "changeTuto"> {{tutorial.msg}}</button>
+    </div>
+    <div v-if="tutorial.value" class="card my-3 mx-auto p-5 text-center">
+
+     <b> <h3> How it works?</h3> </b>
+      <carousel :navigationEnabled="true" :perPage="1">
+        <slide :key="'tutorialGif'+ i" v-for="(tutorialGif,i) in tutorial.imgs">
+          <img  v-bind:src="tutorialGif" alt="Something wrong" class="w-75 m-auto">
+        </slide>
+      </carousel>
+
+    </div>
+
     <card>
         <nodes-table :nodes="nodes" @solve="solve"> </nodes-table>
     </card>
-    
+
     <card v-show="solveStatus">
       <routing-solution :route="route" :routeCost="routeCost"></routing-solution>
     </card>
-    
+
   <!-- <pre>
       {{$data}}
   </pre> -->
 
   </div>
 </template>
- 
+
 <script>
 
 import RRepository from './../../../repositories/Modules/Routing/Routing';
 import NodesTable from './NodesTable.vue';
 import RoutingSolution from './RoutingSolution.vue';
+import {Carousel, Slide} from 'vue-carousel';
 
 export default {
-  
+
   name: "nn",
-
   data() {
     return {
-      nodes: [  
+      tutorial:{
+        value : false,
+        msg : "What is Nearest Neighbour?",
+        imgs: [
+          "/img/Routing/tsp/Step1.gif",
+          "/img/Routing/tsp/Step2.gif",
+          "/img/Routing/tsp/Step3.gif"
+
+        ]
+      },
+      nodes: [
         {
           id: 0,
           x: 1,
           y: 2,
+
         },
         {
           id: 1,
           x: 3,
           y: 4,
         }
       ],
+      vehicles: [
+        {
+          id:1,
+          c: 10
+        }
+      ],
       route: '',
       routeCost: '',
       solveStatus: false,
@@ -51,7 +86,7 @@ export default {
       this.solveStatus = true;
 
       var no = {nodes: nodes};
-      
+
       RRepository.solveNearestNeighbours(no).then((response) => {
           if(response.status < 400){
             let r = response.data
@@ -61,14 +96,21 @@ export default {
         }
       );
 
+    },
+    changeTuto(){
+      this.tutorial.value = !this.tutorial.value;
+      if (this.tutorial.value) this.tutorial.msg = "Hide";
+      else this.tutorial.msg = "What is Nearest Neighbour?";
     }
   },
   components: {
     'nodes-table': NodesTable,
-    'routing-solution': RoutingSolution
+    'routing-solution': RoutingSolution,
+    'carousel':Carousel,
+    'slide':Slide,
   }
 }
 </script>
 
 <style>
-</style>
+</style>