vue

frontend/src/App.vue

@@ -16,7 +16,7 @@ export default {
   },
     computed: {
         ready () {
-
+            return true
         }
     },
     created () {

frontend/src/components/API.js

@@ -20,14 +20,34 @@ class Api {
     return axios.get('/api/services/'+id).then(response => (response.data))
   }
 
+  async service_delete (id) {
+    return axios.delete('/api/services/'+id).then(response => (response.data))
+  }
+
   async groups () {
     return axios.get('/api/groups').then(response => (response.data))
   }
 
+  async group_delete (id) {
+    return axios.delete('/api/groups/'+id).then(response => (response.data))
+  }
+
+  async group_create (data) {
+    return axios.post('/api/groups', data).then(response => (response.data))
+  }
+
   async users () {
     return axios.get('/api/users').then(response => (response.data))
   }
 
+  async user_create (id) {
+    return axios.post('/api/users').then(response => (response.data))
+  }
+
+  async user_delete (id) {
+    return axios.delete('/api/users/'+id).then(response => (response.data))
+  }
+
   async messages () {
     return axios.get('/api/messages').then(response => (response.data))
   }

frontend/src/components/Dashboard/DashboardServices.vue

@@ -34,22 +34,24 @@
             <tbody class="sortable" id="services_table">
 
             <tr v-for="(service, index) in $store.getters.services" v-bind:key="index">
-                <td><span class="drag_icon d-none d-md-inline"><font-awesome-icon icon="bars" /></span> {{service.name}}</td>
+                <td>
+                    <span class="drag_icon d-none d-md-inline"><font-awesome-icon icon="bars" /></span> {{service.name}}
+                </td>
                 <td class="d-none d-md-table-cell">
-                    <div v-if="service.online"><span class="badge badge-success">ONLINE</span><font-awesome-icon class="toggle-service text-success" icon="toggle-on" /></div>
-                    <div v-if="!service.online"><span class="badge badge-success">OFFLINE</span><font-awesome-icon class="toggle-service text-danger" icon="toggle-off" /></div>
+                    <div v-if="service.online"><span class="badge badge-success">ONLINE</span><ToggleSwitch :next="stopChecking" :service="service"/></div>
+                    <div v-if="!service.online"><span class="badge badge-success">OFFLINE</span><ToggleSwitch :next="stopChecking" :service="service"/></div>
                 </td>
                 <td class="d-none d-md-table-cell">
                     <div v-if="service.public"><span class="badge badge-primary">PUBLIC</span></div>
                     <div v-if="!service.public"><span class="badge badge-secondary">PRIVATE</span></div>
                 </td>
                 <td class="d-none d-md-table-cell">
-                    <div v-if="service.group_id !== 0"><span class="badge badge-secondary">{{$store.getters.groupById(service.group_id).name}}</span></div>
+                    <div v-if="service.group_id !== 0"><span class="badge badge-secondary">{{serviceGroup(service)}}</span></div>
                 </td>
                 <td class="text-right">
                     <div class="btn-group">
                         <router-link :to="{path: `/service/${service.id}`, params: {service: service} }" class="btn btn-outline-secondary"><i class="fas fa-chart-area"></i> View</router-link>
-                        <a href="api/services/1" class="ajax_delete btn btn-danger" data-method="DELETE" data-obj="service_1" data-id="1">
+                        <a @click="deleteService(service)" href="#" class="btn btn-danger">
                             <font-awesome-icon icon="times" />
                         </a>
                     </div>
@@ -85,7 +87,7 @@
                 <td class="text-right">
                     <div class="btn-group">
                         <a href="group/2" class="btn btn-outline-secondary"> <font-awesome-icon icon="chart-area" /> Edit</a>
-                        <a href="api/groups/2" class="btn btn-danger">
+                        <a @click="deleteGroup(group)" href="#" class="btn btn-danger">
                             <font-awesome-icon icon="times" />
                         </a>
                     </div>
@@ -99,7 +101,7 @@
 
         <div class="card">
             <div class="card-body">
-                <FormGroup :group="null"/>
+                <FormGroup/>
             </div>
         </div>
 
@@ -109,10 +111,15 @@
 
 <script>
 import FormGroup from "../../forms/Group";
+import Api from "../../components/API";
+import ToggleSwitch from "../../forms/ToggleSwitch";
 
 export default {
   name: 'DashboardServices',
-  components: {FormGroup},
+  components: {
+    ToggleSwitch,
+    FormGroup
+  },
   data () {
     return {
 
@@ -122,7 +129,32 @@ export default {
 
   },
   methods: {
-
+    stopChecking(s) {
+      alert(JSON.stringify(s))
+    },
+    serviceGroup(s) {
+      let group = this.$store.getters.groupById(s.group_id)
+      if (group) {
+        return group.name
+      }
+      return ""
+    },
+    async deleteGroup(g) {
+      let c = confirm(`Are you sure you want to delete '${g.name}'?`)
+      if (c) {
+        await Api.group_delete(g.id)
+        const groups = await Api.groups()
+        this.$store.commit('setGroups', groups)
+      }
+    },
+    async deleteService(s) {
+      let c = confirm(`Are you sure you want to delete '${s.name}'?`)
+      if (c) {
+        await Api.service_delete(s.id)
+        const services = await Api.services()
+        this.$store.commit('setServices', services)
+      }
+    }
   }
 }
 </script>

frontend/src/components/Dashboard/DashboardUsers.vue

@@ -3,10 +3,10 @@
         <h1 class="text-black-50">Users</h1>
         <table class="table table-striped">
             <thead>
-            <tr>
-                <th scope="col">Username</th>
-                <th scope="col"></th>
-            </tr>
+                <tr>
+                    <th scope="col">Username</th>
+                    <th scope="col"></th>
+                </tr>
             </thead>
             <tbody id="users_table">
 
@@ -15,11 +15,10 @@
                 <td class="text-right">
                     <div class="btn-group"><font-awesome-icon icon="user-edit" />
                         <a href="user/1" class="btn btn-outline-secondary"><i class="fas fa-user-edit"></i> Edit</a>
-                        <a href="api/users/1" class="ajax_delete btn btn-danger"><i class="fas fa-times"></i></a>
+                        <a @click="deleteUser(user)" href="#" class="btn btn-danger"><font-awesome-icon icon="times" /></a>
                     </div>
                 </td>
             </tr>
-
             </tbody>
         </table>
 
@@ -27,45 +26,7 @@
 
         <div class="card">
             <div class="card-body">
-                <form class="ajax_form" action="api/users" data-redirect="users" method="POST">
-                    <div class="form-group row">
-                        <label for="username" class="col-sm-4 col-form-label">Username</label>
-                        <div class="col-6 col-md-4">
-                            <input type="text" name="username" class="form-control" value="" id="username" placeholder="Username" required autocorrect="off" autocapitalize="none">
-                        </div>
-                        <div class="col-6 col-md-4">
-                          <span class="switch">
-                            <input type="checkbox" name="admin" class="switch" id="switch-normal">
-                            <label for="switch-normal">Administrator</label>
-                            <input type="hidden" name="admin" id="switch-normal-value" value="false">
-                          </span>
-                        </div>
-                    </div>
-                    <div class="form-group row">
-                        <label for="email" class="col-sm-4 col-form-label">Email Address</label>
-                        <div class="col-sm-8">
-                            <input type="email" name="email" class="form-control" id="email" value="" placeholder="user@domain.com" required autocapitalize="none" spellcheck="false">
-                        </div>
-                    </div>
-                    <div class="form-group row">
-                        <label for="password" class="col-sm-4 col-form-label">Password</label>
-                        <div class="col-sm-8">
-                            <input type="password" name="password" class="form-control" id="password"  placeholder="Password" required>
-                        </div>
-                    </div>
-                    <div class="form-group row">
-                        <label for="password_confirm" class="col-sm-4 col-form-label">Confirm Password</label>
-                        <div class="col-sm-8">
-                            <input type="password" name="password_confirm" class="form-control" id="password_confirm"  placeholder="Confirm Password" required>
-                        </div>
-                    </div>
-                    <div class="form-group row">
-                        <div class="col-sm-12">
-                            <button type="submit" class="btn btn-primary btn-block">Create User</button>
-                        </div>
-                    </div>
-                    <div class="alert alert-danger d-none" id="alerter" role="alert"></div>
-                </form>
+
             </div>
         </div>
     </div>
@@ -78,13 +39,39 @@
   name: 'DashboardUsers',
   data () {
     return {
+      user: {
+        username: "",
+        admin: false,
+        email: "",
+        password: "",
+        confirm_password: ""
+      }
     }
   },
   created() {
 
   },
   methods: {
-
+    async saveUser(e) {
+      e.preventDefault();
+      let u = this.user;
+      if (u.password === u.confirm_password) {
+        alert("Both password do not match")
+        return
+      }
+      const data = {name: this.group.name, public: this.group.public}
+      await Api.user_create(data)
+      const users = await Api.users()
+      this.$store.commit('setUsers', users)
+    },
+    async deleteUser(u) {
+      let c = confirm(`Are you sure you want to delete user '${u.username}'?`)
+      if (c) {
+        await Api.user_delete(u.id)
+        const users = await Api.users()
+        this.$store.commit('setUsers', users)
+      }
+    }
   }
 }
 </script>

frontend/src/forms/Group.vue

@@ -1,5 +1,5 @@
 <template>
-    <form @submit="saveGroup" action="api/groups" method="POST">
+    <form @submit="saveGroup">
         <div class="form-group row">
             <label for="title" class="col-sm-4 col-form-label">Group Name</label>
             <div class="col-sm-8">
@@ -17,7 +17,7 @@
         </div>
         <div class="form-group row">
             <div class="col-sm-12">
-                <button v-on:click="saveGroup" type="submit" class="btn btn-primary btn-block">Create Group</button>
+                <button @click="saveGroup" type="submit" class="btn btn-primary btn-block">Create Group</button>
             </div>
         </div>
         <div class="alert alert-danger d-none" id="alerter" role="alert"></div>
@@ -25,14 +25,19 @@
 </template>
 
 <script>
+import Api from "../components/API";
+
 export default {
   name: 'FormGroup',
   props: {
-    group: Object
+
   },
   data () {
     return {
-      group: {}
+      group: {
+        name: "",
+        public: true
+      }
     }
   },
   mounted() {
@@ -41,9 +46,13 @@ export default {
     }
   },
   methods: {
-    saveGroup: {
-
-    }
+    async saveGroup(e) {
+      e.preventDefault();
+      const data = {name: this.group.name, public: this.group.public}
+      await Api.group_create(data)
+      const groups = await Api.groups()
+      this.$store.commit('setGroups', groups)
+    },
   }
 }
 </script>

frontend/src/forms/ToggleSwitch.vue

@@ -0,0 +1,42 @@
+<template>
+    <font-awesome-icon @click="toggleChecking" class="toggle-service text-success" icon="toggle-on" />
+</template>
+
+<script>
+import Api from "../components/API";
+
+export default {
+  name: 'ToggleSwitch',
+  props: {
+    next: {
+      type: Function,
+      required: true
+    },
+    service: {
+      type: Object,
+      required: true
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    toggleChecking() {
+      let c = confirm(`Are you sure you want to stop monitoring '${this.service.name}'?`)
+      if (c) {
+
+      }
+      this.props.next(this.props.service)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

frontend/src/forms/User.vue

@@ -0,0 +1,82 @@
+<template>
+    <form @submit="saveUser">
+        <div class="form-group row">
+            <label class="col-sm-4 col-form-label">Username</label>
+            <div class="col-6 col-md-4">
+                <input v-model="user.username" type="text" class="form-control" placeholder="Username" required autocorrect="off" autocapitalize="none">
+            </div>
+            <div class="col-6 col-md-4">
+                          <span class="switch">
+                            <input type="checkbox" name="admin" class="switch" id="switch-normal">
+                            <label for="switch-normal">Administrator</label>
+                            <input v-model="user.admin" type="hidden" name="admin" id="switch-normal-value" value="false">
+                          </span>
+            </div>
+        </div>
+        <div class="form-group row">
+            <label for="email" class="col-sm-4 col-form-label">Email Address</label>
+            <div class="col-sm-8">
+                <input v-model="user.email" type="email" name="email" class="form-control" id="email" value="" placeholder="user@domain.com" required autocapitalize="none" spellcheck="false">
+            </div>
+        </div>
+        <div class="form-group row">
+            <label for="password" class="col-sm-4 col-form-label">Password</label>
+            <div class="col-sm-8">
+                <input v-model="user.password" type="password" name="password" class="form-control" id="password"  placeholder="Password" required>
+            </div>
+        </div>
+        <div class="form-group row">
+            <label for="password_confirm" class="col-sm-4 col-form-label">Confirm Password</label>
+            <div class="col-sm-8">
+                <input v-model="user.confirm_password" type="password" name="password_confirm" class="form-control" id="password_confirm"  placeholder="Confirm Password" required>
+            </div>
+        </div>
+        <div class="form-group row">
+            <div class="col-sm-12">
+                <button @click="saveUser" class="btn btn-primary btn-block">Create User</button>
+            </div>
+        </div>
+        <div class="alert alert-danger d-none" id="alerter" role="alert"></div>
+    </form>
+</template>
+
+<script>
+import Api from "../components/API";
+
+export default {
+  name: 'FormUser',
+  props: {
+
+  },
+  data () {
+    return {
+      user: {
+        username: "",
+        admin: false,
+        email: "",
+        password: "",
+        confirm_password: ""
+      }
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    saveUser () {
+
+    },
+    async saveGroup(e) {
+      e.preventDefault();
+      const data = {name: this.group.name, public: this.group.public}
+      await Api.group_create(data)
+      const groups = await Api.groups()
+      this.$store.commit('setGroups', groups)
+    },
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>