Attempting a simpler configuration. Podman doesn't like it. Moving to Docker for sanity check.
This commit is contained in:
13
adm/cal/api.php
Normal file
13
adm/cal/api.php
Normal file
@@ -0,0 +1,13 @@
|
||||
<?php
|
||||
header("Content-Type: application/json");
|
||||
include('lib/main.php');
|
||||
$ret = array( "err" => "unknown command" );
|
||||
if ( in_array("cmd", array_keys($_GET)) and $_GET["cmd"] == "get" ) {
|
||||
$ret = getEvents();
|
||||
} elseif ( $_POST["cmd"] == "put" ) {
|
||||
$json = base64_decode($_POST["payload"]);
|
||||
file_put_contents("dat/events.json", $json);
|
||||
$ret = getEvents();
|
||||
}
|
||||
print(json_encode($ret));
|
||||
?>
|
||||
0
adm/cal/events.json
Normal file
0
adm/cal/events.json
Normal file
65
adm/cal/index.css
Normal file
65
adm/cal/index.css
Normal file
@@ -0,0 +1,65 @@
|
||||
body { display: none; }
|
||||
.bounding-box {
|
||||
border: solid 1px rgb(222, 226, 230);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
height: 96vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: clip;
|
||||
}
|
||||
.events td.dt {
|
||||
text-align: right;
|
||||
font-family: monospace;
|
||||
}
|
||||
.events tr:hover td {
|
||||
background: lightgrey;
|
||||
}
|
||||
.events td {
|
||||
border: none;
|
||||
}
|
||||
.selection td {
|
||||
background-color: darkgrey;
|
||||
color: white;
|
||||
}
|
||||
.events td:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.events td:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.tt {
|
||||
font-family: monospace;
|
||||
}
|
||||
.modal-form-background {
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
opacity: 0.8;
|
||||
display: flex;
|
||||
}
|
||||
.modal-form {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
}
|
||||
.modal-form-body {
|
||||
background-color: #fff; /* optional: distinguish it */
|
||||
padding: 2rem; /* optional: add spacing */
|
||||
border-radius: 8px; /* optional: rounded corners */
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.2); /* optional: subtle shadow */
|
||||
opacity: 1;
|
||||
z-index: 4;
|
||||
}
|
||||
103
adm/cal/index.js
Executable file
103
adm/cal/index.js
Executable file
@@ -0,0 +1,103 @@
|
||||
Vue.createApp({
|
||||
data: function() {
|
||||
return { 'events': null
|
||||
, 'frm': { 'e': null, 'modal': null }
|
||||
, 'faults': null
|
||||
, 'fields': { 'coordinates': { 'patterns': [ '^$', '^-?\\d{1,3}(?:\\.\\d+)?,-?\\d{1,3}(?:\\.\\d+)?$' ], 'default': '-27.38621539644283,153.0351689206467' }
|
||||
, 'start': { 'patterns': [ '^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$' ], 'default': '' }
|
||||
, 'end': { 'patterns': [ '^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$' ], 'default': '' }
|
||||
, 'title': { 'patterns': [ '^.{20,50}$' ], 'default': 'Event Title' }
|
||||
, 'description': { 'patterns': [ '^.{20,}$' ], 'default': 'Event Description' }
|
||||
, 'location': { 'patterns': [ '^.{5,100}$' ], 'default': 'Event Location' }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: { formatDate: function(dt) {
|
||||
var fmt = 'DD MMM YYYY';
|
||||
var m = moment(dt);
|
||||
var t = m.hour() * 3600 + m.minute() * 60 + m.second();
|
||||
if ( t > 0 ) {
|
||||
fmt = 'DD MMM YYYY, HH:mm:ss';
|
||||
}
|
||||
var ret = moment(dt).format(fmt);
|
||||
return ret;
|
||||
},
|
||||
createEvent: function() {
|
||||
var event = {};
|
||||
for ( var k in this.fields ) {
|
||||
event[k] = this.fields[k].default;
|
||||
}
|
||||
const now = moment();
|
||||
let next7pm = moment().hour(19).minute(0).second(0);
|
||||
if (now.isSameOrAfter(next7pm)) {
|
||||
next7pm.add(1, 'day');
|
||||
}
|
||||
const twoHoursLater = moment(next7pm).add(2, 'hours');
|
||||
event.start = next7pm.format('YYYY-MM-DDTHH:mm:ss');
|
||||
event.end = twoHoursLater.format('YYYY-MM-DDTHH:mm:ss');
|
||||
this.events.unshift(event);
|
||||
this.frm.e = 0;
|
||||
},
|
||||
saveEvents: function() {
|
||||
console.log(this.events);
|
||||
var app = this;
|
||||
jQuery.post( 'api.php'
|
||||
, { 'cmd': 'put'
|
||||
, 'payload': btoa(JSON.stringify(this.events))
|
||||
}
|
||||
, function(data) {
|
||||
app.events = data;
|
||||
app.validateEvents();
|
||||
}
|
||||
);
|
||||
},
|
||||
deleteEvent: function() {
|
||||
this.events.splice(this.frm.e, 1);
|
||||
this.frm.e = null;
|
||||
this.validateEvents();
|
||||
},
|
||||
validateEvents: function() {
|
||||
var faults = [];
|
||||
for ( var e in this.events ) {
|
||||
for ( var k in this.fields ) {
|
||||
var value = this.events[e][k];
|
||||
value = ( value == undefined ? '' : value );
|
||||
var patterns = this.fields[k].patterns;
|
||||
var match = false;
|
||||
for ( var p in patterns ) {
|
||||
var pattern = new RegExp(patterns[p]);
|
||||
match = match || pattern.test(value);
|
||||
}
|
||||
if ( ! match ) {
|
||||
var fault = {};
|
||||
fault.e = e;
|
||||
fault.k = k;
|
||||
fault.v = value;
|
||||
faults.push(fault);
|
||||
}
|
||||
}
|
||||
}
|
||||
this.faults = ( faults.length == 0 ? null : faults );
|
||||
},
|
||||
load: function() {
|
||||
var app = this;
|
||||
jQuery.get( 'api.php'
|
||||
, { 'cmd': 'get' }
|
||||
, function(data) {
|
||||
app.events = data;
|
||||
app.validateEvents();
|
||||
$('body').fadeIn();
|
||||
}
|
||||
);
|
||||
},
|
||||
modal: function(property) {
|
||||
var d = {};
|
||||
d.property = property;
|
||||
d.value = this.events[this.frm.e][property];
|
||||
this.frm.modal = d;
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.load();
|
||||
}
|
||||
}).mount('#app')
|
||||
88
adm/cal/index.php
Executable file
88
adm/cal/index.php
Executable file
@@ -0,0 +1,88 @@
|
||||
<!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>
|
||||
0
adm/cal/lib.php
Normal file
0
adm/cal/lib.php
Normal file
0
adm/lib.php
Executable file
0
adm/lib.php
Executable file
Reference in New Issue
Block a user