Add button to save filtered archive in the viewer

src/viewer/index.html

@@ -62,6 +62,11 @@
         <input type="hidden" data-filter-type="edited" value="1">
       </div>
       
+      <div id="opt-save-filtered">
+        <div class="splitter"></div>
+        <button id="btn-save-filtered">Save Filtered Messages</button>
+      </div>
+      
       <div class="separator"></div>
       
       <button id="btn-about">About</button>

src/viewer/scripts/dom.js

@@ -1,4 +1,10 @@
 var DOM = (function(){
+  var createElement = (tag, parent) => {
+    var ele = document.createElement(tag);
+    parent.appendChild(ele);
+    return ele;
+  };
+  
   var entityMap = {
     "&": "&",
     "<": "&lt;",
@@ -33,11 +39,7 @@ var DOM = (function(){
     /*
      * Creates an element, adds it to the DOM, and returns it.
      */
-    createElement: (tag, parent) => {
-      var ele = document.createElement(tag);
-      parent.appendChild(ele);
-      return ele;
-    },
+    createElement: (tag, parent) => createElement(tag, parent),
     
     /*
      * Removes an element from the DOM.
@@ -47,6 +49,29 @@ var DOM = (function(){
     /*
      * Converts characters to their HTML entity form.
      */
-    escapeHTML: (html) => String(html).replace(entityRegex, s => entityMap[s])
+    escapeHTML: (html) => String(html).replace(entityRegex, s => entityMap[s]),
+    
+    /*
+     * Triggers a UTF-8 text file download.
+     */
+    downloadTextFile: (fileName, fileContents) => {
+      var blob = new Blob([fileContents], { "type": "octet/stream" });
+      
+      if ("msSaveBlob" in window.navigator){
+        return window.navigator.msSaveBlob(blob, fileName);
+      }
+      
+      var url = window.URL.createObjectURL(blob);
+      
+      var ele = createElement("a", document.body);
+      ele.href = url;
+      ele.download = fileName;
+      ele.style.display = "none";
+      
+      ele.click();
+      
+      document.body.removeChild(ele);
+      window.URL.revokeObjectURL(url);
+    }
   };
 })();

src/viewer/scripts/exec.js

@@ -64,6 +64,8 @@ document.addEventListener("DOMContentLoaded", () => {
       if (files.length === 1){
         var file = files[0];
         var reader = new FileReader();
+        
+        STATE.setUploadedFileName(file.name);
 
         reader.onload = () => loadJSON(reader.result, "Could not parse '"+file.name+"', see console for details.", "File '"+file.name+"' has an invalid format.");
         reader.readAsText(file, "UTF-8");

src/viewer/scripts/gui.js

@@ -14,7 +14,10 @@ var GUI = (function(){
   };
   
   var triggerFilterChanged = function(){
-    eventOnOptMessageFilterChanged && eventOnOptMessageFilterChanged(getActiveFilter());
+    var activeFilter = getActiveFilter();
+    DOM.id("opt-save-filtered").classList.toggle("active", activeFilter != null);
+    
+    eventOnOptMessageFilterChanged && eventOnOptMessageFilterChanged(activeFilter);
   };
   
   var showModal = function(width, html){
@@ -76,6 +79,7 @@ var GUI = (function(){
         inputMessageFilter.dispatchEvent(new Event("change"));
         
         DOM.id("opt-filter-contents").value = "";
+        DOM.id("opt-save-filtered").classList.remove("active");
       };
       
       DOM.id("btn-upload-file").addEventListener("click", () => {
@@ -108,6 +112,12 @@ var GUI = (function(){
       DOM.id("opt-messages-per-page").addEventListener("change", () => {
         eventOnOptMessagesPerPageChanged && eventOnOptMessagesPerPageChanged();
       });
+      
+      DOM.id("btn-save-filtered").addEventListener("click", () => {
+        if (confirm("Filtering only removes messages, all users and servers will remain in the new archive. Continue?")){
+          STATE.saveFilteredMessages();
+        }
+      });
 
       DOM.tag("button", DOM.fcls("nav")).forEach(button => {
         button.disabled = true;

src/viewer/scripts/savefile.js

@@ -46,4 +46,34 @@ class SAVEFILE{
   getMessages(channel){
     return this.data[channel] || {};
   }
+
+  filterToJson(filterFunction){
+    var newMeta = JSON.parse(JSON.stringify(this.meta));
+    var newData = {};
+    
+    for(let channel of Object.keys(this.getChannels())){
+      var messages = this.getMessages(channel);
+      var retained = {};
+      
+      for(let key of Object.keys(messages)){
+        var message = messages[key];
+        
+        if (filterFunction(message)){
+          retained[key] = message;
+        }
+      }
+      
+      if (Object.keys(retained).length > 0){
+        newData[channel] = retained;
+      }
+      else{
+        delete newMeta.channels[channel];
+      }
+    }
+    
+    return JSON.stringify({
+      "meta": newMeta,
+      "data": newData
+    });
+  }
 }

src/viewer/scripts/state.js

@@ -8,6 +8,7 @@ var STATE = (function(){
   var FILE;
   var MSGS;
   
+  var uploadedFileName;
   var filterFunction;
   var selectedChannel;
   var currentPage;
@@ -60,6 +61,10 @@ var STATE = (function(){
     triggerChannelsRefreshed();
     triggerMessagesRefreshed();
   };
+  
+  ROOT.setUploadedFileName = function(name){
+    uploadedFileName = name;
+  };
 
   ROOT.getChannelName = function(channel){
     return FILE.getChannelById(channel).name;
@@ -203,6 +208,21 @@ var STATE = (function(){
     }
   };
   
+  ROOT.saveFilteredMessages = function(){
+    var saveFileName = "dht-filtered.txt";
+    
+    if (uploadedFileName){
+      if (uploadedFileName.includes("filtered")){
+        saveFileName = uploadedFileName;
+      }
+      else{
+        saveFileName = uploadedFileName.replace(".", "-filtered.");
+      }
+    }
+    
+    DOM.downloadTextFile(saveFileName, FILE.filterToJson(filterFunction));
+  };
+  
   // -----
   // Users
   // -----

src/viewer/styles/menu.css

@@ -72,3 +72,11 @@
 #opt-filter-list > .active {
   display: block;
 }
+
+#opt-save-filtered {
+  display: flex;
+}
+
+#opt-save-filtered:not(.active) {
+  display: none;
+}