logs: Added filter menu.

marko/page/logs/components/page/component.js

@@ -19,11 +19,18 @@ module.exports = class {
 
   addFilter(type, filter) {
     if (type === "search") {
-      this.state.filter = Object.assign({}, this.state.filter, {search: filter})
+      if (filter.trim().length > 0) {
+        this.state.filter = Object.assign({}, this.state.filter, {search: filter})
+      } else {
+        this.state.filter = Object.assign({}, this.state.filter, {search: null})
+      }
+
     } else {
       this.state.filter = Object.assign({}, this.state.filter, {[type]: (this.state.filter[type] || []).filter(f => f !== filter).concat(filter)})
     }
 
+    this.updateQuery(this.state.filter)
+
     this.refresh()
   }
 
@@ -41,6 +48,31 @@ module.exports = class {
         this.refresh()
       }
     }
+
+    this.updateQuery(this.state.filter)
+  }
+
+  updateQuery(filter) {
+    const queries = []
+
+    if (filter.characters) {
+      queries.push("characters=" + filter.characters.join(","))
+    }
+    if (filter.channels) {
+      queries.push("channels=" + filter.channels.map(c => encodeURIComponent(c)).join(","))
+    }
+    if (filter.events) {
+      queries.push("events=" + filter.events.map(e => encodeURIComponent(e)).join(","))
+    }
+    if (filter.search) {
+      queries.push("search=" + encodeURIComponent(filter.search))
+    }
+
+    if (queries.length > 0) {
+      history.replaceState("", "", `/logs/?${queries.join("&")}`)
+    } else {
+      history.replaceState("", "", "/logs/")
+    }
   }
 
   refresh() {

marko/page/logs/components/page/index.marko

@@ -1,7 +1,7 @@
 <background src="/assets/images/bg.png" opacity=0.25 />
-<logs-menu key="menu" on-select("open") on-removefilter("removeFilter") selected=(input.selected || {}) user=input.user filter=state.filter characters=input.characters />
-<main>
+<logs-menu key="menu" on-select("open") selected=(input.selected || {}) user=input.user filter=state.filter characters=input.characters />
+<filter-menu on-add("addFilter") on-remove("removeFilter") filter=state.filter characters=input.characters channels=input.channels eventNames=input.eventNames />
+<main class="with-right">
   <logs-table logs=state.logs on-addfilter("addFilter") />
 </main>
 <add-log-modal enabled=(state.modal === "log.add") on-close("close") />
-<add-filter-modal enabled=(state.modal === "filter.add") characters=input.characters filter=state.filter on-add("addFilter") on-close("close") />