Se agregan peticiones a una base de datos a través del nuevo servicio "CommanderService"

src/App.vue

@@ -1,13 +1,19 @@
 <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>
         </li>
         <li class="nav-item">
-          <router-link to="/add" class="nav-link">Agregar Explorer</router-link>
+          <router-link to="/commanders" class="nav-link">Commanders</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/addExplorer" class="nav-link">New Explorer</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/addCommander" class="nav-link">New Commander</router-link>
         </li>
       </div>
     </nav>
@@ -21,3 +27,11 @@ 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>

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>

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>

src/components/CommandersList.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="list row">
+    <div class="col-md-6">
+      <h4> Commander Inscritos </h4>
+      <ul class="list-group">
+        <li class="list-group-item"
+          :class="{ active: index == currentIndex }"
+          v-for="(commander, index) in commanders"
+          :key="index"
+          @click="setActiveCommander(commander, index)"
+        >
+          {{ commander.username }}
+        </li>
+
+      </ul>
+    </div>
+    <div class="col-md-6">
+      <div v-if="currentCommander">
+        <h4>Commander</h4>
+        <div>
+          <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="'/commander/' + currentCommander.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: "explorer-list",
+  data() {
+    return {
+      tutorials: [],
+      commanders: [],
+      currentTutorial: null,
+      currentCommander: null,
+      currentIndex: -1,
+      title: "",
+      commanderId: ""
+    };
+  },
+  methods: {
+    getAllCommanders(){
+      CommanderService.getAll()
+        .then(response => {
+          this.commanders = response.data;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    setActiveCommander(commander, index) {
+      this.currentCommander = commander;
+      this.currentIndex = commander? index : -1;
+
+    },
+
+  },
+  mounted() {
+    this.getAllCommanders();
+  }
+};
+</script>

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>
@@ -59,7 +59,7 @@ export default {
         });
     },
     setActiveExplorer(explorer, index) {
-      this.currentExplorer= explorer;
+      this.currentExplorer = explorer;
       this.currentIndex = explorer? index : -1;
     }
   },