├── vue.config.js
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   ├── logo.png
    │   └── LogoApp.png
    ├── http-common.js
    ├── main.js
    ├── services
    │   ├── BoatService.js
    │   ├── CaptainService.js
    │   └── CompanyService.js
    ├── App.vue
    ├── router.js
    └── components
    │   ├── AddCompany.vue
    │   ├── CompaniesList.vue
    │   ├── CaptainsList.vue
    │   ├── CompanyDetails.vue
    │   ├── AddCaptain.vue
    │   ├── CaptainDetails.vue
    │   ├── BoatsList.vue
    │   ├── AddBoat.vue
    │   └── BoatDetails.vue
├── .gitignore
├── package.json
├── .github
    └── workflows
    │   └── azure-static-web-apps-black-smoke-018887f10.yml
└── README.md


/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   devServer: {
3 |     port: 8081,
4 |   },
5 | };
6 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RodolfoBaume/artisanal-fishing-client/main/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RodolfoBaume/artisanal-fishing-client/main/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/LogoApp.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RodolfoBaume/artisanal-fishing-client/main/src/assets/LogoApp.png


--------------------------------------------------------------------------------
/src/http-common.js:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | export default axios.create({
3 |   baseURL: "https://artisanal-fishing-api.herokuapp.com/",
4 |   headers: {
5 |     "Content-type": "application/json",
6 |   },
7 | });
8 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | import "bootstrap";
4 | import "bootstrap/dist/css/bootstrap.min.css";
5 | import router from "./router";
6 | createApp(App).use(router).mount("#app");
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | /build
 5 | 
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | pnpm-debug.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/src/services/BoatService.js:
--------------------------------------------------------------------------------
 1 | import http from "../http-common";
 2 | 
 3 | class BoatService {
 4 |   getAll() {
 5 |     return http.get("/api/v1/boats");
 6 |   }
 7 |   get(id) {
 8 |     return http.get(`/api/v1/boats/${id}`);
 9 |   }
10 |   create(data) {
11 |     return http.post("/api/v1/boats", data);
12 |   }
13 |   update(id, data) {
14 |     return http.put(`/api/v1/boats/${id}`, data);
15 |   }
16 |   delete(id) {
17 |     return http.delete(`/api/v1/boats/${id}`);
18 |   }
19 | }
20 | 
21 | export default new BoatService();
22 | 


--------------------------------------------------------------------------------
/src/services/CaptainService.js:
--------------------------------------------------------------------------------
 1 | import http from "../http-common";
 2 | 
 3 | class CaptainService {
 4 |   getAll() {
 5 |     return http.get("/api/v1/captains");
 6 |   }
 7 |   get(id) {
 8 |     return http.get(`/api/v1/captains/${id}`);
 9 |   }
10 |   create(data) {
11 |     return http.post("/api/v1/captains", data);
12 |   }
13 |   update(id, data) {
14 |     return http.put(`/api/v1/captains/${id}`, data);
15 |   }
16 |   delete(id) {
17 |     return http.delete(`/api/v1/captains/${id}`);
18 |   }
19 | }
20 | 
21 | export default new CaptainService();
22 | 


--------------------------------------------------------------------------------
/src/services/CompanyService.js:
--------------------------------------------------------------------------------
 1 | import http from "../http-common";
 2 | 
 3 | class CompanyService {
 4 |   getAll() {
 5 |     return http.get("/api/v1/companies");
 6 |   }
 7 |   get(id) {
 8 |     return http.get(`/api/v1/companies/${id}`);
 9 |   }
10 |   create(data) {
11 |     return http.post("/api/v1/companies", data);
12 |   }
13 |   update(id, data) {
14 |     return http.put(`/api/v1/companies/${id}`, data);
15 |   }
16 |   delete(id) {
17 |     return http.delete(`/api/v1/companies/${id}`);
18 |   }
19 | }
20 | 
21 | export default new CompanyService();
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
14 |         properly without JavaScript enabled. Please enable it to
15 |         continue.</strong
16 |       >
17 |     </noscript>
18 |     <div id="app"></div>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <nav class="navbar navbar-expand navbar-light bg-white">
 4 |       <router-link to="/" class="navbar-brand">
 5 |         <img src="./assets/LogoApp.png" alt="" width="250" />
 6 |       </router-link>
 7 | 
 8 |       <ul class="navbar-nav mr-auto">
 9 |         <li class="nav-item">
10 |           <router-link to="/captains" class="nav-link">Capitanes</router-link>
11 |         </li>
12 |         <li class="nav-item">
13 |           <router-link to="/companies" class="nav-link">Compañias</router-link>
14 |         </li>
15 |         <li class="nav-item">
16 |           <router-link to="/boats" class="nav-link">Embarcaciones</router-link>
17 |         </li>
18 |       </ul>
19 |     </nav>
20 |     <div class="container mt-3">
21 |       <router-view />
22 |     </div>
23 |   </div>
24 | </template>
25 | <script>
26 | export default {
27 |   name: "app",
28 | };
29 | </script>
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "launch-x",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build --dest build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^1.6.7",
12 |     "bootstrap": "^5.3.2",
13 |     "core-js": "^3.35.1",
14 |     "jquery": "^3.7.1",
15 |     "popper.js": "^1.16.1",
16 |     "vue": "^3.4.15",
17 |     "vue-router": "^4.2.5"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/eslint-parser": "^7.23.10",
21 |     "@vue/cli-plugin-babel": "^5.0.8",
22 |     "@vue/cli-plugin-eslint": "^5.0.8",
23 |     "@vue/cli-service": "^5.0.8",
24 |     "@vue/compiler-sfc": "^3.4.15",
25 |     "eslint": "^8.56.0",
26 |     "eslint-plugin-vue": "^9.21.1"
27 |   },
28 |   "eslintConfig": {
29 |     "root": true,
30 |     "env": {
31 |       "node": true
32 |     },
33 |     "extends": [
34 |       "plugin:vue/vue3-essential",
35 |       "eslint:recommended"
36 |     ],
37 |     "parserOptions": {
38 |       "parser": "@babel/eslint-parser",
39 |       "babelOptions": {
40 |         "presets": [
41 |           "@babel/preset-env"
42 |         ]
43 |       }
44 |     },
45 |     "rules": {}
46 |   },
47 |   "browserslist": [
48 |     "> 1%",
49 |     "last 2 versions",
50 |     "not dead"
51 |   ]
52 | }
53 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from "vue-router";
 2 | const routes = [
 3 |   {
 4 |     path: "/",
 5 |     alias: "/captains",
 6 |     name: "captains",
 7 |     component: () => import("./components/CaptainsList"),
 8 |   },
 9 |   {
10 |     path: "/captains/:id",
11 |     name: "captain-details",
12 |     component: () => import("./components/CaptainDetails"),
13 |   },
14 |   {
15 |     path: "/add-captain",
16 |     name: "add-captain",
17 |     component: () => import("./components/AddCaptain"),
18 |   },
19 |   {
20 |     path: "/",
21 |     alias: "/companies",
22 |     name: "companies",
23 |     component: () => import("./components/CompaniesList"),
24 |   },
25 |   {
26 |     path: "/companies/:id",
27 |     name: "company-details",
28 |     component: () => import("./components/CompanyDetails"),
29 |   },
30 |   {
31 |     path: "/add-company",
32 |     name: "add-company",
33 |     component: () => import("./components/AddCompany"),
34 |   },
35 |   {
36 |     path: "/",
37 |     alias: "/boats",
38 |     name: "boats",
39 |     component: () => import("./components/BoatsList"),
40 |   },
41 |   {
42 |     path: "/boats/:id",
43 |     name: "boat-details",
44 |     component: () => import("./components/BoatDetails"),
45 |   },
46 |   {
47 |     path: "/add-boat",
48 |     name: "add-boat",
49 |     component: () => import("./components/AddBoat"),
50 |   },
51 | ];
52 | const router = createRouter({
53 |   history: createWebHistory(),
54 |   routes,
55 | });
56 | export default router;
57 | 


--------------------------------------------------------------------------------
/src/components/AddCompany.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="submit-form">
 3 |     <div v-if="!submitted">
 4 |       <h3>Nueva Compañia</h3>
 5 |       <div class="form-group">
 6 |         <label for="title">Nombre </label>
 7 |         <input
 8 |           type="text"
 9 |           class="form-control"
10 |           id="title"
11 |           required
12 |           v-model="company.name"
13 |           name="title"
14 |         />
15 |       </div>
16 |       <button @click="saveCompany" class="btn btn-success">Agregar</button>
17 |     </div>
18 |     <div v-else>
19 |       <h4>Compañia creada exitosamente.</h4>
20 |       <button class="btn btn-success" @click="newCompany">Add</button>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | import CompanyService from "../services/CompanyService";
27 | export default {
28 |   name: "add-company",
29 |   data() {
30 |     return {
31 |       company: {
32 |         id: null,
33 |         name: "",
34 |       },
35 |       submitted: false,
36 |     };
37 |   },
38 |   methods: {
39 |     saveCompany() {
40 |       var data = {
41 |         name: this.company.name,
42 |       };
43 |       CompanyService.create(data)
44 |         .then((response) => {
45 |           this.company.id = response.data.id;
46 |           this.submitted = true;
47 |         })
48 |         .catch((e) => {
49 |           console.log(e);
50 |         });
51 |     },
52 |     newCompany() {
53 |       this.submitted = false;
54 |       this.company = {};
55 |     },
56 |   },
57 | };
58 | </script>
59 | 


--------------------------------------------------------------------------------
/src/components/CompaniesList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="list row">
 3 |     <div class="col-md-6">
 4 |       <h4>Compañias registradas</h4>
 5 |       <ul class="list-group">
 6 |         <li
 7 |           class="list-group-item"
 8 |           :class="{ active: index == currentIndex }"
 9 |           v-for="(company, index) in companies"
10 |           :key="index"
11 |           @click="setActiveCompany(company, index)"
12 |         >
13 |           {{ company.name }}
14 |         </li>
15 |       </ul>
16 |     </div>
17 |     <div class="col-md-6">
18 |       <div v-if="currentCompany">
19 |         <h4>Compañia</h4>
20 |         <div>
21 |           <br /><label><strong>Nombre:</strong></label>
22 |           {{ currentCompany.name }}
23 |         </div>
24 |         <router-link
25 |           :to="'/companies/' + currentCompany.id"
26 |           class="btn btn-info"
27 |         >
28 |           Editar</router-link
29 |         >
30 |       </div>
31 |       <div v-else>
32 |         <br />
33 |         <p>Selecciona una Compañia.</p>
34 |         <router-link to="/add-company" class="btn btn-info"
35 |           >Agregar Compañia</router-link
36 |         >
37 |       </div>
38 |     </div>
39 |   </div>
40 | </template>
41 | <script>
42 | import CompanyService from "../services/CompanyService";
43 | 
44 | export default {
45 |   name: "companies-list",
46 |   data() {
47 |     return {
48 |       tutorials: [],
49 |       companies: [],
50 |       currentTutorial: null,
51 |       currentCompany: null,
52 |       currentIndex: -1,
53 |       title: "",
54 |       companyId: "",
55 |     };
56 |   },
57 |   methods: {
58 |     getAllCompanies() {
59 |       CompanyService.getAll()
60 |         .then((response) => {
61 |           this.companies = response.data;
62 |         })
63 |         .catch((e) => {
64 |           console.log(e);
65 |         });
66 |     },
67 |     setActiveCompany(company, index) {
68 |       this.currentCompany = company;
69 |       this.currentIndex = company ? index : -1;
70 |     },
71 |   },
72 |   mounted() {
73 |     this.getAllCompanies();
74 |   },
75 | };
76 | </script>
77 | 


--------------------------------------------------------------------------------
/.github/workflows/azure-static-web-apps-black-smoke-018887f10.yml:
--------------------------------------------------------------------------------
 1 | name: Azure Static Web Apps CI/CD
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   pull_request:
 8 |     types: [opened, synchronize, reopened, closed]
 9 |     branches:
10 |       - main
11 | 
12 | jobs:
13 |   build_and_deploy_job:
14 |     if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
15 |     runs-on: ubuntu-latest
16 |     name: Build and Deploy Job
17 |     environment:
18 |       name: Production
19 |       url: ${{ steps.builddeploy.outputs.static_web_app_url }}
20 |     steps:
21 |       - uses: actions/checkout@v2
22 |         with:
23 |           submodules: true
24 |       - name: Build And Deploy
25 |         id: builddeploy
26 |         uses: Azure/static-web-apps-deploy@v1
27 |         with:
28 |           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLACK_SMOKE_018887F10 }}
29 |           repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
30 |           action: "upload"
31 |           ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
32 |           # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
33 |           app_location: "/" # App source code path
34 |           api_location: "" # Api source code path - optional
35 |           output_location: "build" # Built app content directory - optional
36 |           ###### End of Repository/Build Configurations ######
37 | 
38 |   close_pull_request_job:
39 |     if: github.event_name == 'pull_request' && github.event.action == 'closed'
40 |     runs-on: ubuntu-latest
41 |     name: Close Pull Request Job
42 |     steps:
43 |       - name: Close Pull Request
44 |         id: closepullrequest
45 |         uses: Azure/static-web-apps-deploy@v1
46 |         with:
47 |           azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_BLACK_SMOKE_018887F10 }}
48 |           action: "close"
49 | 


--------------------------------------------------------------------------------
/src/components/CaptainsList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="list row">
 3 |     <div class="col-md-6">
 4 |       <h4>Capitanes registrados</h4>
 5 |       <ul class="list-group">
 6 |         <li
 7 |           class="list-group-item"
 8 |           :class="{ active: index == currentIndex }"
 9 |           v-for="(captain, index) in captains"
10 |           :key="index"
11 |           @click="setActiveCaptain(captain, index)"
12 |         >
13 |           {{ captain.name }}
14 |         </li>
15 |       </ul>
16 |     </div>
17 |     <div class="col-md-6">
18 |       <div v-if="currentCaptain">
19 |         <h4>Capitán</h4>
20 |         <div>
21 |           <br /><label><strong>Nombre:</strong></label>
22 |           {{ currentCaptain.name }} <br /><label><strong>Email:</strong></label>
23 |           {{ currentCaptain.email }} <br /><label><strong>País:</strong></label>
24 |           {{ currentCaptain.country }} <br /><label
25 |             ><strong>Estado:</strong></label
26 |           >
27 |           {{ currentCaptain.state }}
28 |         </div>
29 |         <router-link
30 |           :to="'/captains/' + currentCaptain.id"
31 |           class="btn btn-info"
32 |         >
33 |           Editar</router-link
34 |         >
35 |       </div>
36 |       <div v-else>
37 |         <br />
38 |         <p>Selecciona un Capitán.</p>
39 |         <router-link to="/add-captain" class="btn btn-info"
40 |           >Agregar Capitan</router-link
41 |         >
42 |       </div>
43 |     </div>
44 |   </div>
45 | </template>
46 | <script>
47 | import CaptainService from "../services/CaptainService";
48 | 
49 | export default {
50 |   name: "captain-list",
51 |   data() {
52 |     return {
53 |       tutorials: [],
54 |       captains: [],
55 |       currentTutorial: null,
56 |       currentCaptain: null,
57 |       currentIndex: -1,
58 |       title: "",
59 |       captainId: "",
60 |     };
61 |   },
62 |   methods: {
63 |     getAllCaptains() {
64 |       CaptainService.getAll()
65 |         .then((response) => {
66 |           this.captains = response.data;
67 |         })
68 |         .catch((e) => {
69 |           console.log(e);
70 |         });
71 |     },
72 |     setActiveCaptain(captain, index) {
73 |       this.currentCaptain = captain;
74 |       this.currentIndex = captain ? index : -1;
75 |     },
76 |   },
77 |   mounted() {
78 |     this.getAllCaptains();
79 |   },
80 | };
81 | </script>
82 | 


--------------------------------------------------------------------------------
/src/components/CompanyDetails.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h4>Compañias</h4>
 3 |   <div v-if="currentCompany" class="edit-form">
 4 |     <form>
 5 |       <div class="form-group">
 6 |         <label for="title">Nombre</label>
 7 |         <input
 8 |           type="text"
 9 |           class="form-control"
10 |           id="title"
11 |           v-model="currentCompany.name"
12 |         />
13 |       </div>
14 |     </form>
15 |     <button class="btn btn-danger mr-2" @click="deleteCompany">
16 |       Eliminar Compañia
17 |     </button>
18 |     <button type="submit" class="btn btn-info mr-2" @click="updateCompany">
19 |       Actualizar
20 |     </button>
21 |     <div v-if="message" class="alert alert-success mt-3" role="alert">
22 |       {{ message }}
23 |     </div>
24 |     <div v-if="error" class="alert alert-danger mt-3" role="alert">
25 |       {{ error }}
26 |     </div>
27 |   </div>
28 |   <div v-else>
29 |     <br />
30 |     <p>Selecciona una Compañia.</p>
31 |   </div>
32 | </template>
33 | <script>
34 | import CompanyService from "../services/CompanyService";
35 | export default {
36 |   name: "company-details",
37 |   data() {
38 |     return {
39 |       currentCompany: null,
40 |       message: "",
41 |       error: "",
42 |     };
43 |   },
44 |   methods: {
45 |     getCompany(id) {
46 |       CompanyService.get(id)
47 |         .then((response) => {
48 |           this.currentCompany = response.data;
49 |         })
50 |         .catch((e) => {
51 |           this.error = e.response.data.message;
52 |         });
53 |     },
54 |     deleteCompany() {
55 |       CompanyService.delete(this.currentCompany.id)
56 |         .then((response) => {
57 |           console.log(response.data);
58 |           this.$router.push({ name: "companies" });
59 |         })
60 |         .catch((e) => {
61 |           this.error = e.response.data.message;
62 |         });
63 |     },
64 |     updateCompany() {
65 |       CompanyService.update(this.currentCompany.id, this.currentCompany)
66 |         .then((response) => {
67 |           console.log(response.data);
68 |           this.message = "Se actualizó correctamente";
69 |         })
70 |         .catch((e) => {
71 |           this.error = e.response.data.message;
72 |         });
73 |     },
74 |   },
75 |   mounted() {
76 |     this.message = "";
77 |     this.error = "";
78 |     this.getCompany(this.$route.params.id);
79 |   },
80 | };
81 | </script>
82 | 
83 | <style>
84 | .edit-form {
85 |   max-width: 300px;
86 |   margin: auto;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/AddCaptain.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="submit-form">
 3 |     <div v-if="!submitted">
 4 |       <h3>Nuevo Capitán</h3>
 5 |       <div class="form-group">
 6 |         <label for="title">Nombre </label>
 7 |         <input
 8 |           type="text"
 9 |           class="form-control"
10 |           id="title"
11 |           required
12 |           v-model="captain.name"
13 |           name="title"
14 |         />
15 |       </div>
16 |       <div class="form-group">
17 |         <label for="title">Email</label>
18 |         <input
19 |           type="text"
20 |           class="form-control"
21 |           id="email"
22 |           required
23 |           v-model="captain.email"
24 |           name="email"
25 |         />
26 |       </div>
27 |       <div class="form-group">
28 |         <label for="title">País</label>
29 |         <input
30 |           type="text"
31 |           class="form-control"
32 |           id="country"
33 |           required
34 |           v-model="captain.country"
35 |           name="country"
36 |         />
37 |       </div>
38 |       <div class="form-group">
39 |         <label for="title">Estado</label>
40 |         <input
41 |           type="text"
42 |           class="form-control"
43 |           id="state"
44 |           required
45 |           v-model="captain.state"
46 |           name="state"
47 |         />
48 |       </div>
49 |       <button @click="saveCaptain" class="btn btn-success">Agregar</button>
50 |     </div>
51 |     <div v-else>
52 |       <h4>Capitán creado exitosamente.</h4>
53 |       <button class="btn btn-success" @click="newCaptain">Add</button>
54 |     </div>
55 |   </div>
56 | </template>
57 | 
58 | <script>
59 | import CaptainService from "../services/CaptainService";
60 | export default {
61 |   name: "add-captain",
62 |   data() {
63 |     return {
64 |       captain: {
65 |         id: null,
66 |         name: "",
67 |         username: "",
68 |         country: "",
69 |         state: "",
70 |       },
71 |       submitted: false,
72 |     };
73 |   },
74 |   methods: {
75 |     saveCaptain() {
76 |       var data = {
77 |         name: this.captain.name,
78 |         email: this.captain.email,
79 |         country: this.captain.country,
80 |         state: this.captain.state,
81 |       };
82 |       CaptainService.create(data)
83 |         .then((response) => {
84 |           this.captain.id = response.data.id;
85 |           this.submitted = true;
86 |         })
87 |         .catch((e) => {
88 |           console.log(e);
89 |         });
90 |     },
91 |     newCaptain() {
92 |       this.submitted = false;
93 |       this.captain = {};
94 |     },
95 |   },
96 | };
97 | </script>
98 | 


--------------------------------------------------------------------------------
/src/components/CaptainDetails.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <h4>Capitán</h4>
  3 |   <div v-if="currentCaptain" class="edit-form">
  4 |     <form>
  5 |       <div class="form-group">
  6 |         <label for="title">Nombre</label>
  7 |         <input
  8 |           type="text"
  9 |           disabled
 10 |           class="form-control"
 11 |           id="title"
 12 |           v-model="currentCaptain.name"
 13 |         />
 14 |       </div>
 15 |       <div class="form-group">
 16 |         <label for="title">Email</label>
 17 |         <input
 18 |           type="text"
 19 |           disabled
 20 |           class="form-control"
 21 |           id="title"
 22 |           v-model="currentCaptain.email"
 23 |         />
 24 |       </div>
 25 |       <div class="form-group">
 26 |         <label for="title">Pais</label>
 27 |         <input
 28 |           type="text"
 29 |           class="form-control"
 30 |           id="title"
 31 |           v-model="currentCaptain.country"
 32 |         />
 33 |       </div>
 34 |       <div class="form-group">
 35 |         <label for="title">Estado</label>
 36 |         <input
 37 |           type="text"
 38 |           class="form-control"
 39 |           id="title"
 40 |           v-model="currentCaptain.state"
 41 |         />
 42 |       </div>
 43 |     </form>
 44 |     <button class="btn btn-danger mr-2" @click="deleteCaptain">
 45 |       Eliminar Capitán
 46 |     </button>
 47 |     <button type="submit" class="btn btn-info mr-2" @click="updateCaptain">
 48 |       Actualizar
 49 |     </button>
 50 |     <div v-if="message" class="alert alert-success mt-3" role="alert">
 51 |       {{ message }}
 52 |     </div>
 53 |     <div v-if="error" class="alert alert-danger mt-3" role="alert">
 54 |       {{ error }}
 55 |     </div>
 56 |   </div>
 57 |   <div v-else>
 58 |     <br />
 59 |     <p>Selecciona un Capitán.</p>
 60 |   </div>
 61 | </template>
 62 | <script>
 63 | import CaptainService from "../services/CaptainService";
 64 | export default {
 65 |   name: "captain-details",
 66 |   data() {
 67 |     return {
 68 |       currentCaptain: null,
 69 |       message: "",
 70 |       error: "",
 71 |     };
 72 |   },
 73 |   methods: {
 74 |     getCaptain(id) {
 75 |       CaptainService.get(id)
 76 |         .then((response) => {
 77 |           this.currentCaptain = response.data;
 78 |         })
 79 |         .catch((e) => {
 80 |           this.error = e.response.data.message;
 81 |         });
 82 |     },
 83 |     deleteCaptain() {
 84 |       CaptainService.delete(this.currentCaptain.id)
 85 |         .then((response) => {
 86 |           console.log(response.data);
 87 |           this.$router.push({ name: "captains" });
 88 |         })
 89 |         .catch((e) => {
 90 |           this.error = e.response.data.message;
 91 |         });
 92 |     },
 93 |     updateCaptain() {
 94 |       CaptainService.update(this.currentCaptain.id, this.currentCaptain)
 95 |         .then((response) => {
 96 |           console.log(response.data);
 97 |           this.message = "Se actualizó correctamente";
 98 |         })
 99 |         .catch((e) => {
100 |           this.error = e.response.data.message;
101 |         });
102 |     },
103 |   },
104 |   mounted() {
105 |     this.message = "";
106 |     this.error = "";
107 |     this.getCaptain(this.$route.params.id);
108 |   },
109 | };
110 | </script>
111 | 
112 | <style>
113 | .edit-form {
114 |   max-width: 300px;
115 |   margin: auto;
116 | }
117 | </style>
118 | 


--------------------------------------------------------------------------------
/src/components/BoatsList.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="list row">
  3 |     <div class="col-md-6">
  4 |       <h4>Embarcaciones Registradas</h4>
  5 |       <ul class="list-group">
  6 |         <li
  7 |           class="list-group-item"
  8 |           :class="{ active: index == currentIndex }"
  9 |           v-for="(boat, index) in boats"
 10 |           :key="index"
 11 |           @click="setActiveBoat(boat, index)"
 12 |         >
 13 |           {{ boat.name }}
 14 |         </li>
 15 |       </ul>
 16 |     </div>
 17 |     <div class="col-md-6">
 18 |       <div v-if="currentBoat && currentCaptain && currentCompany">
 19 |         <h4>Embarcación</h4>
 20 |         <div>
 21 |           <br />
 22 |           <label><strong>Nombre del capitán:</strong></label>
 23 |           {{ currentCaptain.name }}<br />
 24 |           <label><strong>Nombre de la embarcación:</strong></label>
 25 |           {{ currentBoat.name }}<br />
 26 |           <label><strong>Nombre de la compañia:</strong></label>
 27 |           {{ currentCompany.name }}<br />
 28 |           <label><strong>Fecha de pesca:</strong></label>
 29 |           {{ currentBoat.fishingDate }}<br />
 30 |           <label><strong>Locación:</strong></label>
 31 |           {{ currentBoat.fishingLocation }}<br />
 32 |           <label><strong>Lugar de zarpe:</strong></label>
 33 |           {{ currentBoat.zarpe }}<br />
 34 |           <label><strong>Captura:</strong></label>
 35 |           {{ currentBoat.capture }}<br />
 36 |         </div>
 37 |         <router-link :to="'/boats/' + currentBoat.id" class="btn btn-info">
 38 |           Editar</router-link
 39 |         >
 40 |       </div>
 41 |       <div v-else>
 42 |         <br />
 43 |         <p>Selecciona una embarcación.</p>
 44 |         <router-link to="/add-boat" class="btn btn-info"
 45 |           >Agregar embarcación</router-link
 46 |         >
 47 |       </div>
 48 |     </div>
 49 |   </div>
 50 | </template>
 51 | <script>
 52 | import BoatService from "../services/BoatService.js";
 53 | import CaptainService from "../services/CaptainService.js";
 54 | import CompanyService from "../services/CompanyService.js";
 55 | 
 56 | export default {
 57 |   name: "boats-List",
 58 |   data() {
 59 |     return {
 60 |       tutorials: [],
 61 |       boats: [],
 62 |       currentTutorial: null,
 63 |       currentBoat: null,
 64 |       currentCaptain: null,
 65 |       currentCompany: null,
 66 |       currentIndex: -1,
 67 |       title: "",
 68 |       BoatId: "",
 69 |     };
 70 |   },
 71 |   methods: {
 72 |     getAllBoats() {
 73 |       BoatService.getAll()
 74 |         .then((response) => {
 75 |           this.boats = response.data;
 76 |         })
 77 |         .catch((e) => {
 78 |           console.log(e);
 79 |         });
 80 |     },
 81 |     getCaptain(id) {
 82 |       CaptainService.get(id)
 83 |         .then((response) => {
 84 |           this.currentCaptain = response.data;
 85 |         })
 86 |         .catch((e) => {
 87 |           this.error = e.response.data.message;
 88 |         });
 89 |     },
 90 |     getCompany(id) {
 91 |       CompanyService.get(id)
 92 |         .then((response) => {
 93 |           this.currentCompany = response.data;
 94 |         })
 95 |         .catch((e) => {
 96 |           this.error = e.response.data.message;
 97 |         });
 98 |     },
 99 |     setActiveBoat(boat, index) {
100 |       this.currentBoat = boat;
101 |       this.currentIndex = boat ? index : -1;
102 |       this.getCaptain(boat.idCaptain);
103 |       this.getCompany(boat.idCompany);
104 |     },
105 |   },
106 |   mounted() {
107 |     this.getAllBoats();
108 |   },
109 | };
110 | </script>
111 | 


--------------------------------------------------------------------------------
/src/components/AddBoat.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="submit-form">
  3 |     <div v-if="!submitted">
  4 |       <h3>Nuevo Embarcación</h3>
  5 |       <div class="form-group">
  6 |         <label for="name">Nombre</label>
  7 |         <input
  8 |           type="text"
  9 |           class="form-control"
 10 |           id="name"
 11 |           required
 12 |           v-model="boat.name"
 13 |           name="name"
 14 |         />
 15 |       </div>
 16 |       <div class="form-group">
 17 |         <label for="fishingLocation">Lugar de Pesca</label>
 18 |         <input
 19 |           type="text"
 20 |           class="form-control"
 21 |           id="fishingLocation"
 22 |           required
 23 |           v-model="boat.fishingLocation"
 24 |           name="fishingLocation"
 25 |         />
 26 |       </div>
 27 |       <div class="form-group">
 28 |         <label for="capture">Captura</label>
 29 |         <input
 30 |           type="text"
 31 |           class="form-control"
 32 |           id="capture"
 33 |           required
 34 |           v-model="boat.capture"
 35 |           name="capture"
 36 |         />
 37 |       </div>
 38 |       <div class="form-group">
 39 |         <label for="zarpe">Zarpe</label>
 40 |         <input
 41 |           type="text"
 42 |           class="form-control"
 43 |           id="zarpe"
 44 |           required
 45 |           v-model="boat.zarpe"
 46 |           name="zarpe"
 47 |         />
 48 |       </div>
 49 |       <div class="form-group">
 50 |         <label>Capitán</label>
 51 |         <select
 52 |           v-model="boat.idCaptain"
 53 |           class="form-control"
 54 |           aria-label="Selecciona un capitán"
 55 |         >
 56 |           <option value="">Selecciona un capitán</option>
 57 |           <option
 58 |             v-for="captain in captains"
 59 |             :value="captain.id"
 60 |             :key="captain.id"
 61 |           >
 62 |             {{ captain.name }}
 63 |           </option>
 64 |         </select>
 65 |       </div>
 66 |       <div class="form-group">
 67 |         <label>Empresa</label>
 68 |         <select
 69 |           v-model="boat.idCompany"
 70 |           class="form-control"
 71 |           aria-label="Selecciona una empresa"
 72 |         >
 73 |           <option value="">Selecciona una empresa</option>
 74 |           <option
 75 |             v-for="company in companies"
 76 |             :value="company.id"
 77 |             :key="company.id"
 78 |           >
 79 |             {{ company.name }}
 80 |           </option>
 81 |         </select>
 82 |       </div>
 83 |       <button @click="saveBoat" class="btn btn-success">Agregar</button>
 84 |     </div>
 85 |     <div v-else>
 86 |       <h4>Embarcación creada exitosamente.</h4>
 87 |       <button class="btn btn-success" @click="newBoat">Add</button>
 88 |     </div>
 89 |   </div>
 90 | </template>
 91 | 
 92 | <script>
 93 | import BoatService from "../services/BoatService";
 94 | import CaptainService from "../services/CaptainService";
 95 | import CompanyService from "../services/CompanyService";
 96 | export default {
 97 |   name: "add-boat",
 98 |   data() {
 99 |     return {
100 |       boat: {
101 |         id: null,
102 |         name: "",
103 |         fishingLocation: "",
104 |         capture: "",
105 |         zarpe: "",
106 |         idCaptain: "",
107 |         idCompany: "",
108 |       },
109 |       captains: [],
110 |       companies: [],
111 |       submitted: false,
112 |     };
113 |   },
114 |   methods: {
115 |     saveBoat() {
116 |       const data = {
117 |         name: this.boat.name,
118 |         fishingLocation: this.boat.fishingLocation,
119 |         capture: this.boat.capture,
120 |         zarpe: this.boat.zarpe,
121 |         idCaptain: this.boat.idCaptain,
122 |         idCompany: this.boat.idCompany,
123 |       };
124 |       BoatService.create(data)
125 |         .then((response) => {
126 |           this.boat.id = response.data.id;
127 |           this.submitted = true;
128 |         })
129 |         .catch((e) => {
130 |           console.log(e);
131 |         });
132 |     },
133 |     newBoat() {
134 |       this.submitted = false;
135 |       this.boat = {};
136 |     },
137 |     getCaptains() {
138 |       CaptainService.getAll()
139 |         .then((response) => {
140 |           this.captains = response.data;
141 |         })
142 |         .catch((e) => {
143 |           this.error = console.log(e);
144 |         });
145 |     },
146 |     getCompanies() {
147 |       CompanyService.getAll()
148 |         .then((response) => {
149 |           this.companies = response.data;
150 |         })
151 |         .catch((e) => {
152 |           this.error = console.log(e);
153 |         });
154 |     },
155 |   },
156 |   mounted() {
157 |     this.getCaptains();
158 |     this.getCompanies();
159 |   },
160 | };
161 | </script>
162 | 


--------------------------------------------------------------------------------
/src/components/BoatDetails.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <h4>Embarcación</h4>
  3 |   <div v-if="currentBoat && currentCompany && currentCaptain" class="edit-form">
  4 |     <form>
  5 |       <div class="form-group">
  6 |         <label for="title">Nombre de la embarcación</label>
  7 |         <input
  8 |           type="text"
  9 |           class="form-control"
 10 |           id="title"
 11 |           v-model="currentBoat.name"
 12 |         />
 13 |       </div>
 14 |       <div class="form-group">
 15 |         <label for="title">Nombre del capitan</label>
 16 |         <input
 17 |           type="text"
 18 |           disabled
 19 |           class="form-control"
 20 |           id="title"
 21 |           v-model="currentCaptain.name"
 22 |         />
 23 |       </div>
 24 |       <div class="form-group">
 25 |         <label for="title">Nombre de la compañia</label>
 26 |         <input
 27 |           type="text"
 28 |           disabled
 29 |           class="form-control"
 30 |           id="title"
 31 |           v-model="currentCompany.name"
 32 |         />
 33 |       </div>
 34 |       <div class="form-group">
 35 |         <label for="title">Locación:</label>
 36 |         <input
 37 |           type="text"
 38 |           disabled
 39 |           class="form-control"
 40 |           id="title"
 41 |           v-model="currentBoat.fishingLocation"
 42 |         />
 43 |       </div>
 44 |       <div class="form-group">
 45 |         <label for="title">Lugar de zarpe:</label>
 46 |         <input
 47 |           type="text"
 48 |           class="form-control"
 49 |           id="title"
 50 |           v-model="currentBoat.zarpe"
 51 |         />
 52 |       </div>
 53 |       <div class="form-group">
 54 |         <label for="title">¿Qué especies captura?</label>
 55 |         <input
 56 |           type="text"
 57 |           class="form-control"
 58 |           id="title"
 59 |           v-model="currentBoat.capture"
 60 |         />
 61 |       </div>
 62 |     </form>
 63 |     <button class="btn btn-danger mr-2" @click="deleteBoat">
 64 |       Eliminar embarcación
 65 |     </button>
 66 |     <button type="submit" class="btn btn-info mr-2" @click="updateBoat">
 67 |       Actualizar
 68 |     </button>
 69 |     <p>{{ message }}</p>
 70 |     <div v-if="error" class="alert alert-danger" role="alert">
 71 |       {{ error }}
 72 |     </div>
 73 |   </div>
 74 |   <div v-else>
 75 |     <br />
 76 |     <p>Selecciona una embarcación.</p>
 77 |   </div>
 78 | </template>
 79 | <script>
 80 | import BoatService from "../services/BoatService.js";
 81 | import CaptainService from "../services/CaptainService.js";
 82 | import CompanyService from "../services/CompanyService.js";
 83 | 
 84 | export default {
 85 |   name: "boat-details",
 86 |   data() {
 87 |     return {
 88 |       currentBoat: null,
 89 |       currentCaptain: null,
 90 |       currentCompany: null,
 91 |       message: "",
 92 |       error: "",
 93 |     };
 94 |   },
 95 |   methods: {
 96 |     getBoat(id) {
 97 |       BoatService.get(id)
 98 |         .then((response) => {
 99 |           this.currentBoat = response.data;
100 |           this.getCaptain(response.data.idCaptain);
101 |           this.getCompany(response.data.idCompany);
102 |         })
103 |         .catch((e) => {
104 |           this.error = e.response.data.message;
105 |         });
106 |     },
107 |     deleteBoat() {
108 |       BoatService.delete(this.currentBoat.id)
109 |         .then((response) => {
110 |           console.log(response.data);
111 |           this.$router.push({ name: "boats" });
112 |         })
113 |         .catch((e) => {
114 |           this.error = e.response.data.message;
115 |         });
116 |     },
117 |     updateBoat() {
118 |       BoatService.update(this.currentBoat.id, this.currentBoat)
119 |         .then((response) => {
120 |           console.log(response.data);
121 |           this.message = "Se actualizó correctamente";
122 |         })
123 |         .catch((e) => {
124 |           this.error = e.response.data.message;
125 |         });
126 |     },
127 |     getCaptain(id) {
128 |       CaptainService.get(id)
129 |         .then((response) => {
130 |           this.currentCaptain = response.data;
131 |         })
132 |         .catch((e) => {
133 |           this.error = e.response.data.message;
134 |         });
135 |     },
136 |     getCompany(id) {
137 |       CompanyService.get(id)
138 |         .then((response) => {
139 |           this.currentCompany = response.data;
140 |         })
141 |         .catch((e) => {
142 |           this.error = e.response.data.message;
143 |         });
144 |     },
145 |   },
146 |   mounted() {
147 |     this.message = "";
148 |     this.error = "";
149 |     this.getBoat(this.$route.params.id);
150 |   },
151 | };
152 | </script>
153 | 
154 | <style>
155 | .edit-form {
156 |   max-width: 300px;
157 |   margin: auto;
158 | }
159 | </style>
160 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Artisanal Fishing Client
 2 | La Artisanal Fishing Client nos permite crear, visualizar, editar y eliminar compañías, embarcaciones y capitanes. 
 3 | Esto se puede realizar gracias a la [Artisanal Fishing API](https://github.com/WollenMoth/artisanal-fishing-api).
 4 | 
 5 | ## Dependencias utilizadas
 6 | - **Axios:** Cliente basado en promesas que nos facilita realizar peticiones HTTP. 
 7 | - **Vue:** Framework progresivo para construir interfaces de usuario. 
 8 | - **Boostrap:** Bootstrap es un framework CSS que nos facilita dar estilos a nuestro cliente.
 9 | - **Vue Router:** Biblioteca de enrutamiento oficial del lado del cliente que proporciona las herramientas necesarias para asignar los componentes de una aplicación a diferentes rutas de URL del navegador.
10 | - **ESLint:** Analiza el código para encontrar problemas con el formato del código.
11 | 
12 | ## Instalación
13 | 1. Clonar repositorio
14 | 2. Dirigirse al directorio `artisanal-fishing-client`
15 | 3. Ejecutar el comando `npm install` para instalar dependencias
16 | 4. Ejecutar el comando `npm run serve` para correr la aplicación
17 | 5. Ejecutar el comando `npm run lint` para ejecutar el linter<br>
18 | 
19 | ## Capitanes
20 | Para visualizar la información, solo basta con dar clic en el nombre del capitán, la información aparecerá en el lado derecho. 
21 | 
22 | ### Crear capitán
23 | 1. Clic en el botón "Agregar capitán" 
24 | 
25 | ![image](https://user-images.githubusercontent.com/54995852/168506736-b57601c3-0779-4185-b6cd-4ee5c7401b59.png)
26 | 
27 | 2. Llenar formulario y dar clic en el botón "Agregar"
28 | 
29 | ![image](https://user-images.githubusercontent.com/54995852/168506857-5a5dbab5-3513-4128-ba36-3fb4093fc78b.png)
30 | 
31 | ### Editar Capitán
32 | 1. Dar clic en el nombre del capitán y después en el botón "Editar"
33 | 
34 | ![image](https://user-images.githubusercontent.com/54995852/168507271-3f9e828b-c961-4611-aa91-675404ffae65.png)
35 | 
36 | 2. Editar el formulario por los nuevos valores y dar clic en el botón "Actualizar"
37 | 
38 | ![image](https://user-images.githubusercontent.com/54995852/168507580-fecba9fe-050b-40b9-9012-a9d80979bc12.png)
39 | 
40 | ### Eliminar Capitán
41 | 1. Realizar los mismos pasos para editar, con la diferencia de que ahora se debe presionar el botón "Eliminar Capitán"
42 | 
43 | ![image](https://user-images.githubusercontent.com/54995852/168507516-feefab0d-6143-4478-9bb4-b8f0b071ea4d.png)
44 | 
45 | ## Compañías
46 | Para visualizar la información, solo basta con dar clic en el nombre de las compañías, la información aparecerá en el lado derecho. 
47 | 
48 | ### Crear Compañía
49 | 1. Clic en el botón "Agregar Compañía" 
50 | 
51 | ![image](https://user-images.githubusercontent.com/54995852/168508042-850cf91a-0ecf-47e4-8872-460298bf809f.png)
52 | 
53 | 2. Llenar formulario y dar clic en el botón "Agregar"
54 | 
55 | ![image](https://user-images.githubusercontent.com/54995852/168508070-3b8601dd-e23b-4927-831b-26b6470aaba7.png)
56 | 
57 | ### Editar Compañía
58 | 1. Dar clic en el nombre de la compañía y después en el botón "Editar"
59 | 
60 | ![image](https://user-images.githubusercontent.com/54995852/168508151-3dff7734-d5d2-4922-b2c1-5d5813c71001.png)
61 | 
62 | 2. Editar el formulario por los nuevos valores y dar clic en el botón "Actualizar"
63 | 
64 | ![image](https://user-images.githubusercontent.com/54995852/168508233-d8c48779-4fe0-4662-aa75-3e392dfd4d3d.png)
65 | 
66 | ### Eliminar Compañía
67 | 1. Realizar los mismos pasos para editar, con la diferencia de que ahora se debe presionar el botón "Eliminar Compañía"
68 | 
69 | ![image](https://user-images.githubusercontent.com/54995852/168508250-98eddd43-b6d0-47b8-ad0b-ba15a4898a13.png)
70 | 
71 | ## Embarcaciones
72 | Para visualizar la información, solo basta con dar clic en el nombre de las embarcaciones, la información aparecerá en el lado derecho. 
73 | 
74 | ### Crear Embarcación
75 | 1. Clic en el botón "Agregar Bote" 
76 | 
77 | ![image](https://user-images.githubusercontent.com/54995852/168508509-f1735570-64f6-4d25-8133-920a0a8987ee.png)
78 | 
79 | 2. Llenar formulario y dar clic en el botón "Agregar"
80 | 
81 | ![image](https://user-images.githubusercontent.com/54995852/168508070-3b8601dd-e23b-4927-831b-26b6470aaba7.png)
82 | 
83 | ### Editar Embarcación
84 | 1. Dar clic en el nombre de la embarcación y después en el botón "Editar"
85 | 
86 | ![image](https://user-images.githubusercontent.com/54995852/168508755-f1cc5eff-7566-4436-8050-0e2b7c7afd0e.png)
87 | 
88 | 
89 | 2. Editar el formulario por los nuevos valores y dar clic en el botón "Actualizar"
90 | 
91 | ![image](https://user-images.githubusercontent.com/54995852/168508819-9b83cbcf-e285-48df-9a34-8323c012abb8.png)
92 | 
93 | 
94 | ### Eliminar Embarcación
95 | 1. Realizar los mismos pasos para editar, con la diferencia de que ahora se debe presionar el botón "Eliminar Compañía"
96 | 
97 | ![image](https://user-images.githubusercontent.com/54995852/168508839-1fc77132-d249-49de-96c1-60ca48831ea3.png)
98 | 


--------------------------------------------------------------------------------