vue

frontend/package.json

@@ -10,6 +10,11 @@
   },
   "dependencies": {
     "@babel/polyfill": "~7.2",
+    "@fortawesome/fontawesome-free-solid": "^5.1.0-3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-brands-svg-icons": "^5.12.0",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/vue-fontawesome": "^0.1.9",
     "apexcharts": "^3.15.0",
     "axios": "^0.19.1",
     "core-js": "^3.4.4",

frontend/src/components/Dashboard/DashboardServices.vue

@@ -34,16 +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"><i class="fas fa-bars"></i></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"><span class="badge badge-success">ONLINE</span>
+                <td class="d-none d-md-table-cell">
-                    <i class="toggle-service fas fa-toggle-on text-success" data-online="true" data-id="1"></i>
+                    <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>
+                </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>
                 </td>
-                <td class="d-none d-md-table-cell"><span class="badge badge-primary">PUBLIC</span></td>
-                <td class="d-none d-md-table-cell"><span class="badge badge-secondary">Main Services</span></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"><i class="fas fa-times"></i></a>
+                        <a href="api/services/1" class="ajax_delete btn btn-danger" data-method="DELETE" data-obj="service_1" data-id="1">
+                            <font-awesome-icon icon="times" />
+                        </a>
                     </div>
                 </td>
             </tr>
@@ -67,14 +75,19 @@
             </thead>
             <tbody class="sortable_groups" id="groups_table">
 
-            <tr v-for="(group, index) in $store.getters.groups" v-bind:key="index">
+            <tr v-for="(group, index) in $store.getters.cleanGroups()" v-bind:key="index">
-                <td><span class="drag_icon d-none d-md-inline"><i class="fas fa-bars"></i></span>{{group.name}}</td>
+                <td><span class="drag_icon d-none d-md-inline"><font-awesome-icon icon="bars" /></span> {{group.name}}</td>
-                <td></td>
+                <td>{{$store.getters.servicesInGroup(group.id).length}}</td>
-                <td><span class="badge badge-secondary">PRIVATE</span></td>
+                <td>
+                    <span v-if="group.public" class="badge badge-primary">PUBLIC</span>
+                    <span v-if="!group.public" class="badge badge-secondary">PRIVATE</span>
+                </td>
                 <td class="text-right">
                     <div class="btn-group">
-                        <a href="group/2" class="btn btn-outline-secondary"><i class="fas fa-chart-area"></i> Edit</a>
+                        <a href="group/2" class="btn btn-outline-secondary"> <font-awesome-icon icon="chart-area" /> Edit</a>
-                        <a href="api/groups/2" class="ajax_delete btn btn-danger" data-method="DELETE" data-obj="group_2" data-id="2"><i class="fas fa-times"></i></a>
+                        <a href="api/groups/2" class="btn btn-danger">
+                            <font-awesome-icon icon="times" />
+                        </a>
                     </div>
                 </td>
             </tr>
@@ -82,36 +95,11 @@
             </tbody>
         </table>
 
-
         <h1 class="text-muted mt-5">Create Group</h1>
 
         <div class="card">
             <div class="card-body">
-
+                <FormGroup :group="null"/>
-                <form class="ajax_form" action="api/groups" data-redirect="services" method="POST">
-                    <div class="form-group row">
-                        <label for="title" class="col-sm-4 col-form-label">Group Name</label>
-                        <div class="col-sm-8">
-                            <input type="text" name="name" class="form-control" value="" id="title" placeholder="Group Name" required>
-                        </div>
-                    </div>
-                    <div class="form-group row">
-                        <label for="switch-group-public" class="col-sm-4 col-form-label">Public Group</label>
-                        <div class="col-8 mt-1">
-            <span class="switch float-left">
-                <input type="checkbox" name="public" class="switch" id="switch-group-public" >
-                <label for="switch-group-public">Show group services to the public</label>
-                <input type="hidden" name="public" id="switch-group-public-value" value="false">
-            </span>
-                        </div>
-                    </div>
-                    <div class="form-group row">
-                        <div class="col-sm-12">
-                            <button 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>
-                </form>
             </div>
         </div>
 
@@ -120,9 +108,11 @@
 </template>
 
 <script>
+import FormGroup from "../../forms/Group";
 
 export default {
   name: 'DashboardServices',
+  components: {FormGroup},
   data () {
     return {
 

frontend/src/components/Dashboard/DashboardUsers.vue

@@ -1,20 +1,3 @@
-<!--
-  - Statup
-  - Copyright (C) 2020.  Hunter Long and the project contributors
-  - Written by Hunter Long <info@socialeck.com> and the project contributors
-  -
-  - https://github.com/hunterlong/statup
-  -
-  - The licenses for most software and other practical works are designed
-  - to take away your freedom to share and change the works.  By contrast,
-  - the GNU General Public License is intended to guarantee your freedom to
-  - share and change all versions of a program--to make sure it remains free
-  - software for all its users.
-  -
-  - You should have received a copy of the GNU General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -->
-
 <template>
     <div class="col-12">
         <h1 class="text-black-50">Users</h1>
@@ -30,7 +13,7 @@
             <tr v-for="(user, index) in $store.getters.users" v-bind:key="index" >
                 <td>{{user.username}}</td>
                 <td class="text-right">
-                    <div class="btn-group">
+                    <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>
                     </div>

frontend/src/forms/Group.vue

@@ -0,0 +1,53 @@
+<template>
+    <form @submit="saveGroup" action="api/groups" method="POST">
+        <div class="form-group row">
+            <label for="title" class="col-sm-4 col-form-label">Group Name</label>
+            <div class="col-sm-8">
+                <input v-model="group.name" type="text" name="name" class="form-control" value="" id="title" placeholder="Group Name" required>
+            </div>
+        </div>
+        <div class="form-group row">
+            <label for="switch-group-public" class="col-sm-4 col-form-label">Public Group</label>
+            <div class="col-8 mt-1">
+            <span class="switch float-left">
+                <input v-model="group.public" type="checkbox" name="public" class="switch" id="switch-group-public" >
+                <label for="switch-group-public">Show group services to the public</label>
+            </span>
+            </div>
+        </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>
+            </div>
+        </div>
+        <div class="alert alert-danger d-none" id="alerter" role="alert"></div>
+    </form>
+</template>
+
+<script>
+export default {
+  name: 'FormGroup',
+  props: {
+    group: Object
+  },
+  data () {
+    return {
+      group: {}
+    }
+  },
+  mounted() {
+    if (this.props.group) {
+      this.group = this.props.group
+    }
+  },
+  methods: {
+    saveGroup: {
+
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

frontend/src/main.js

@@ -4,6 +4,15 @@ import VueRouter from 'vue-router'
 import App from '@/App.vue'
 import store from '@/store'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
+import { fas } from '@fortawesome/fontawesome-free-solid';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+library.add(fas)
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+
+
 const Index = () => import("@/pages/Index");
 const Dashboard = () => import("@/pages/Dashboard");
 const Login = () => import("@/pages/Login");
@@ -14,6 +23,7 @@ const Service = () => import("@/pages/Service");
 require("@/assets/css/bootstrap.min.css")
 require("@/assets/css/base.css")
 
+
 // require("./assets/js/bootstrap.min")
 // require("./assets/js/flatpickr")
 // require("./assets/js/inputTags.min")

frontend/src/store.js

@@ -41,6 +41,9 @@ export default new Vuex.Store({
         groupById: (state) => (id) => {
             return state.groups.find(g => g.id === id)
         },
+        cleanGroups: (state) => () => {
+          return state.groups.filter(g => g.name !== '')
+        },
         userById: (state) => (id) => {
             return state.users.find(u => u.id === id)
         },

frontend/yarn.lock

@@ -835,6 +835,49 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-common-types@^0.1.2-1":
+  version "0.1.7"
+  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.1.7/fontawesome-common-types-0.1.7.tgz#4336c4b06d0b5608ff1215464b66fcf9f4795284"
+  integrity sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg==
+
+"@fortawesome/fontawesome-common-types@^0.2.26":
+  version "0.2.26"
+  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.26/fontawesome-common-types-0.2.26.tgz#6e0b13a752676036f8196f8a1500d53a27b4adc1"
+  integrity sha512-CcM/fIFwZlRdiWG/25xE/wHbtyUuCtqoCTrr6BsWw7hH072fR++n4L56KPydAr3ANgMJMjT8v83ZFIsDc7kE+A==
+
+"@fortawesome/fontawesome-free-solid@^5.1.0-3":
+  version "5.1.0-3"
+  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-free-solid/-/5.1.0-3/fontawesome-free-solid-5.1.0-3.tgz#60e6e1cc7588b933a570bcfc9eb78b9cadda451a"
+  integrity sha512-E9b+bU91/4538vBvAeaTsvt2r9wTYEoKniuhbq8+RNI08whrUs1RGeaCzyh7ON0rrbJZz/Ae3g8EuCmfsYwfzQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.1.2-1"
+
+"@fortawesome/fontawesome-svg-core@^1.2.26":
+  version "1.2.26"
+  resolved "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.26/fontawesome-svg-core-1.2.26.tgz#671569271d6b532cdea5e3deb8ff16f8b7ac251d"
+  integrity sha512-3Dfd/v2IztP1TxKOxZiB5+4kaOZK9mNy0KU1vVK7nFlPWz3gzxrCWB+AloQhQUoJ8HhGqbzjliK89Vl7PExGbw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/free-brands-svg-icons@^5.12.0":
+  version "5.12.0"
+  resolved "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/5.12.0/free-brands-svg-icons-5.12.0.tgz#b0c78627f811ac030ee0ac88df376567cf74119d"
+  integrity sha512-50uCFzVUki3wfmFmrMNLFhOt8dP6YZ53zwR4dK9FR7Lwq1IVHXnSBb8MtGLe3urLJ2sA+CSu7Pc7s3i6/zLxmA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/free-solid-svg-icons@^5.12.0":
+  version "5.12.0"
+  resolved "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.12.0/free-solid-svg-icons-5.12.0.tgz#8decac5844e60453cc0c7c51437d1461df053a35"
+  integrity sha512-CnpsWs6GhTs9ekNB3d8rcO5HYqRkXbYKf2YNiAlTWbj5eVlPqsd/XH1F9If8jkcR1aegryAbln/qYeKVZzpM0g==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.26"
+
+"@fortawesome/vue-fontawesome@^0.1.9":
+  version "0.1.9"
+  resolved "https://npm.fontawesome.com/@fortawesome/vue-fontawesome/-/0.1.9/vue-fontawesome-0.1.9.tgz#d3af6d4e50f337327de90447fe35fa1e117a2fbe"
+  integrity sha512-h/emhmZz+DfB2zOGLWawNwXq82UYhn9waTfUjLLmeaIqtnIyNt6kYlpQT/vzJjLZRDRvY2IEJAh1di5qKpKVpA==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"