jdownie/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made a fair bit of progress with the calendar editor.

Browse Source
This commit is contained in:
James Downie
2025-07-02 17:40:47 +10:00
parent f8616ff819
commit b6d51c7cfa
3 changed files with 163 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
cal/index.php
View File

@@ -13,58 +13,72 @@
</head>
<body>
<div class="container" id="app">
<ul class="nav nav-tabs">
<li class="nav-item" v-for="lbl, t in tabs" v-on:click="frm.tab = t; frm.e = null;">
<a class="nav-link" :class="{ 'active': frm.tab == t }" aria-current="page" href="#">{{lbl}}</a>
</li>
</ul>
<div v-if="frm.tab == 0" class="tabbody">
<div class="row">
<div class="col-6">
<table class="table">
<tbody>
<tr v-for="event, e in events" v-on:click="frm.e = e">
<td>{{event.start}}</td>
<td>{{event.end}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-6" v-if="frm.e != null">
<div class="input-group mb-1">
<span class="input-group-text">Start</span>
<input type="text" class="form-control" v-model="events[frm.e].start">
</div>
<div class="input-group mb-1">
<span class="input-group-text">End</span>
<input type="text" class="form-control" v-model="events[frm.e].end">
</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">
</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">
</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">
</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">
</div>
<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 v-else-if="frm.tab == 1" class="tabbody">
<h1>Create</h1>
<div class="bounding-box">
<div class="row">
<div class="col-4">
<table class="table">
<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>{{ formatDate(event.start) }}</td>
<td>{{ formatDate(event.end) }}</td>
</tr>
</tbody>
</table>
<button v-if="faults == null" class="btn btn-primary form-control">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" v-model="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" v-model="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>
<pre>{{events}}</pre>
</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>