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

const { logHeaderApi } = require("../../../../../rpdata/api/LogHeader")

module.exports = class {
  onCreate(input) {
    this.state = {
      filter: input.filter,
      logs: input.logs,
      modal: null,
    }
  }

  open(modal) {
    this.state.modal = modal
  }

  close() {
    this.state.modal = null
  }

  addFilter(type, filter) {
    if (type === "search") {
      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.state.filter = Object.assign({}, this.state.filter, {limit: 0})    

    this.updateQuery(this.state.filter)

    this.refresh()
  }

  removeFilter(type, filter) {
    if (type === "search") {
      this.state.filter = Object.assign({}, this.state.filter, {search: null})
      this.refresh()
    } else if ((this.state.filter[type] || []).length === 1) {
      this.state.filter = Object.assign({}, this.state.filter, {[type]: null})
      this.refresh()
    } else {
      const index = (this.state.filter[type] || []).indexOf(filter)
      if (index !== -1) {
        this.state.filter = Object.assign({}, this.state.filter, {[type]: this.state.filter[type].splice(0, index).concat(this.state.filter[type].splice(index + 1))},)
        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 (filter.limit) {
      queries.push("limit=" + encodeURIComponent(filter.limit.toString()))
    }

    if (queries.length > 0) {
      history.replaceState("", "", `/logs/?${queries.join("&")}`)
    } else {
      history.replaceState("", "", "/logs/")
    }
  }

  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
    })
  }
}