logs: Added default limit that's cleared by adding a filter or clicking show more at the bottom.

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

@@ -24,11 +24,12 @@ module.exports = class {
       } 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.state.filter = Object.assign({}, this.state.filter, {limit: 0})    
+
     this.updateQuery(this.state.filter)
 
     this.refresh()
@@ -67,6 +68,9 @@ module.exports = class {
     if (filter.search) {
       queries.push("search=" + encodeURIComponent(filter.search))
     }
+    if (filter.limit) {
+      queries.push("limit=" + encodeURIComponent(filter.limit.toString()))
+    }
 
     if (queries.length > 0) {
       history.replaceState("", "", `/logs/?${queries.join("&")}`)
@@ -75,6 +79,13 @@ module.exports = class {
     }
   }
 
+  clearLimit() {
+    this.state.filter = Object.assign({}, this.state.filter, {limit: 0})
+
+    this.refresh()
+    this.updateQuery(this.state.filter)
+  }
+
   refresh() {
     logHeaderApi.list(this.state.filter).then(logs => {
       this.state.logs = logs

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

@@ -1,8 +1,13 @@
 <background src="/assets/images/bg.png" opacity=0.25 />
 <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">
+<main class="logs-page with-right">
   <logs-table logs=state.logs on-addfilter("addFilter") />
+  <if(state.filter.limit > 0)>
+    <div class="show-more-button" on-click("clearLimit")>
+      <span>Show All</span>
+    </div>
+  </if>
 </main>
 <add-log-modal enabled=(state.modal === "log.add") on-close("close") />
 <import-log-modal enabled=(state.modal === "log.import") on-close("close") />

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

@@ -0,0 +1,17 @@
+main.logs-page {
+  div.show-more-button {
+    margin: 1em 0;
+    padding: 0.5em 2em;
+    font-size: 2em;
+    text-align: center;
+    user-select: none;
+
+    color: #DA1;
+  }
+
+  div.show-more-button:hover {
+    cursor: pointer;
+
+    text-decoration: underline;
+  }
+}

routes/logs/index.js

@@ -8,19 +8,26 @@ const {channelApi} = require("../../rpdata/api/Channel")
 const listTemplate = require("../../marko/page/logs/list.marko")
 
 router.get("/", async(req, res) => {
-  const filter = {limit: 0}
+  const filter = {limit: 75}
 
   if (req.query.characters) {
     filter.characters = req.query.characters.split(",")
+    filter.limit = 0
   }
   if (req.query.channels) {
     filter.channels = req.query.channels.split(",")
+    filter.limit = 0
   }
   if (req.query.events) {
     filter.events = req.query.events.split(",")
+    filter.limit = 0
   }
   if (req.query.search) {
     filter.search = req.query.search
+    filter.limit = 0
+  }
+  if (req.query.limit) {
+    filter.limit = parseInt(req.query.limit)
   }
 
   try {