diff --git a/cal/index.css b/cal/index.css index f85a3f4..8073252 100644 --- a/cal/index.css +++ b/cal/index.css @@ -1,7 +1,47 @@ -.tabbody { - border-bottom: solid 1px rgb(222, 226, 230); - border-left: solid 1px rgb(222, 226, 230); - border-right: solid 1px rgb(222, 226, 230); - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; +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; +} +.selection td { + background-color: darkgrey; + color: white; +} +.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; } diff --git a/cal/index.js b/cal/index.js index 39ef450..130dc33 100755 --- a/cal/index.js +++ b/cal/index.js @@ -1,16 +1,71 @@ Vue.createApp({ data: function() { return { 'events': null - , 'tabs': [ 'Events', 'Create' ] - , 'frm': { 'tab': 0, 'e': null } + , 'frm': { 'e': null, 'modal': null } + , 'faults': null + , 'patterns': { 'coordinates': [ '^$', '^-?\\d{1,3}(?:\\.\\d+)?,-?\\d{1,3}(?:\\.\\d+)?$' ] + , 'start': [ '^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$' ] + , 'end': [ '^\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}$' ] + , 'title': [ '^.{20,50}$' ] + , 'description': [ '^.{20,}$' ] + , 'location': [ '^.{5,100}$' ] + } } }, + 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; + }, + 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.patterns ) { + var value = this.events[e][k]; + value = ( value == undefined ? '' : value ); + var patterns = this.patterns[k]; + var match = false; + for ( var p in patterns ) { + var pattern = new RegExp(this.patterns[k][p]); + match = match || pattern.test(value); + } + console.log(e, k, value, match); + if ( ! match ) { + var fault = {}; + fault.e = e; + fault.k = k; + fault.v = value; + faults.push(fault); + } + } + } + this.faults = ( faults.length == 0 ? null : faults ); + }, + modal: function(property) { + var d = {}; + d.property = property; + d.value = this.events[this.frm.e][property]; + this.frm.modal = d; + } + }, mounted: function() { var app = this; jQuery.get( 'api.php' , { 'cmd': 'get' } , function(data) { app.events = data; + app.validateEvents(); + $('body').fadeIn(); } ); } diff --git a/cal/index.php b/cal/index.php index b05e0dc..9043286 100755 --- a/cal/index.php +++ b/cal/index.php @@ -13,58 +13,72 @@ -
- -
-
-
- - - - - - - -
{{event.start}}{{event.end}}
-
-
-
- Start - -
-
- End - -
-
- Title - -
-
- Description - -
-
- Location - -
-
- Coordinates - -
+
+
+
+
+
+ +
+
+ +
-
-

Create

+
+
+
+ + + + + + + + +
{{ e + 1 }}{{ formatDate(event.start) }}{{ formatDate(event.end) }}
+ +
    +
  • + {{ parseInt(fault.e) + 1 }} {{fault.k}} +
    • +
+
+
+
+ Start + + +
+
+ End + + +
+
+ Title + +
+
+ Description + +
+
+ Location + +
+
+ Coordinates + +
+ +
+
- 
{{events}}
+