Finished off the agenda and minutes features in the adm page. Added another six events to the calendar.

adm/api.php

@@ -7,13 +7,7 @@ if ( in_array("cmd", array_keys($_GET)) and $_GET["cmd"] == "get" ) {
 } elseif ( $_POST["cmd"] == "put" ) {
   $json = base64_decode($_POST["payload"]);
   $events = json_decode($json, true);
-  for ( $i = 0; $i < count($events); $i++ ) {
-    foreach ( array( "hours", "agenda", "minutes" ) as $field ) {
-      unset($events[$i][$field]);
-    }
-  }
-  $json = json_encode($events, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
-  file_put_contents("dat/events.json", $json);
+  putEvents($events);
   $ret = getEvents();
 }
 print(json_encode($ret));

adm/index.css

@@ -71,3 +71,9 @@ body { display: none; }
   border-bottom-left-radius: 8px;
   border-bottom-right-radius: 8px;
 }
+textarea {
+  font-family: monospace;
+  background-color: #000000;
+  color: #ffffff;
+  font-weight: bold;
+}

adm/index.js

@@ -1,7 +1,8 @@
+var dbg = null;
 Vue.createApp({
   data: function() {
           return { 'events': null
-                 , 'frm': { 'e': null, 'modal': null }
+                 , 'frm': { 'e': null, 'modal': null, 'tab': 'agenda' }
                  , '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{0,2}$' ], 'default': '' }
@@ -22,6 +23,19 @@ Vue.createApp({
                            var ret = moment(dt).format(fmt);
                            return ret;
                          },
+             tabEnabled: function(e, tab) {
+                           var ret = ( Object.keys(this.events[e]).indexOf(tab) >= 0 );
+                           return ret;
+                         },
+             toggleMD: function(evt) {
+                         evt.preventDefault();
+                         if ( this.events[this.frm.e][this.frm.tab] == undefined ) {
+                           this.events[this.frm.e][this.frm.tab] = '';
+                         } else {
+                           delete this.events[this.frm.e][this.frm.tab];
+                         }
+                         this.events = JSON.parse(JSON.stringify(this.events));
+                       },
              hoursDiff: function(d1, d2) {
                           return moment(d2).diff(moment(d1), 'hours', true);
                         },
@@ -125,6 +139,7 @@ Vue.createApp({
                           }
            },
   mounted: function() {
+             dbg = this;
              this.load();
            }
 }).mount('#app')

adm/index.php

@@ -80,15 +80,16 @@
               <input type="text" class="form-control" v-model="events[frm.e].coordinates" v-on:keyup="validateEvents">
             </div>
             <ul class="nav nav-tabs">
-              <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="#">Agenda <input type="checkbox" /></a>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="#">Minutes <input type="checkbox" /></a>
+              <li class="nav-item" v-for="lbl, tab in { 'agenda': 'Agenda', 'minutes': 'Minutes' }">
+                <a class="nav-link" :class="{ 'active': frm.tab == tab }" aria-current="page" href="#" v-on:click="frm.tab = tab">{{lbl}} <span v-if="tabEnabled(frm.e, tab)">&#128994;</span><span v-else>&#128308;</span></a>
               </li>
             </ul>
             <div class="tabbody">
-              <textarea class="form-control" rows="10"></textarea>
+              <button class="btn btn-success mb-1" v-on:click="toggleMD" v-if="tabEnabled(frm.e, frm.tab)">Enabled</button>
+              <button class="btn btn-danger mb-1"  v-on:click="toggleMD" v-else                           >Disabled</button>
+              <template v-if="Object.keys(events[frm.e]).indexOf(frm.tab) != -1">
+              <textarea class="form-control" rows="10" v-if="events[frm.e][frm.tab] != undefined" v-model="events[frm.e][frm.tab]"></textarea>
+              </template>
             </div>
             <button class="btn btn-danger btn-lg form-control mt-2" v-on:click="deleteEvent">Delete</button>
           </div>