213 lines
9.6 KiB
PHP
213 lines
9.6 KiB
PHP
<spark-kiosk-announcements inline-template>
|
|
<div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">Create Announcement</div>
|
|
|
|
<div class="panel-body">
|
|
<div class="alert alert-info">
|
|
Announcements you create here will be sent to the "Product Announcements" section of
|
|
the notifications modal window, informing your users about new features and improvements
|
|
to your application.
|
|
</div>
|
|
|
|
<form class="form-horizontal" role="form">
|
|
<!-- Announcement -->
|
|
<div class="form-group" :class="{'has-error': createForm.errors.has('body')}">
|
|
<label class="col-md-4 control-label">Announcement</label>
|
|
|
|
<div class="col-md-6">
|
|
<textarea class="form-control" name="announcement" rows="7" v-model="createForm.body" style="font-family: monospace;">
|
|
</textarea>
|
|
|
|
<span class="help-block" v-show="createForm.errors.has('body')">
|
|
@{{ createForm.errors.get('body') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Text -->
|
|
<div class="form-group" :class="{'has-error': createForm.errors.has('action_text')}">
|
|
<label class="col-md-4 control-label">Action Button Text</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="action_text" v-model="createForm.action_text">
|
|
|
|
<span class="help-block" v-show="createForm.errors.has('action_text')">
|
|
@{{ createForm.errors.get('action_text') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action URL -->
|
|
<div class="form-group" :class="{'has-error': createForm.errors.has('action_url')}">
|
|
<label class="col-md-4 control-label">Action Button URL</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="action_url" v-model="createForm.action_url">
|
|
|
|
<span class="help-block" v-show="createForm.errors.has('action_url')">
|
|
@{{ createForm.errors.get('action_url') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create Button -->
|
|
<div class="form-group">
|
|
<div class="col-md-offset-4 col-md-6">
|
|
<button type="submit" class="btn btn-primary"
|
|
@click.prevent="create"
|
|
:disabled="createForm.busy">
|
|
|
|
Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Announcements List -->
|
|
<div class="panel panel-default" v-if="announcements.length > 0">
|
|
<div class="panel-heading">Recent Announcements</div>
|
|
|
|
<div class="panel-body">
|
|
<table class="table table-borderless m-b-none">
|
|
<thead>
|
|
<th></th>
|
|
<th>Date</th>
|
|
<th></th>
|
|
<th></th>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="announcement in announcements">
|
|
<!-- Photo -->
|
|
<td>
|
|
<img :src="announcement.creator.photo_url" class="spark-profile-photo">
|
|
</td>
|
|
|
|
<!-- Date -->
|
|
<td>
|
|
<div class="btn-table-align">
|
|
@{{ announcement.created_at | datetime }}
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Edit Button -->
|
|
<td>
|
|
<button class="btn btn-primary" @click="editAnnouncement(announcement)">
|
|
<i class="fa fa-pencil"></i>
|
|
</button>
|
|
</td>
|
|
|
|
<!-- Delete Button -->
|
|
<td>
|
|
<button class="btn btn-danger-outline" @click="approveAnnouncementDelete(announcement)">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Announcement Modal -->
|
|
<div class="modal fade" id="modal-update-announcement" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog modal-lg" v-if="updatingAnnouncement">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
|
|
<h4 class="modal-title">
|
|
Update Announcement
|
|
</h4>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<!-- Update Announcement -->
|
|
<form class="form-horizontal" role="form">
|
|
<!-- Announcement -->
|
|
<div class="form-group" :class="{'has-error': updateForm.errors.has('body')}">
|
|
<label class="col-md-4 control-label">Announcement</label>
|
|
|
|
<div class="col-md-6">
|
|
<textarea class="form-control" rows="7" v-model="updateForm.body" style="font-family: monospace;">
|
|
</textarea>
|
|
|
|
<span class="help-block" v-show="updateForm.errors.has('body')">
|
|
@{{ updateForm.errors.get('body') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Text -->
|
|
<div class="form-group" :class="{'has-error': updateForm.errors.has('action_text')}">
|
|
<label class="col-md-4 control-label">Action Button Text</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="action_text" v-model="updateForm.action_text">
|
|
|
|
<span class="help-block" v-show="updateForm.errors.has('action_text')">
|
|
@{{ updateForm.errors.get('action_text') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action URL -->
|
|
<div class="form-group" :class="{'has-error': updateForm.errors.has('action_url')}">
|
|
<label class="col-md-4 control-label">Action Button URL</label>
|
|
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control" name="action_url" v-model="updateForm.action_url">
|
|
|
|
<span class="help-block" v-show="updateForm.errors.has('action_url')">
|
|
@{{ updateForm.errors.get('action_url') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Modal Actions -->
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
|
|
<button type="button" class="btn btn-primary" @click="update" :disabled="updateForm.busy">
|
|
Update
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Announcement Modal -->
|
|
<div class="modal fade" id="modal-delete-announcement" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog" v-if="deletingAnnouncement">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
|
|
<h4 class="modal-title">
|
|
Delete Announcement
|
|
</h4>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
Are you sure you want to delete this announcement?
|
|
</div>
|
|
|
|
<!-- Modal Actions -->
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">No, Go Back</button>
|
|
|
|
<button type="button" class="btn btn-danger" @click="deleteAnnouncement" :disabled="deleteForm.busy">
|
|
Yes, Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</spark-kiosk-announcements>
|