caldav-client

standalone CalDAV web client
git clone https://git.ce9e.org/caldav-client.git

commit
52338495ec559f16559382d88ad234a41ac3b531
parent
42cd838c5511a63d3d54729571fd12b156edc9a0
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2022-02-04 17:02
add network indicator

Diffstat

M dav.js 25 +++++++++++++++++++++----
M index.html 2 ++
M style.css 16 ++++++++++++++++

3 files changed, 39 insertions, 4 deletions


diff --git a/dav.js b/dav.js

@@ -1,3 +1,20 @@
   -1     1 var networkIndicator = document.querySelector('.network-indicator');
   -1     2 var activeRequests = 0;
   -1     3 
   -1     4 var _fetch = function(url, options) {
   -1     5     activeRequests += 1;
   -1     6     networkIndicator.hidden = false;
   -1     7 
   -1     8     var p = fetch(url, options);
   -1     9 
   -1    10     p.finally(() => {
   -1    11         activeRequests -= 1;
   -1    12         networkIndicator.hidden = activeRequests === 0;
   -1    13     });
   -1    14 
   -1    15     return p;
   -1    16 };
   -1    17 
    1    18 var uuid = function() {
    2    19     if (crypto.randomUUID) {
    3    20         return crypto.randomUUID();
@@ -38,7 +55,7 @@ var formatDate = function(date) {
   38    55 };
   39    56 
   40    57 export var getCalendars = function(url) {
   41    -1     return fetch(url, {
   -1    58     return _fetch(url, {
   42    59         method: 'PROPFIND',
   43    60         credentials: 'same-origin',
   44    61         body: '<?xml version="1.0" encoding="utf-8"?>\n'
@@ -73,7 +90,7 @@ export var getCalendars = function(url) {
   73    90 };
   74    91 
   75    92 export var getEvents = function(href, info) {
   76    -1     return fetch(href, {
   -1    93     return _fetch(href, {
   77    94         method: 'REPORT',
   78    95         credentials: 'same-origin',
   79    96         headers: {depth: '1'},
@@ -159,7 +176,7 @@ export var commitEvent = function(data) {
  159   176     vevent.summary = data.title;
  160   177     vevent.startDate = date2idate(data.start, data.allDay, data.extendedProps.offset);
  161   178     vevent.endDate = date2idate(data.end || data.start, data.allDay, data.extendedProps.offset);
  162    -1     return fetch(data.groupId, {
   -1   179     return _fetch(data.groupId, {
  163   180         method: 'PUT',
  164   181         credentials: 'same-origin',
  165   182         body: comp.toString(),
@@ -167,7 +184,7 @@ export var commitEvent = function(data) {
  167   184 };
  168   185 
  169   186 export var deleteEvent = function(data) {
  170    -1     return fetch(data.groupId, {
   -1   187     return _fetch(data.groupId, {
  171   188         method: 'DELETE',
  172   189         credentials: 'same-origin',
  173   190     });

diff --git a/index.html b/index.html

@@ -8,6 +8,8 @@
    8     8     <link rel="stylesheet" type="text/css" href="style.css">
    9     9 </head>
   10    10 <body>
   -1    11     <div class="network-indicator" aria-label="loading" hidden></div>
   -1    12 
   11    13     <div class="calendars"></div>
   12    14     <div class="calendar"></div>
   13    15     <form class="form" hidden>

diff --git a/style.css b/style.css

@@ -33,3 +33,19 @@ body {
   33    33     display: block;
   34    34     width: 100%;
   35    35 }
   -1    36 
   -1    37 .network-indicator {
   -1    38     position: fixed;
   -1    39     bottom: 0.5em;
   -1    40     left: 0.5em;
   -1    41     width: 1em;
   -1    42     height: 1em;
   -1    43     border: 0.3em solid;
   -1    44     border-bottom-color: transparent;
   -1    45     border-radius: 50%;
   -1    46     animation: progress 1s infinite linear;
   -1    47 }
   -1    48 @keyframes progress {
   -1    49     0% { transform: rotate(0deg) }
   -1    50     100% { transform: rotate(360deg) }
   -1    51 }