From 4fec6a9af7ec2eeda6ceb0ae1aa4e9a50164d6e4 Mon Sep 17 00:00:00 2001
From: Drako9159 <chochito9159@gmail.com>
Date: Fri, 6 May 2022 11:43:33 -0500
Subject: [PATCH 1/8] add new commander service

---
 package-lock.json                |  4 ++--
 src/services/CommanderService.js | 21 +++++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/services/CommanderService.js

diff --git a/package-lock.json b/package-lock.json
index eb94c2d..06697dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "vue-3-crud",
+  "name": "launch-x",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "vue-3-crud",
+      "name": "launch-x",
       "version": "0.1.0",
       "dependencies": {
         "axios": "^0.26.0",
diff --git a/src/services/CommanderService.js b/src/services/CommanderService.js
new file mode 100644
index 0000000..b076846
--- /dev/null
+++ b/src/services/CommanderService.js
@@ -0,0 +1,21 @@
+import http from "../http-common";
+
+class CommanderService {
+  getAll() {
+    return http.get("/missioncommander");
+  }
+  get(id) {
+    return http.get(`/missioncommander/${id}`);
+  }
+  create(data) {
+    return http.post("/missioncommander", data);
+  }
+  update(id, data) {
+    return http.put(`/missioncommander/${id}`, data);
+  }
+  delete(id) {
+    return http.delete(`/missioncommander/${id}`);
+  }
+}
+
+export default new CommanderService();

From 322b7c6cb342627f9f906e0f551df4c1f55ca691 Mon Sep 17 00:00:00 2001
From: Drako9159 <chochito9159@gmail.com>
Date: Fri, 6 May 2022 11:50:37 -0500
Subject: [PATCH 2/8] add style app.vue

---
 src/App.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 581a6ac..f4be124 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <nav class="navbar navbar-expand navbar-light bg-white">
-      <router-link to="/" class="navbar-brand">LaunchX</router-link>
+    <nav class="navbar navbar-expand bg-white banner0">
+      <router-link to="/" class="navbar-brand onTitle">LaunchX</router-link>
       <div class="navbar-nav mr-auto">
         <li class="nav-item">
           <router-link to="/explorers" class="nav-link">Explorers</router-link>
@@ -21,3 +21,12 @@ export default {
   name: "app"
 };
 </script>
+<style>
+.banner0{
+
+  background: linear-gradient(80deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 35%, rgb(0, 42, 90) 100%);
+}
+.onTitle{
+  color: white;
+}
+</style>

From bf7db1c2d85c553f2120c878a75b57837a1b2384 Mon Sep 17 00:00:00 2001
From: Drako9159 <chochito9159@gmail.com>
Date: Fri, 6 May 2022 12:00:19 -0500
Subject: [PATCH 3/8] add new component Commanders}

---
 src/App.vue                       | 4 +++-
 src/components/CommandersList.vue | 0
 src/router.js                     | 6 ++++++
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 src/components/CommandersList.vue

diff --git a/src/App.vue b/src/App.vue
index f4be124..8fe23f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,9 @@
         <li class="nav-item">
           <router-link to="/explorers" class="nav-link">Explorers</router-link>
         </li>
+        <li class="nav-item">
+          <router-link to="/commanders" class="nav-link">Commanders</router-link>
+        </li>
         <li class="nav-item">
           <router-link to="/add" class="nav-link">Agregar Explorer</router-link>
         </li>
@@ -23,7 +26,6 @@ export default {
 </script>
 <style>
 .banner0{
-
   background: linear-gradient(80deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 35%, rgb(0, 42, 90) 100%);
 }
 .onTitle{
diff --git a/src/components/CommandersList.vue b/src/components/CommandersList.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/router.js b/src/router.js
index 9bdd544..f921b64 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,5 +1,11 @@
 import { createWebHistory, createRouter } from "vue-router";
 const routes =  [
+  {
+    path: "/",
+    alias: "/commander",
+    name: "commander",
+    component: () => import("./components/CommandersList")
+  },
   {
     path: "/",
     alias: "/explorers",

From e244bf4330499520630f18cf718bba2219a6c3a2 Mon Sep 17 00:00:00 2001
From: Drako9159 <chochito9159@gmail.com>
Date: Fri, 6 May 2022 12:17:23 -0500
Subject: [PATCH 4/8] add component AddCommander

---
 src/components/AddCommander.vue   |  0
 src/components/CommandersList.vue | 70 +++++++++++++++++++++++++++++++
 src/components/ExplorersList.vue  |  1 -
 src/router.js                     |  6 +--
 4 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/components/AddCommander.vue

diff --git a/src/components/AddCommander.vue b/src/components/AddCommander.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/CommandersList.vue b/src/components/CommandersList.vue
index e69de29..2dd3752 100644
--- a/src/components/CommandersList.vue
+++ b/src/components/CommandersList.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="list row">
+    <div class="col-md-6">
+      <h4> Commanders Inscritos </h4>
+      <ul class="list-group">
+        <li class="list-group-item"
+          :class="{ active: index == currentIndex }"
+          v-for="(explorer, index) in explorers"
+          :key="index"
+          @click="setActiveExplorer(explorer, index)"
+        >
+          {{ explorer.username }}
+        </li>
+
+      </ul>
+    </div>
+    <div class="col-md-6">
+      <div v-if="currentExplorer">
+        <h4>Explorer</h4>
+        <div>
+          <br><label><strong>Nombre:</strong></label> {{ currentExplorer.name}}
+          <br><label><strong>Username:</strong></label> {{ currentExplorer.username}}
+          <br><label><strong>Mission:</strong></label> {{ currentExplorer.mission}}
+        </div>
+        <router-link :to="'/explorer/' + currentExplorer.id" class="btn btn-info"> Editar</router-link>
+      </div>
+      <div v-else>
+        <br />
+        <p> Selecciona un Commander.</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+/*
+import CommanderService from "../services/CommanderService";
+
+export default {
+  name: "commanders-list",
+  data() {
+    return {
+      tutorials: [],
+      explorers: [],
+      currentTutorial: null,
+      currentExplorer: null,
+      currentIndex: -1,
+      title: "",
+      explorerId: ""
+    };
+  },
+  methods: {
+    getAllExplorers(){
+      CommanderService.getAll()
+        .then(response => {
+          this.explorers = response.data;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    setActiveExplorer(explorer, index) {
+      this.currentExplorer= explorer;
+      this.currentIndex = explorer? index : -1;
+    }
+  },
+  mounted() {
+    this.getAllExplorers();
+  }
+};*/
+</script>
\ No newline at end of file
diff --git a/src/components/ExplorersList.vue b/src/components/ExplorersList.vue
index 33b48ea..1f0937e 100644
--- a/src/components/ExplorersList.vue
+++ b/src/components/ExplorersList.vue
@@ -11,7 +11,6 @@
         >
           {{ explorer.username }}
         </li>
-
       </ul>
     </div>
     <div class="col-md-6">
diff --git a/src/router.js b/src/router.js
index f921b64..868eb73 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,9 +1,9 @@
 import { createWebHistory, createRouter } from "vue-router";
 const routes =  [
   {
-    path: "/",
-    alias: "/commander",
-    name: "commander",
+    path: "/commanders",
+    alias: "/commanders",
+    name: "commanders",
     component: () => import("./components/CommandersList")
   },
   {

From e4515848a2124a6e624b3fcf14d8d26264c44de9 Mon Sep 17 00:00:00 2001
From: Drako9159 <chochito9159@gmail.com>
Date: Fri, 6 May 2022 16:39:51 -0500
Subject: [PATCH 5/8] mount request add commander

---
 src/App.vue                      |   5 +-
 src/components/AddCommander.vue  | 127 +++++++++++++++++++++++++++++++
 src/components/ExplorersList.vue |   1 +
 src/router.js                    |   7 +-
 src/services/CommanderService.js |  10 +--
 5 files changed, 143 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8fe23f0..d130535 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,10 @@
           <router-link to="/commanders" class="nav-link">Commanders</router-link>
         </li>
         <li class="nav-item">
-          <router-link to="/add" class="nav-link">Agregar Explorer</router-link>
+          <router-link to="/addExplorer" class="nav-link">Agregar Explorer</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/addCommander" class="nav-link">Agregar Commander</router-link>
         </li>
       </div>
     </nav>
diff --git a/src/components/AddCommander.vue b/src/components/AddCommander.vue
index e69de29..8f717c3 100644
--- a/src/components/AddCommander.vue
+++ b/src/components/AddCommander.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="submit-form">
+    <div v-if="!submitted">
+    <h3>Nuevo Commander</h3>
+      <div class="form-group">
+        <label for="title">Nombre</label>
+        <input
+          type="text"
+          class="form-control"
+          id="title"
+          required
+          v-model="commanders.name"
+          name="title"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Username</label>
+        <input
+          type="text"
+          class="form-control"
+          id="username"
+          required
+          v-model="commanders.username"
+          name="username"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Main Stack</label>
+        <input
+          type="text"
+          class="form-control"
+          id="mainStack"
+          required
+          v-model="commanders.mainStack"
+          name="mainStack"
+        />
+      </div>
+      <div class="form-group checkAny">
+          <div>
+              <label for="title">Current Enrollment</label>
+                <input
+                  type="checkbox"
+                  class="check0"
+                  id="currentEnrollment"
+                  required
+                  v-model="commanders.currentEnrollment"
+                  name="currentEnrollment"
+                />
+          </div>
+          <div>
+              <label for="title">Azure Certification</label>
+                <input
+                  type="checkbox"
+                  class="check0"
+                  id="hasAzureCertification"
+                  required
+                  v-model="commanders.hasAzureCertification"
+                  name="hazAzureCertification"
+                />
+          </div>
+      </div>
+      <div class="form-group">
+        
+      </div>
+      <button @click="saveCommander" class="btn btn-success">Agregar</button>
+    </div>
+    <div v-else>
+      <h4> Commander creado exitosamente. </h4>
+      <button class="btn btn-success" @click="newCommander">Add</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import CommanderService from "../services/CommanderService";
+export default {
+  name: "add-commander",
+  data() {
+    return {
+      commanders: {
+        id: null,
+        name: "",
+        username: "",
+        mainStack: "",
+        currentEnrollment: false,
+        hasAzureCertification: false
+      },
+      submitted: false
+    };
+  },
+  methods: {
+    saveCommander() {
+      var data = {
+        name: this.commanders.name,
+        username: this.commanders.username,
+        mainStack: this.commanders.mainStack,
+        currentEnrollment: this.commanders.currentEnrollment,
+        hasAzureCertification: this.commanders.hasAzureCertification
+      };
+      CommanderService.create(data)
+        .then(response => {
+          this.commanders.id = response.data.id;
+          this.submitted = true;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    newCommander() {
+      this.submitted = false;
+      this.commanders = {};
+    }
+  }
+};
+</script>
+<style>
+.check0{
+    width: 60px;
+    height: 20px;
+}
+.checkAny{
+    display: flex;
+    justify-content: space-between;
+    margin-left: 10px;
+    width: 40%;
+}
+</style>
diff --git a/src/components/ExplorersList.vue b/src/components/ExplorersList.vue
index 1f0937e..33b48ea 100644
--- a/src/components/ExplorersList.vue
+++ b/src/components/ExplorersList.vue
@@ -11,6 +11,7 @@
         >
           {{ explorer.username }}
         </li>
+
       </ul>
     </div>
     <div class="col-md-6">
diff --git a/src/router.js b/src/router.js
index 868eb73..6fb2f1d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -18,9 +18,14 @@ const routes =  [
     component: () => import("./components/Explorer")
   },
   {
-    path: "/add",
+    path: "/addExplorer",
     name: "add-explorer",
     component: () => import("./components/AddExplorer")
+  },
+  {
+    path: "/addCommander",
+    name: "add-commander",
+    component: () => import("./components/AddCommander")
   }
 ];
 const router = createRouter({
diff --git a/src/services/CommanderService.js b/src/services/CommanderService.js
index b076846..f5877fb 100644
--- a/src/services/CommanderService.js
+++ b/src/services/CommanderService.js
@@ -2,19 +2,19 @@ import http from "../http-common";
 
 class CommanderService {
   getAll() {
-    return http.get("/missioncommander");
+    return http.get("/commanders");
   }
   get(id) {
-    return http.get(`/missioncommander/${id}`);
+    return http.get(`/commanders/${id}`);
   }
   create(data) {
-    return http.post("/missioncommander", data);
+    return http.post("/commanders", data);
   }
   update(id, data) {
-    return http.put(`/missioncommander/${id}`, data);
+    return http.put(`/commanders/${id}`, data);
   }
   delete(id) {
-    return http.delete(`/missioncommander/${id}`);
+    return http.delete(`/commanders/${id}`);
   }
 }
 

From 43f1499c38ed70a70ae664fd1685a7e33b40c5e5 Mon Sep 17 00:00:00 2001
From: Drako9159 <chochito9159@gmail.com>
Date: Fri, 6 May 2022 18:15:14 -0500
Subject: [PATCH 6/8] update component currentcommander

---
 src/App.vue                       |  4 +--
 src/components/CommandersList.vue | 52 +++++++++++++++++--------------
 src/components/ExplorersList.vue  |  2 +-
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d130535..f7a17a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,10 +10,10 @@
           <router-link to="/commanders" class="nav-link">Commanders</router-link>
         </li>
         <li class="nav-item">
-          <router-link to="/addExplorer" class="nav-link">Agregar Explorer</router-link>
+          <router-link to="/addExplorer" class="nav-link">New Explorer</router-link>
         </li>
         <li class="nav-item">
-          <router-link to="/addCommander" class="nav-link">Agregar Commander</router-link>
+          <router-link to="/addCommander" class="nav-link">New Commander</router-link>
         </li>
       </div>
     </nav>
diff --git a/src/components/CommandersList.vue b/src/components/CommandersList.vue
index 2dd3752..356be1a 100644
--- a/src/components/CommandersList.vue
+++ b/src/components/CommandersList.vue
@@ -1,70 +1,74 @@
 <template>
   <div class="list row">
     <div class="col-md-6">
-      <h4> Commanders Inscritos </h4>
+      <h4> Commander Inscritos </h4>
       <ul class="list-group">
         <li class="list-group-item"
           :class="{ active: index == currentIndex }"
-          v-for="(explorer, index) in explorers"
+          v-for="(commander, index) in commanders"
           :key="index"
-          @click="setActiveExplorer(explorer, index)"
+          @click="setActiveCommander(commander, index)"
         >
-          {{ explorer.username }}
+          {{ commander.username }}
         </li>
 
       </ul>
     </div>
     <div class="col-md-6">
-      <div v-if="currentExplorer">
-        <h4>Explorer</h4>
+      <div v-if="currentCommander">
+        <h4>Commander</h4>
         <div>
-          <br><label><strong>Nombre:</strong></label> {{ currentExplorer.name}}
-          <br><label><strong>Username:</strong></label> {{ currentExplorer.username}}
-          <br><label><strong>Mission:</strong></label> {{ currentExplorer.mission}}
+          <br><label><strong>Nombre:</strong></label> {{ currentCommander.name}}
+          <br><label><strong>Username:</strong></label> {{ currentCommander.username}}
+          <br><label><strong>Main Stack:</strong></label> {{ currentCommander.mainStack}}
+          <br><label><strong>Current Enrollment:</strong></label > {{ currentCommander.currentEnrollment}}
+          <br><label><strong>Azure Certification:</strong></label> {{ currentCommander.hasAzureCertification}}
         </div>
-        <router-link :to="'/explorer/' + currentExplorer.id" class="btn btn-info"> Editar</router-link>
+        <router-link :to="'/commander/' + currentCommander.id" class="btn btn-info"> Editar</router-link>
       </div>
       <div v-else>
         <br />
-        <p> Selecciona un Commander.</p>
+        <p> Selecciona un commander</p>
       </div>
     </div>
   </div>
 </template>
 <script>
-/*
+
 import CommanderService from "../services/CommanderService";
 
 export default {
-  name: "commanders-list",
+  name: "explorer-list",
   data() {
     return {
       tutorials: [],
-      explorers: [],
+      commanders: [],
       currentTutorial: null,
-      currentExplorer: null,
+      currentCommander: null,
       currentIndex: -1,
       title: "",
-      explorerId: ""
+      commanderId: ""
     };
   },
   methods: {
-    getAllExplorers(){
+    getAllCommanders(){
       CommanderService.getAll()
         .then(response => {
-          this.explorers = response.data;
+          this.commanders = response.data;
         })
         .catch(e => {
           console.log(e);
         });
     },
-    setActiveExplorer(explorer, index) {
-      this.currentExplorer= explorer;
-      this.currentIndex = explorer? index : -1;
-    }
+    setActiveCommander(commander, index) {
+      this.currentCommander= commander;
+      this.currentIndex = commander? index : -1;
+      
+    },
+    
   },
   mounted() {
-    this.getAllExplorers();
+    this.getAllCommanders();
   }
-};*/
+};
 </script>
\ No newline at end of file
diff --git a/src/components/ExplorersList.vue b/src/components/ExplorersList.vue
index 33b48ea..ab01b36 100644
--- a/src/components/ExplorersList.vue
+++ b/src/components/ExplorersList.vue
@@ -26,7 +26,7 @@
       </div>
       <div v-else>
         <br />
-        <p> Selecciona un explorer.</p>
+        <p> Selecciona un explorer</p>
       </div>
     </div>
   </div>

From d239eac662e169f9b4e78770f0267ad71cfec476 Mon Sep 17 00:00:00 2001
From: Drako9159 <chochito9159@gmail.com>
Date: Fri, 6 May 2022 18:16:04 -0500
Subject: [PATCH 7/8] add new component Commander

---
 src/components/Commander.vue | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/Commander.vue

diff --git a/src/components/Commander.vue b/src/components/Commander.vue
new file mode 100644
index 0000000..e69de29

From 25dd092352faaf262fa570be608c532abbdd0bae Mon Sep 17 00:00:00 2001
From: Drako9159 <chochito9159@gmail.com>
Date: Fri, 6 May 2022 20:21:21 -0500
Subject: [PATCH 8/8] add update component commanders

---
 src/components/Commander.vue      | 111 ++++++++++++++++++++++++++++++
 src/components/CommandersList.vue |   2 +-
 src/components/ExplorersList.vue  |   2 +-
 src/router.js                     |   5 ++
 4 files changed, 118 insertions(+), 2 deletions(-)

diff --git a/src/components/Commander.vue b/src/components/Commander.vue
index e69de29..d7668b0 100644
--- a/src/components/Commander.vue
+++ b/src/components/Commander.vue
@@ -0,0 +1,111 @@
+<template>
+<h4>Commander</h4>
+  <div v-if="currentCommander" class="edit-form">
+    <form>
+      <div class="form-group">
+        <label for="title">Nombre</label>
+        <input type="text" disabled class="form-control" id="title"
+          v-model="currentCommander.name"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Username</label>
+        <input type="text" disabled class="form-control" id="title"
+          v-model="currentCommander.username"
+        />
+      </div>
+      <div class="form-group">
+        <label for="title">Main Stack</label>
+        <input type="text" class="form-control" id="title"
+          v-model="currentCommander.mainStack"
+        />
+      </div>
+      <div class="form-group onerIn">
+        <label for="title">Current Enrollment</label>
+        <input type="checkbox" disabled class="form-control checkIn" id="title"
+          v-model="currentCommander.currentEnrollment"
+        />
+      </div>
+      <div class="form-group onerIn">
+        <label for="title">Azure Certification</label>
+        <input type="checkbox" disabled class="form-control checkIn" id="title"
+          v-model="currentCommander.hasAzureCertification"
+        />
+      </div>
+    </form>
+    <button class="btn btn-danger mr-2" @click="deleteCommander">
+      Eliminar Commander
+    </button>
+    <button type="submit" class="btn btn-info mr-2" @click="updateCommander">
+      Actualizar
+    </button>
+    <p>{{ message }}</p>
+  </div>
+  <div v-else>
+    <br />
+    <p> Selecciona un explorer. </p>
+  </div>
+</template>
+<script>
+import CommanderService from "../services/CommanderService";
+export default {
+  name: "commander",
+  data() {
+    return {
+      currentCommander: null,
+      message: ''
+    };
+  },
+  methods: {
+    getCommander(id) {
+      CommanderService.get(id)
+        .then(response => {
+          this.currentCommander = response.data;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    deleteCommander() {
+      CommanderService.delete(this.currentCommander.id)
+      .then(response => {
+        console.log(response.data);
+        this.$router.push({ name: "commanders" });
+      })
+      .catch(e => {
+          console.log(e);
+      });
+    },
+    updateCommander() {
+      CommanderService.update(this.currentCommander.id, this.currentCommander)
+        .then(response => {
+          console.log(response.data);
+          this.message = 'Se actualizó correctamente';
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    }
+  },
+  mounted() {
+    this.message = '';
+    this.getCommander(this.$route.params.id);
+  }
+};
+</script>
+
+<style>
+.edit-form {
+  max-width: 300px;
+  margin: auto;
+}
+.checkIn{
+  background-color: aqua;
+  width: 20px;
+  height: 20px;
+}
+.onerIn{
+  display: flex;
+  justify-content: space-around;
+}
+</style>
diff --git a/src/components/CommandersList.vue b/src/components/CommandersList.vue
index 356be1a..d76383d 100644
--- a/src/components/CommandersList.vue
+++ b/src/components/CommandersList.vue
@@ -61,7 +61,7 @@ export default {
         });
     },
     setActiveCommander(commander, index) {
-      this.currentCommander= commander;
+      this.currentCommander = commander;
       this.currentIndex = commander? index : -1;
       
     },
diff --git a/src/components/ExplorersList.vue b/src/components/ExplorersList.vue
index ab01b36..f9bb893 100644
--- a/src/components/ExplorersList.vue
+++ b/src/components/ExplorersList.vue
@@ -59,7 +59,7 @@ export default {
         });
     },
     setActiveExplorer(explorer, index) {
-      this.currentExplorer= explorer;
+      this.currentExplorer = explorer;
       this.currentIndex = explorer? index : -1;
     }
   },
diff --git a/src/router.js b/src/router.js
index 6fb2f1d..951b338 100644
--- a/src/router.js
+++ b/src/router.js
@@ -17,6 +17,11 @@ const routes =  [
     name: "explorer-details",
     component: () => import("./components/Explorer")
   },
+  {
+    path: "/commander/:id",
+    name: "commander-details",
+    component: () => import("./components/Commander")
+  },
   {
     path: "/addExplorer",
     name: "add-explorer",