logs: Added filtering.

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

@@ -1,4 +1,68 @@
 module.exports = class {
+  onCreate() {
+    this.state = {
+      filters: [],
+      filtered: false,
+    }
+  }
+
+  onInput(input) {
+    if (!input.filter) {
+      this.state.filters = []
+      this.state.filtered = false
+      return
+    }
+
+    const filters = []
+    const {characters, channels, events, search} = input.filter
+
+    if (search != null) {
+      filters.push({
+        type: "search",
+        key: "search",
+        icon: "T",
+        color: "color-text",
+        text: search,
+      })
+    }
+
+    for (const character of (characters || [])) {
+      filters.push({
+        type: "characters",
+        key: character,
+        icon: "C",
+        color: "color-tag-character",
+        id: character,
+        text: (input.characters.find(c => c.id === character) || {name: "Unknown ("+character+")"}).name,
+      })
+    }
+
+    for (const channel of (channels || [])) {
+      filters.push({
+        type: "channels",
+        key: channel.replace(/'/g, "__"),
+        icon: "#",
+        color: "color-tag-location",
+        id: channel,
+        text: channel,
+      })
+    }
+
+    for (const event of (events || [])) {
+      filters.push({
+        type: "events",
+        key: event.replace(/['\s\.]/g, "__"),
+        icon: "E",
+        color: "color-tag-event",
+        id: event,
+        text: event,
+      })
+    }
+
+    this.state.filters = filters
+    this.state.filtered = (filters.length > 0)
+  }
+
   select(value) {
     this.emit("select", value)
   }

marko/page/logs/components/logs-menu/index.marko

@@ -1,10 +1,12 @@
 <menu user=input.user>
   <menu-header key="logs">Logs</menu-header>
-  <menu-link key="logs" selected=input.selected.index icon="L" href="/logs/">All</menu-link>
+  <menu-link key="logs" selected=(input.selected.index && !state.filtered) icon="L" href="/logs/">All</menu-link>
   <if-permitted key="if-permitted" user=input.user permission="log.add">
-    <menu-link key="add_log" dark on-click("select", "add") icon="+">Add Log</menu-link>
+    <menu-link key="add_log" dark on-click("select", "log.add") icon="+">Add Log</menu-link>
   </if-permitted>
   <menu-gap />
   <menu-header key="filters">Filters</menu-header>
+  <menu-link for(filter in state.filters) textClass=filter.color unselectable icon=filter.icon on-click("emit", "removefilter", filter.type, filter.id)>${filter.text}</menu-link>
+  <menu-link key="add_filter" dark on-click("select", "filter.add") icon="+">Add Filter</menu-link>
   <menu-gap />
 </menu>