implemented edit/create/delete

frontend/src/API.js

@@ -396,6 +396,18 @@ class Api {
     async downtime (id) {
         return axios.get(`api/downtimes/${id}`).then((response) => response.data);
     }
+
+    async downtime_create (data) {
+        return axios.post('/api/downtimes', data).then((response) => response.data);
+    }
+
+    async downtime_update ({ id, data }) {
+        return axios.patch(`/api/downtimes/${id}`, data).then((response) => response.data);
+    }
+
+    async downtime_delete (id) {
+        return axios.delete(`/api/downtimes/${id}`).then((response) => response.data);
+    }
 }
 const api = new Api();
 export default api;

frontend/src/components/Dashboard/DashboardDowntimes.vue

@@ -36,7 +36,7 @@
           </div>
         </div>
         <div v-else>
-          <DowntimesList />
+          <DowntimesList :get-downtimes="getDowntimes" />
           <Pagination
             v-if="downtimes.length !== 0"
             :get-next-downtimes="getNextDowntimes"
@@ -85,7 +85,7 @@ export default {
         this.getDowntimes(this.params);
     },
     methods: {
-        getDowntimes: async function (params) {
+        getDowntimes: async function (params = this.params) {
             this.isLoading = true;
             await this.$store.dispatch({ type: 'getDowntimes', payload: params });
             this.isLoading = false;

frontend/src/components/Dashboard/DowntimesList.vue

@@ -4,7 +4,7 @@
       v-if="downtimes.length === 0"
       class="alert alert-dark d-block mt-3 mb-0"
     >
-      You currently don't have any services!
+      You currently don't have any downtimes for this services!
     </div>
     
     <table
@@ -54,8 +54,7 @@
         >
           <td>
             <span>
-              <!-- {{ serviceById(downtime.service_id).name }} -->
+              {{ downtime.service.name }}
-              {{ downtime.service_id }}
             </span>
           </td>
           <td class="d-none d-md-table-cell">
@@ -93,22 +92,22 @@
                 v-if="$store.state.admin"
                 :disabled="isLoading"
                 class="btn btn-sm btn-outline-secondary"
-                @click.prevent="goto({path: `/dashboard/edit_service/${service.id}`, params: {service: service} })"
+                @click.prevent="goto(`/dashboard/edit_downtime/${downtime.id}`)"
               >
                 <FontAwesomeIcon icon="edit" />
               </button>
               <button
                 v-if="$store.state.admin"
-                :disabled="isLoading"
+                :disabled="downtimeDeleteId === downtime.id && isLoading"
                 class="btn btn-sm btn-danger"
-                @click.prevent="deleteService(service)"
+                @click.prevent="handleDowntimeDelete(downtime)"
               >
                 <FontAwesomeIcon
                   v-if="!isLoading"
                   icon="times"
                 />
                 <FontAwesomeIcon
-                  v-if="isLoading"
+                  v-if="downtimeDeleteId === downtime.id && isLoading"
                   icon="circle-notch"
                   spin
                 />
@@ -123,17 +122,51 @@
 
 <script>
 import { mapGetters, mapState } from 'vuex';
+import Api from '../../API';
 
 export default {
     name: 'DashboardDowntimeList',
+    props: {
+        getDowntimes: {
+            type: Function,
+            default: function () {}
+        }
+    },
     data: function () {
         return {
             isLoading: false,
+            downtimeDeleteId: null,
         };
     },
     computed: {
         ...mapState([ 'downtimes' ]),
-        ...mapGetters([ 'serviceById' ])
+    },
+    methods: {
+        goto: function (to) {
+            this.$router.push(to);
+        },
+        setIsLoading ({ id, isLoading }) {
+            this.downtimeDeleteId = id;
+            this.isLoading = isLoading;
+        },
+        delete: async function (id) {
+            this.setIsLoading({ id, isLoading: true });
+            await Api.downtime_delete(id);
+            this.setIsLoading({ id: null, isLoading: false });
+
+            this.getDowntimes();
+        },
+        handleDowntimeDelete: async function (downtime) {
+            const modal = {
+                visible: true,
+                title: 'Delete Service',
+                body: `Are you sure you want to delete the downtime for service ${downtime.service.name}?`,
+                btnColor: 'btn-danger',
+                btnText: 'Delete Service',
+                func: () => this.delete(downtime.id),
+            };
+            this.$store.commit('setModal', modal);
+        }
     }
 };
 </script>

frontend/src/components/Dashboard/EditDowntime.vue

@@ -18,7 +18,10 @@
       </div>
     </div>
 
-    <FormDowntime />
+    <FormDowntime
+      v-else
+      :edit-downtime="editDowntime"
+    />
   </div>
 </template>
 
@@ -34,9 +37,9 @@ export default {
         FormDowntime
     },
     data: function () {
-        return { isLoading: false, downtime: null };
+        return { isLoading: false, editDowntime: null };
     },
-    created () {
+    mounted () {
         this.getDowntime();
     },
     methods: {
@@ -47,10 +50,10 @@ export default {
             }
 
             this.isLoading = true;
-            const { output } = await Api.getDowntime(id);
+            const { output } = await Api.downtime(id);
             this.isLoading = false;
             
-            this.downtime = output;
+            this.editDowntime = output;
         }
     }
 };

frontend/src/forms/Downtime.vue

@@ -1,10 +1,261 @@
 <template>
-  <form @submit.prevent="() => {}">
+  <form>
     <div class="card contain-card mb-4">
       <div class="card-header">
         {{ $t("downtime_info") }}
       </div>
-      <div class="card-body" />
+      <div class="card-body">
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label">
+            {{
+              $t("service_name")
+            }}
+          </label>
+          <div class="col-sm-8">
+            <select
+              v-model="downtime.serviceId"
+              name="service"
+              class="form-control"
+              required
+              :disabled="$route.params.id"
+            >
+              <option
+                v-for="(service) in services"
+                :key="service.id"
+                :value="service.id"
+              >
+                {{ service.name }}
+              </option>
+            </select>
+            <small
+              class="form-text text-muted"
+            >
+              Select Servive you want to have downtime for
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label">
+            {{
+              $t("downtime_status")
+            }}
+          </label>
+          <div class="col-sm-8">
+            <select
+              v-model="downtime.subStatus"
+              name="service"
+              class="form-control"
+              required
+            >
+              <option
+                value="degraded"
+              >
+                Degraded
+              </option>
+              <option value="down">
+                Down
+              </option>
+            </select>
+            <small
+              class="form-text text-muted"
+            >
+              Choose status you want to give to the Servive
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label">
+            {{
+              $t("downtime_date_range")
+            }}
+          </label>
+          <div class="col-sm-8">
+            <div class="row">
+              <div class="col-sm-6">
+                <FlatPickr
+                  id="start"
+                  v-model="downtime.start"
+                  type="text"
+                  name="start"
+                  class="form-control form-control-plaintext"
+                  value=""
+                  :config="config"
+                  placeholder="Select Start Date"
+                />
+              </div>
+              <div class="col-sm-6">
+                <FlatPickr
+                  id="end"
+                  v-model="downtime.end"
+                  type="text"
+                  name="end"
+                  class="form-control form-control-plaintext"
+                  value=""
+                  :config="config"
+                  placeholder="Select End Date"
+                />
+              </div>
+            </div>
+            <small
+              class="form-text text-muted"
+            >
+              Enter the Start and End date for which your service will be down/degraded
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <label class="col-sm-4 col-form-label">
+            {{
+              $t("failures")
+            }}
+          </label>
+          <div class="col-sm-8">
+            <input
+              v-model.number="downtime.failures"
+              type="number"
+              name="check_interval"
+              class="form-control"
+              min="0"
+              required
+            >
+            <small
+              class="form-text text-danger"
+            >
+              {{ errors.failures }}
+            </small>
+            <small
+              class="form-text text-muted"
+            >
+              Select the number of failures you want for your service
+            </small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <div class="col-12">
+            <button
+              :disabled="isLoading || !isCreateDowntimeBtnEnabled()"
+              type="submit"
+              class="btn btn-success btn-block"
+              @click.prevent="saveDowntime"
+            >
+              {{ $route.params.id ? $t("downtime_update") : $t("downtime_create") }}
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </form>
 </template>
+
+<script>
+import { mapState } from 'vuex';
+import Api from '../API';
+import FlatPickr from 'vue-flatpickr-component';
+import 'flatpickr/dist/flatpickr.css';
+
+export default {
+    name: 'FormDowntime',
+    components: {
+        FlatPickr,
+    },
+    props: {
+        editDowntime: {
+            type: Object,
+            default: null,
+        }
+    },
+    data: function () {
+        return {
+            isLoading: false,
+            errors: {},
+            downtime: {
+                serviceId: '',
+                subStatus: 'degraded',
+                failures: 20,
+                start: new Date(),
+                end: new Date(),
+            },
+            config: {
+                altFormat: 'D, J M Y, \\at h:iK',
+                altInput: true,
+                enableTime: true,
+                dateFormat: 'Z',
+            },
+        };
+    },
+    computed: {
+        ...mapState({
+            services : function (state) {
+                const { id } = this.$route.params;
+
+                if (!id && state.services.length > 0) {
+                    this.downtime.serviceId = state.services[0].id;
+                }
+
+                return state.services;
+            }
+        }),
+    },
+    mounted: function () {
+        const { service_id, sub_status, failures, start, end } = this.editDowntime;
+  
+        this.downtime = {
+            start,
+            end,
+            failures,
+            serviceId: service_id,
+            subStatus: sub_status
+        };
+            
+    }, 
+    methods: {
+        isCreateDowntimeBtnEnabled: function () {
+            const { serviceId, subStatus, failures, start, end } = this.downtime;
+
+            return serviceId && subStatus && failures && start && end;
+        },
+        checkFormErrors: function (value) {
+            const errors = {};
+
+            // Check for valid positive numbers
+            if (!(/^\d+$/.test(value.failures))) {
+                errors.failures = 'Enter Valid Positve Number without decimal point';
+            }
+
+            return errors;
+        },
+        saveDowntime: async function () {
+            const errors = this.checkFormErrors(this.downtime);
+            const id = this.$route.params.id;
+            
+            // Check of invalid input.
+            if (Object.keys(errors).length > 0) {
+                this.errors = Object.assign({}, errors);
+                return;
+            }
+
+            const { serviceId, subStatus } = this.downtime;
+
+            const downtime = {
+                ...this.downtime,
+                ...(!id && { 'service_id': serviceId }),
+                'sub_status': subStatus,
+            };
+
+            this.isLoading=true;
+            if (id) {
+                await Api.downtime_update({ id, data: downtime });
+            } else {
+                await Api.downtime_create(downtime);
+            }
+            this.isLoading=false;
+
+            this.$router.push('/dashboard/downtimes');
+        }
+    }
+};
+</script>

frontend/src/forms/DowntimeFilters.vue

@@ -29,7 +29,7 @@
           </div>
           <div class="form-group col-md-4">
             <label class="col-form-label">
-              Downtime Date Range
+              {{ $t('downtime_date_range') }}
             </label>
             <div class="form-row">
               <div class="col-sm-6">
@@ -41,7 +41,7 @@
                   class="form-control form-control-plaintext"
                   value=""
                   :config="config"
-                  placeholder="Select Date"
+                  placeholder="Select Start Date"
                 />
               </div>
               <div class="col-sm-6">
@@ -53,7 +53,7 @@
                   class="form-control form-control-plaintext"
                   value=""
                   :config="config"
-                  placeholder="Select Date"
+                  placeholder="Select End Date"
                 />
               </div>
             </div>
@@ -136,7 +136,6 @@ export default {
             config: {
                 altFormat: 'D, J M Y',
                 altInput: true,
-                allowInput: true,
                 dateFormat: 'Z',
                 maxDate: new Date()
             },

frontend/src/languages/english.js

@@ -7,6 +7,10 @@ const english = {
     services: 'Services',
     downtimes: 'Downtimes',
     downtime_info: 'Downtime Info',
+    downtime_status: 'Downtime Status',
+    downtime_date_range: 'Downtime Date Range',
+    downtime_create: 'Create Downtime',
+    downtime_update: 'Update Downtime',
     filters: 'Filters',
     service: 'Service',
     clear: 'Clear',

frontend/src/routes.js

@@ -153,6 +153,13 @@ const routes = [
                 requiresAuth: true,
                 title: 'Statping - Create Downtime',
             }
+        },{
+            path: 'edit_downtime/:id',
+            component: EditDowntime,
+            meta: {
+                requiresAuth: true,
+                title: 'Statping - Update Downtime',
+            }
         },{
             path: 'messages',
             component: DashboardMessages,

frontend/src/store.js

@@ -164,7 +164,7 @@ export default new Vuex.Store({
         },
         async getDowntimes (context, { payload }) {
             const { output } = await Api.downtimes(payload);
-            context.commit('setDowntimes', output);
+            context.commit('setDowntimes', output ?? []);
         },
         async loadCore (context) {
             const [ core, token ] = await Promise.all([ Api.core(), Api.token() ]);