mirror of https://github.com/statping/statping
commit
eddf378938
|
@ -1,40 +1,37 @@
|
|||
<template>
|
||||
<div class="col-12">
|
||||
<div class="card contain-card text-black-50 bg-white mb-4">
|
||||
<div class="card-header">Announcements</div>
|
||||
<div class="card-body pt-0">
|
||||
<div class="col-12">
|
||||
<div class="card contain-card text-black-50 bg-white mb-4">
|
||||
<div class="card-header">Announcements</div>
|
||||
<div class="card-body pt-0">
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<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">Begins</th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr v-for="(message, index) in $store.getters.messages" v-bind:key="index">
|
||||
<td>{{message.title}}</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<router-link :to="serviceLink(message.service)">{{service(message.service)}}</router-link>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">{{niceDate(message.start_on)}}</td>
|
||||
<td class="text-right">
|
||||
<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="deleteMessage(message)" href="#" class="btn btn-danger"><font-awesome-icon icon="times" /></a>
|
||||
</div>
|
||||
</td>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="message in $store.getters.messages" v-bind:key="message.id">
|
||||
<td>{{message.title}}</td>
|
||||
<td class="d-none d-md-table-cell">
|
||||
<router-link :to="serviceLink(service(message.service))">{{serviceName(service(message.service))}}</router-link>
|
||||
</td>
|
||||
<td class="d-none d-md-table-cell">{{niceDate(message.start_on)}}</td>
|
||||
<td class="text-right">
|
||||
<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="deleteMessage(message)" href="#" class="btn btn-danger"><font-awesome-icon icon="times" /></a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
|
@ -60,8 +57,10 @@
|
|||
this.edit = !mode
|
||||
},
|
||||
service (id) {
|
||||
const s = this.$store.getters.serviceById(id) || {}
|
||||
return s.name || "Global Message"
|
||||
return this.$store.getters.serviceById(id) || {}
|
||||
},
|
||||
serviceName (service) {
|
||||
return service.name || "Global Message"
|
||||
},
|
||||
async deleteMessage(m) {
|
||||
let c = confirm(`Are you sure you want to delete message '${m.title}'?`)
|
||||
|
|
|
@ -1,103 +1,102 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="card contain-card text-black-50 bg-white mb-5">
|
||||
<div class="card-header">{{message.id ? `Update ${message.title}` : "Create Announcement"}}
|
||||
|
||||
<transition name="slide-fade">
|
||||
<button @click="removeEdit" v-if="message.id" class="btn btn-sm float-right btn-danger btn-sm">Close</button>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form @submit="saveMessage">
|
||||
<div class="form-group row">
|
||||
<div class="card-header">{{message.id ? `Update ${message.title}` : "Create Announcement"}}
|
||||
<transition name="slide-fade">
|
||||
<button @click="removeEdit" v-if="message.id" class="btn btn-sm float-right btn-danger btn-sm">Close</button>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form @submit="saveMessage">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">Title</label>
|
||||
<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 class="form-group row">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">Description</label>
|
||||
<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 class="form-group row">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-4 col-form-label">Service</label>
|
||||
<div class="col-sm-8">
|
||||
<select v-model="message.service_id" name="service_id" class="form-control">
|
||||
<option :value="0">Global Announcement</option>
|
||||
<option v-for="(service, i) in $store.getters.services" :value="service.id" >{{service.name}}</option>
|
||||
</select>
|
||||
<select v-model="message.service" name="service_id" class="form-control">
|
||||
<option :value="0">Global Announcement</option>
|
||||
<option v-for="service in $store.getters.services" :value="service.id" v-bind:key="service.id" >{{service.name}}</option>
|
||||
</select>
|
||||
</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>
|
||||
<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 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 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>
|
||||
<div class="col-sm-8">
|
||||
<select v-model="message.service_id" class="form-control" name="service" id="service_id">
|
||||
<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>
|
||||
</select>
|
||||
<select v-model="message.service" class="form-control" name="service" id="service_id">
|
||||
<option :value="0">Global Message</option>
|
||||
<option v-for="service in $store.getters.services" :value="service.id" v-bind:key="service.id">{{service.name}}</option>
|
||||
</select>
|
||||
</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>
|
||||
<div class="col-sm-8">
|
||||
<span @click="message.notify = !!message.notify" class="switch">
|
||||
<input v-model="message.notify" type="checkbox" class="switch" id="switch-normal">
|
||||
<label for="switch-normal">Notify Users Before Scheduled Time</label>
|
||||
</span>
|
||||
<span @click="message.notify = !!message.notify" class="switch">
|
||||
<input v-model="message.notify" type="checkbox" class="switch" id="switch-normal">
|
||||
<label for="switch-normal">Notify Users Before Scheduled Time</label>
|
||||
</span>
|
||||
</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>
|
||||
<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 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>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-inline">
|
||||
<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">
|
||||
<option value="minute">Minutes</option>
|
||||
<option value="hour">Hours</option>
|
||||
<option value="day">Days</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-inline">
|
||||
<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">
|
||||
<option value="minute">Minutes</option>
|
||||
<option value="hour">Hours</option>
|
||||
<option value="day">Days</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-12">
|
||||
<button @click="saveMessage"
|
||||
:disabled="!message.title || !message.description"
|
||||
type="submit" class="btn btn-block" :class="{'btn-primary': !message.id, 'btn-secondary': message.id}">
|
||||
{{message.id ? "Edit Message" : "Create Message"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger d-none" id="alerter" role="alert"></div>
|
||||
</form>
|
||||
<button @click="saveMessage"
|
||||
:disabled="!message.title || !message.description"
|
||||
type="submit" class="btn btn-block" :class="{'btn-primary': !message.id, 'btn-secondary': message.id}">
|
||||
{{message.id ? "Edit Message" : "Create Message"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert alert-danger d-none" id="alerter" role="alert"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -148,18 +147,18 @@
|
|||
this.message = this.in_message
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.service) {
|
||||
this.service_id = this.service.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startChange(e) {
|
||||
mounted () {
|
||||
if (this.service) {
|
||||
this.service_id = this.service.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startChange(e) {
|
||||
window.console.log(e)
|
||||
},
|
||||
endChange(e) {
|
||||
window.console.log(e)
|
||||
},
|
||||
endChange(e) {
|
||||
window.console.log(e)
|
||||
},
|
||||
},
|
||||
removeEdit() {
|
||||
this.message = {}
|
||||
this.edit(false)
|
||||
|
|
|
@ -92,12 +92,15 @@ export default Vue.mixin({
|
|||
if (service.permalink) {
|
||||
service = this.$store.getters.serviceByPermalink(service.permalink)
|
||||
}
|
||||
if (service===undefined) {
|
||||
if (service===undefined || this.isEmptyObject(service)) {
|
||||
return `/service/0`
|
||||
}
|
||||
let link = service.permalink ? service.permalink : service.id
|
||||
return `/service/${link}`
|
||||
},
|
||||
isEmptyObject(obj) {
|
||||
return Object.keys(obj).length === 0 && obj.constructor === Object
|
||||
},
|
||||
isInt(n) {
|
||||
return n % 1 === 0;
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue