logs: Added logs-table that looks like old logs site.

marko/page/logs/components/logs-table-row/component.js

@@ -0,0 +1,10 @@
+const moment = require("moment")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      expand: false,
+      dateStr: moment(input.log.date).format("MMM D, YYYY"),
+    }
+  }
+}

marko/page/logs/components/logs-table-row/index.marko

@@ -0,0 +1,22 @@
+$ const fullNames = (input.log.characters.length < 4);
+
+<tr key=input.log.shortId class="logs-table-row color-text">
+  <td class="date color-primary">
+    <a href=("/logs/"+input.log.id)>${state.dateStr}</a>
+  </td>
+  <td class="channel color-menu">
+    <a on-click("emit", "addfilter", "channels", input.log.channelName)>${input.log.channelName}</a>
+  </td>
+  <td class="event color-tag-event">
+    <a on-click("emit", "addfilter", "events", input.log.eventName)>${(input.log.eventName || "").replace(/\s/g, " ")}</a>
+  </td>
+  <td class="characters color-menu">
+    <span for(character in input.log.characters | status-var=loop)>
+      <a on-click("emit", "addfilter", "characters", character.id) class="name">${fullNames ? character.name : character.shortName}</a>
+      <span class="comma" if(loop.getIndex() < (loop.getLength() - 1))>, </span>
+    </span>
+  </td>
+</tr>
+<tr if(state.expand) key=(input.log.shortId + "_expand") class="logs-table-row-expanded">
+
+</tr>

marko/page/logs/components/logs-table-row/style.less

@@ -0,0 +1,19 @@
+tr.logs-table-row {
+  td {
+    padding: 0.25em 1ch;
+    text-align: center;
+    border-bottom: 1px solid rgba(51, 51, 51, 0.5);
+
+    a {
+      color: inherit;
+    }
+  }
+
+  td.expand {
+    width: 2%;
+  }
+
+  td.channel, td.date, td.event {
+    width: 12%;
+  }
+}

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

@@ -0,0 +1,11 @@
+import moment from "moment"
+
+<table class="logs-table color-highlight-dark color-primary">
+  <tr key="_header">
+    <th>Date</th>
+    <th>Channel</th>
+    <th>Event</th>
+    <th>Characters</th>
+  </tr>
+  <logs-table-row for(log in input.logs) key=log.shortId log=log on-addfilter("emit", "addfilter") />
+</table>

marko/page/logs/components/logs-table/style.less

@@ -0,0 +1,11 @@
+table.logs-table {
+  outline: 1px solid;
+  margin: 1em auto;
+  width: 90%;
+  max-width: 140ch;
+
+  a:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}

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

@@ -21,14 +21,13 @@ module.exports = class {
     if (type === "search") {
       this.state.filter = Object.assign({}, this.state.filter, {search: filter})
     } else {
-      this.state.filter = Object.assign({}, this.state.filter, {[type]: (this.state.filter[type] || []).concat(filter)})
+      this.state.filter = Object.assign({}, this.state.filter, {[type]: (this.state.filter[type] || []).filter(f => f !== filter).concat(filter)})
     }
 
     this.refresh()
   }
 
   removeFilter(type, filter) {
-
     if (type === "search") {
       this.state.filter = Object.assign({}, this.state.filter, {search: null})
       this.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-list logs=state.logs />
+  <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") />