89 lines
4.6 KiB
PHP
Executable File
89 lines
4.6 KiB
PHP
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Events</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
crossorigin="anonymous" />
|
|
<link href="index.css" rel="stylesheet" />
|
|
<style>
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container-fluid" id="app">
|
|
<div class="modal-form-background" v-if="frm.modal != null">
|
|
</div>
|
|
<div class="modal-form" v-if="frm.modal != null">
|
|
<div class="modal-form-body" v-if="frm.modal != null">
|
|
<input class="form-control" v-if="[ 'start', 'end' ].indexOf(frm.modal.property) != -1" type="datetime-local" v-model="frm.modal.value">
|
|
<hr />
|
|
<div class="btn-group" role="group" style="width: 100%;">
|
|
<button type="button" class="btn btn-warning" v-on:click="frm.modal = null;">Cancel</button>
|
|
<button type="button" class="btn btn-success" v-on:click="events[frm.e][frm.modal.property] = frm.modal.value; frm.modal = null;">Update</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bounding-box">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<table class="table events mb-2">
|
|
<tbody>
|
|
<tr v-for="event, e in events" v-on:click="frm.e = e" :class="{ 'selection': frm.e == e }">
|
|
<td><span class="badge text-bg-info">{{ e + 1 }}</span></td>
|
|
<td class="dt">{{ formatDate(event.start) }}</td>
|
|
<td class="dt">{{ formatDate(event.end) }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<button class="btn btn-success form-control mb-2" v-on:click="createEvent">Create</button>
|
|
<button v-if="faults == null" class="btn btn-primary form-control" v-on:click="saveEvents">Save</button>
|
|
<ul v-else>
|
|
<li v-for="fault, f in faults">
|
|
<span class="badge text-bg-info">{{ parseInt(fault.e) + 1 }}</span> <span class="tt">{{fault.k}}</span></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-8" v-if="frm.e != null">
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text">Start</span>
|
|
<input type="text" disabled class="form-control" :value="formatDate(events[frm.e].start)" v-on:keyup="validateEvents">
|
|
<button class="btn btn-outline-secondary" type="button" v-on:click="modal('start')">...</button>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text">End</span>
|
|
<input type="text" disabled class="form-control" :value="formatDate(events[frm.e].end)" v-on:keyup="validateEvents">
|
|
<button class="btn btn-outline-secondary" type="button" v-on:click="modal('end')">...</button>
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text">Title</span>
|
|
<input type="text" class="form-control" v-model="events[frm.e].title" v-on:keyup="validateEvents">
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text">Description</span>
|
|
<input type="text" class="form-control" v-model="events[frm.e].description" v-on:keyup="validateEvents">
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text">Location</span>
|
|
<input type="text" class="form-control" v-model="events[frm.e].location" v-on:keyup="validateEvents">
|
|
</div>
|
|
<div class="input-group mb-1">
|
|
<span class="input-group-text">Coordinates</span>
|
|
<input type="text" class="form-control" v-model="events[frm.e].coordinates" v-on:keyup="validateEvents">
|
|
</div>
|
|
<button class="btn btn-danger btn-lg form-control mt-2" v-on:click="deleteEvent">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment-with-locales.min.js" integrity="sha512-4F1cxYdMiAW98oomSLaygEwmCnIP38pb4Kx70yQYqRwLVCs3DbRumfBq82T08g/4LJ/smbFGFpmeFlQgoDccgg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
|
|
</html>
|