Knowledge Base

I added to RadicaleInfCloud (the web interface InfCloud ostensibly configured to work with Radicale) a "Download" button which exports the current calendar item as a .ics file.

This patch also adds a stub button for importing. It operates by dropping a .ics file onto it. It doesn't actually load anything from the file yet; I don't have that functionality built yet. I could use guidance on that.

The patch:

diff --git a/radicale_infcloud/web/forms.js b/radicale_infcloud/web/forms.js
index 0e4c816..c733b6d 100644
--- a/radicale_infcloud/web/forms.js
+++ b/radicale_infcloud/web/forms.js
@@ -31,6 +31,35 @@ function updateTodoFormDimensions(setHeight)
    }
 }

+function dragOverHandler(event) {
+   //if (window.console) {
+   //  console.log("dragOverHandler",event);
+   //}
+   event.preventDefault();
+   event.stopPropagation();
+}
+
+/* Incomplete import process. The function logs to console but does not use the vcard contents. */
+function dropHandler(event) {
+   if (event) {
+       event.preventDefault();
+       event.stopPropagation();
+       if (window.console) {
+           console.log("dropHandler",event);
+       }
+       if(event.dataTransfer && event.dataTransfer && event.dataTransfer.files.length > 0) {
+           if(window.console){console.log("files",event.dataTransfer.files);}
+           for (let f of event.dataTransfer.files) {
+               if(window.console){console.log("file:",f)};
+               let reader = new FileReader();
+               reader.readAsText(f);
+               reader.onload = function(){if(window.console){console.log(reader.result)}};
+               reader.onerror = function(){if(window.console){console.log(reader.error)}};
+           }
+       }
+   }
+}
+
 function updateEventFormDimensions(setHeight)
 {
    $('#CAEvent').css('width','');
@@ -51,6 +80,7 @@ function setFormPosition(jsEvent, confirmRepeat)
    dist_y;

    $('#event_details_template').css('max-height','');
+   document.getElementById('uploadButton').addEventListener("drop", dropHandler(event));

    if(jsEvent)
    {
@@ -2316,6 +2346,7 @@ function showEventForm(date, allDay, calEvent, jsEvent, mod, repeatOne, confirmR
    if(mod=='show')
    {
        $('#saveButton').hide();
+       $('#uploadButton').hide();
        $('#resetButton').hide();
        $('#deleteButton').hide();
        if($('#ResourceCalDAVList').find('[data-id="'+calEvent.res_id+'"]').hasClass("resourceCalDAV_item_ro"))
@@ -2622,6 +2653,22 @@ function bindEventForm()
        });
    });

+   $('#downloadButton').click(function(e){
+       if($('#uid').val()!='') {
+           var dlname = $('#name').val();
+           var dlhref = $('#uid').val().replace(/(:\/\/)\w*@/,"$1");
+           function downloadIt(){
+               if (dlname && dlname != '' && dlhref && dlhref != '') {
+                   var link = document.createElement('a');
+                   link.download = dlname;
+                   link.href = dlhref;
+                   link.dispatchEvent(new MouseEvent("click"));
+               }
+           }
+           downloadIt();
+       }
+   });
+
    $('#resetButton').click(function(){
        $('#event_details_template').find('img[data-type=invalidSmall]').css('display','none');
        var uid=$('#uid').val();
@@ -2828,6 +2875,7 @@ function startEditModeEvent()
    $('#saveButton').show();
    $('#resetButton').show();
    $('#deleteButton').show();
+   $('#uploadButton').show();
    $('#show').val('');
    $('#eventDetailsTable :input[disabled]').prop('disabled', false);
    $('#eventDetailsTable :input[type="text"]').prop('readonly', false);
diff --git a/radicale_infcloud/web/index.html b/radicale_infcloud/web/index.html
index a62ccb8..6a2deb5 100644
--- a/radicale_infcloud/web/index.html
+++ b/radicale_infcloud/web/index.html
@@ -631,6 +631,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                                <input id="editOptionsButton" type="button" value="edit repeat" data-type="editOptions" />
                                <input id="resetButton" type="button" value="Reset" data-type="reset" />
                                <input id="closeButton" type="button" value="Cancel" data-type="cancel" />
+                               <input id="downloadButton" type="button" value="Download" data-type="download"/>
+                               <input id="uploadButton" type="button" value="Import" data-type="upload" ondrop="dropHandler(event)" ondragover="dragOverHandler(event);"/>
                                <input id="deleteButton" type="button" value="Delete" data-type="delete" onclick="updateEventFormDimensions(true);$('#CAEvent .saveLoader').show();deleteEvent();" />
                            </td>
                        </tr>

You can see my work at my cgit or gitlab.