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

Merge pull request #588 from kvpt/service 

Fix service handling in announcements page
pull/626/head
Hunter Long 2020-06-04 03:20:58 -07:00 committed by GitHub
parent 90eedb7ff7 5c15c20392
commit eddf378938
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 102 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/components/Dashboard/DashboardMessages.vue
View File

@ -1,40 +1,37 @@
<template> <template>
<div class="col-12"> <div class="col-12">
<div class="card contain-card text-black-50 bg-white mb-4"> <div class="card contain-card text-black-50 bg-white mb-4">
<div class="card-header">Announcements</div> <div class="card-header">Announcements</div>
<div class="card-body pt-0"> <div class="card-body pt-0">
<table class="table table-striped"> <table class="table table-striped">
<thead> <thead>
<tr> <tr>
<th scope="col">Title</th> <th scope="col">Title</th>
<th scope="col" class="d-none d-md-table-cell">Service</th> <th scope="col" class="d-none d-md-table-cell">Service</th>
<th scope="col" class="d-none d-md-table-cell">Begins</th> <th scope="col" class="d-none d-md-table-cell">Begins</th>
<th scope="col"></th> <th scope="col"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="message in $store.getters.messages" v-bind:key="message.id">
<tr v-for="(message, index) in $store.getters.messages" v-bind:key="index"> <td>{{message.title}}</td>
<td>{{message.title}}</td> <td class="d-none d-md-table-cell">
<td class="d-none d-md-table-cell"> <router-link :to="serviceLink(service(message.service))">{{serviceName(service(message.service))}}</router-link>
<router-link :to="serviceLink(message.service)">{{service(message.service)}}</router-link> </td>
</td> <td class="d-none d-md-table-cell">{{niceDate(message.start_on)}}</td>
<td class="d-none d-md-table-cell">{{niceDate(message.start_on)}}</td> <td class="text-right">
<td class="text-right"> <div v-if="$store.state.admin" class="btn-group">
<div v-if="$store.state.admin" class="btn-group"> <a @click.prevent="editMessage(message, edit)" href="#" class="btn btn-outline-secondary"><i class="fas fa-exclamation-triangle"></i> Edit</a>
<a @click.prevent="editMessage(message, edit)" href="#" class="btn btn-outline-secondary"><i class="fas fa-exclamation-triangle"></i> Edit</a> <a @click.prevent="deleteMessage(message)" href="#" class="btn btn-danger"><font-awesome-icon icon="times" /></a>
<a @click.prevent="deleteMessage(message)" href="#" class="btn btn-danger"><font-awesome-icon icon="times" /></a> </div>
</div> </td>
</td>
</tr> </tr>
</tbody>
</tbody>
</table> </table>
</div>
</div> </div>
</div> <FormMessage v-if="$store.state.admin" :edit="editChange" :in_message="message"/>
</div>
<FormMessage v-if="$store.state.admin" :edit="editChange" :in_message="message"/>
</div>
</template> </template>
<script> <script>
@ -60,8 +57,10 @@
this.edit = !mode this.edit = !mode
}, },
service (id) { service (id) {
const s = this.$store.getters.serviceById(id) || {} return this.$store.getters.serviceById(id) || {}
return s.name || "Global Message" },
serviceName (service) {
return service.name || "Global Message"
}, },
async deleteMessage(m) { async deleteMessage(m) {
let c = confirm(`Are you sure you want to delete message '${m.title}'?`) let c = confirm(`Are you sure you want to delete message '${m.title}'?`)

143
frontend/src/forms/Message.vue
View File

@ -1,103 +1,102 @@
<template> <template>
<div> <div>
<div class="card contain-card text-black-50 bg-white mb-5"> <div class="card contain-card text-black-50 bg-white mb-5">
<div class="card-header">{{message.id ? `Update ${message.title}` : "Create Announcement"}} <div class="card-header">{{message.id ? `Update ${message.title}` : "Create Announcement"}}
<transition name="slide-fade">
<transition name="slide-fade"> <button @click="removeEdit" v-if="message.id" class="btn btn-sm float-right btn-danger btn-sm">Close</button>
<button @click="removeEdit" v-if="message.id" class="btn btn-sm float-right btn-danger btn-sm">Close</button> </transition>
</transition> </div>
</div> <div class="card-body">
<div class="card-body"> <form @submit="saveMessage">
<form @submit="saveMessage"> <div class="form-group row">
<div class="form-group row">
<label class="col-sm-4 col-form-label">Title</label> <label class="col-sm-4 col-form-label">Title</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input v-model="message.title" type="text" name="title" class="form-control" id="title" placeholder="Announcement Title" required> <input v-model="message.title" type="text" name="title" class="form-control" id="title" placeholder="Announcement Title" required>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-4 col-form-label">Description</label> <label class="col-sm-4 col-form-label">Description</label>
<div class="col-sm-8"> <div class="col-sm-8">
<textarea v-model="message.description" rows="5" name="description" class="form-control" id="description" required></textarea> <textarea v-model="message.description" rows="5" name="description" class="form-control" id="description" required></textarea>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-4 col-form-label">Service</label> <label class="col-sm-4 col-form-label">Service</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select v-model="message.service_id" name="service_id" class="form-control"> <select v-model="message.service" name="service_id" class="form-control">
<option :value="0">Global Announcement</option> <option :value="0">Global Announcement</option>
<option v-for="(service, i) in $store.getters.services" :value="service.id" >{{service.name}}</option> <option v-for="service in $store.getters.services" :value="service.id" v-bind:key="service.id" >{{service.name}}</option>
</select> </select>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-4 col-form-label">Announcement Date Range</label> <label class="col-sm-4 col-form-label">Announcement Date Range</label>
<div class="col-sm-4"> <div class="col-sm-4">
<flatPickr v-model="message.start_on" @on-change="startChange" :config="config" type="text" name="start_on" class="form-control form-control-plaintext" id="start_on" value="0001-01-01T00:00:00Z" required /> <flatPickr v-model="message.start_on" @on-change="startChange" :config="config" type="text" name="start_on" class="form-control form-control-plaintext" id="start_on" value="0001-01-01T00:00:00Z" required />
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<flatPickr v-model="message.end_on" @on-change="endChange" :config="config" type="text" name="end_on" class="form-control form-control-plaintext" id="end_on" value="0001-01-01T00:00:00Z" required /> <flatPickr v-model="message.end_on" @on-change="endChange" :config="config" type="text" name="end_on" class="form-control form-control-plaintext" id="end_on" value="0001-01-01T00:00:00Z" required />
</div> </div>
</div> </div>
<div v-show="this.service === null" class="form-group row"> <div v-show="this.service === null" class="form-group row">
<label for="service_id" class="col-sm-4 col-form-label">Service</label> <label for="service_id" class="col-sm-4 col-form-label">Service</label>
<div class="col-sm-8"> <div class="col-sm-8">
<select v-model="message.service_id" class="form-control" name="service" id="service_id"> <select v-model="message.service" class="form-control" name="service" id="service_id">
<option :value="0">Global Message</option> <option :value="0">Global Message</option>
<option v-for="(service, index) in $store.getters.services" :value="service.id" v-bind:key="index" >{{service.name}}</option> <option v-for="service in $store.getters.services" :value="service.id" v-bind:key="service.id">{{service.name}}</option>
</select> </select>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<label for="notify_method" class="col-sm-4 col-form-label">Notify Users</label> <label for="notify_method" class="col-sm-4 col-form-label">Notify Users</label>
<div class="col-sm-8"> <div class="col-sm-8">
<span @click="message.notify = !!message.notify" class="switch"> <span @click="message.notify = !!message.notify" class="switch">
<input v-model="message.notify" type="checkbox" class="switch" id="switch-normal"> <input v-model="message.notify" type="checkbox" class="switch" id="switch-normal">
<label for="switch-normal">Notify Users Before Scheduled Time</label> <label for="switch-normal">Notify Users Before Scheduled Time</label>
</span> </span>
</div> </div>
</div> </div>
<div v-if="message.notify" class="form-group row"> <div v-if="message.notify" class="form-group row">
<label for="notify_method" class="col-sm-4 col-form-label">Notification Method</label> <label for="notify_method" class="col-sm-4 col-form-label">Notification Method</label>
<div class="col-sm-8"> <div class="col-sm-8">
<input v-model="message.notify_method" type="text" name="notify_method" class="form-control" id="notify_method" value="" placeholder="email"> <input v-model="message.notify_method" type="text" name="notify_method" class="form-control" id="notify_method" value="" placeholder="email">
</div> </div>
</div> </div>
<div v-if="message.notify" class="form-group row"> <div v-if="message.notify" class="form-group row">
<label for="notify_before" class="col-sm-4 col-form-label">Notify Before</label> <label for="notify_before" class="col-sm-4 col-form-label">Notify Before</label>
<div class="col-sm-8"> <div class="col-sm-8">
<div class="form-inline"> <div class="form-inline">
<input v-model="message.notify_before" type="number" name="notify_before" class="col-4 form-control" id="notify_before"> <input v-model="message.notify_before" type="number" name="notify_before" class="col-4 form-control" id="notify_before">
<select v-model="message.notify_before_scale" class="ml-2 col-7 form-control" name="notify_before_scale" id="notify_before_scale"> <select v-model="message.notify_before_scale" class="ml-2 col-7 form-control" name="notify_before_scale" id="notify_before_scale">
<option value="minute">Minutes</option> <option value="minute">Minutes</option>
<option value="hour">Hours</option> <option value="hour">Hours</option>
<option value="day">Days</option> <option value="day">Days</option>
</select> </select>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
<div class="col-sm-12"> <div class="col-sm-12">
<button @click="saveMessage" <button @click="saveMessage"
:disabled="!message.title || !message.description" :disabled="!message.title || !message.description"
type="submit" class="btn btn-block" :class="{'btn-primary': !message.id, 'btn-secondary': message.id}"> type="submit" class="btn btn-block" :class="{'btn-primary': !message.id, 'btn-secondary': message.id}">
{{message.id ? "Edit Message" : "Create Message"}} {{message.id ? "Edit Message" : "Create Message"}}
</button> </button>
</div>
</div>
<div class="alert alert-danger d-none" id="alerter" role="alert"></div>
</form>
</div> </div>
</div>
<div class="alert alert-danger d-none" id="alerter" role="alert"></div>
</form>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@ -148,18 +147,18 @@
this.message = this.in_message this.message = this.in_message
} }
}, },
mounted () { mounted () {
if (this.service) { if (this.service) {
this.service_id = this.service.id this.service_id = this.service.id
} }
}, },
methods: { methods: {
startChange(e) { startChange(e) {
window.console.log(e)
},
endChange(e) {
window.console.log(e) window.console.log(e)
}, },
endChange(e) {
window.console.log(e)
},
removeEdit() { removeEdit() {
this.message = {} this.message = {}
this.edit(false) this.edit(false)

5
frontend/src/mixin.js
View File

@ -92,12 +92,15 @@ export default Vue.mixin({
if (service.permalink) { if (service.permalink) {
service = this.$store.getters.serviceByPermalink(service.permalink) service = this.$store.getters.serviceByPermalink(service.permalink)
} }
if (service===undefined) { if (service===undefined || this.isEmptyObject(service)) {
return `/service/0` return `/service/0`
} }
let link = service.permalink ? service.permalink : service.id let link = service.permalink ? service.permalink : service.id
return `/service/${link}` return `/service/${link}`
}, },
isEmptyObject(obj) {
return Object.keys(obj).length === 0 && obj.constructor === Object
},
isInt(n) { isInt(n) {
return n % 1 === 0; return n % 1 === 0;
}, },