github
/
statping
mirror of https://github.com/statping/statping
1
0
Fork 0
Code Issues Releases Wiki Activity

vue

pull/429/head
hunterlong 2020-01-17 01:43:10 -08:00
parent d7fbc91b78
commit c342b80e93
7 changed files with 143 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/package.json
View File

@ -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",

66
frontend/src/components/Dashboard/DashboardServices.vue
View File

@ -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 class="d-none d-md-table-cell"><span class="badge badge-success">ONLINE</span>
<i class="toggle-service fas fa-toggle-on text-success" data-online="true" data-id="1"></i>
<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>
</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">
<td><span class="drag_icon d-none d-md-inline"><i class="fas fa-bars"></i></span>{{group.name}}</td>
<td></td>
<td><span class="badge badge-secondary">PRIVATE</span></td>
<tr v-for="(group, index) in $store.getters.cleanGroups()" v-bind:key="index">
<td><span class="drag_icon d-none d-md-inline"><font-awesome-icon icon="bars" /></span> {{group.name}}</td>
<td>{{$store.getters.servicesInGroup(group.id).length}}</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="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="group/2" class="btn btn-outline-secondary"> <font-awesome-icon icon="chart-area" /> Edit</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">
<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>
<FormGroup :group="null"/>
</div>
</div>
@ -120,9 +108,11 @@
</template>
<script>
import FormGroup from "../../forms/Group";
export default {
name: 'DashboardServices',
components: {FormGroup},
data () {
return {

19
frontend/src/components/Dashboard/DashboardUsers.vue
View File

@ -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>

53
frontend/src/forms/Group.vue Normal file
View File

@ -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>

10
frontend/src/main.js
View File

@ -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")

3
frontend/src/store.js
View File

@ -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)
},

43
frontend/yarn.lock
View File

@ -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"