Browse Source

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

1.1
Gisle Aune 6 years ago
parent
commit
ea89975b14
  1. 10
      marko/page/logs/components/logs-table-row/component.js
  2. 22
      marko/page/logs/components/logs-table-row/index.marko
  3. 19
      marko/page/logs/components/logs-table-row/style.less
  4. 11
      marko/page/logs/components/logs-table/index.marko
  5. 11
      marko/page/logs/components/logs-table/style.less
  6. 3
      marko/page/logs/components/page/component.js
  7. 2
      marko/page/logs/components/page/index.marko

10
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"),
}
}
}

22
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>

19
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%;
}
}

11
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>

11
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;
}
}

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

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

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

@ -1,7 +1,7 @@
<background src="/assets/images/bg.png" opacity=0.25 /> <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 /> <logs-menu key="menu" on-select("open") on-removefilter("removeFilter") selected=(input.selected || {}) user=input.user filter=state.filter characters=input.characters />
<main> <main>
<logs-list logs=state.logs />
<logs-table logs=state.logs on-addfilter("addFilter") />
</main> </main>
<add-log-modal enabled=(state.modal === "log.add") on-close("close") /> <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") /> <add-filter-modal enabled=(state.modal === "filter.add") characters=input.characters filter=state.filter on-add("addFilter") on-close("close") />
Loading…
Cancel
Save