logs, logs-content: Added basic view of logs and added characters to logs

2018-09-29 13:38:18 +02:00
parent 35cee41d3a
commit ed01006b21
27 changed files with 442 additions and 13 deletions
@@ -0,0 +1,8 @@
+<menu user=input.user>
+  <menu-header>Log</menu-header>
+  <menu-link href=("/logs/?channels="+input.log.channel.name) icon="#">${input.log.channel.name}</menu-link>
+  <menu-link if(input.log.channel.eventName) href=("/logs/?channels="+input.log.channel.eventName) icon="E">${input.log.channel.eventName}</menu-link>
+  <for(character in input.log.characters)>
+    <menu-link href=("/logs/?characters="+character.id) icon="C">${character.name} <span class="weak">(${character.author})</span></menu-link>
+  </for>
+</menu>
@@ -0,0 +1,17 @@
+const moment = require("moment")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      log: input.log
+    }
+  }
+
+  get title() {
+    if (this.state.log.title) {
+      return this.state.log.title
+    }
+
+    return `${this.state.log.channel.name} – ${moment(this.state.log.date).format("MMMM D, YYYY")}`
+  }
+}
@@ -0,0 +1,7 @@
+<logs-content-menu user=input.user log=state.log />
+<main>
+  <div class="logs-content">
+    <h1 class="color-primary">${component.title}</h1>
+    <post for(post in state.log.posts) post=post characters=state.log.characters />
+  </div>
+</main>
@@ -0,0 +1,10 @@
+div.logs-content {
+  width: 90%;
+  max-width: 75ch;
+  margin: auto;
+
+  h1 {
+    font-weight: 200;
+    text-align: center;
+  }
+}
@@ -0,0 +1,50 @@
+const moment = require("moment")
+
+module.exports = class {
+  onCreate() {
+    this.state = {text: null, color: "color-menu", href: null, tooltip: null}
+  }
+
+  onInput(input) {
+    if (this.state != null) {
+      this.updateState(input)
+    }
+  }
+
+  updateState({kind, weak, value, updated}) {
+    this.state = {text: null, color: "color-menu", href: null, tooltip: null}
+
+    if (value == null || value == "") {
+      return
+    }
+
+    switch (kind) {
+      case "timestamp": {
+        const m = moment(value)
+        if (m.year() < 2) {
+          break
+        }
+
+        this.state.tooltip = m.format("YYYY-MM-DD HH:mm:ss")
+        this.state.text = `[${m.format("HH:mm")}]`
+
+        break
+      }
+  
+      case "author": {
+        this.state.text = value
+        this.state.tooltip = "See all stories by " + value
+        this.state.href = `/story/by-author/${value}/`
+
+        break
+      }
+  
+      default: {
+        this.state.color = "color-menu"
+        this.state.text = value
+
+        break
+      }
+    }
+  }
+}
@@ -0,0 +1,6 @@
+<if(state.text != null && state.text != "")>
+  <div class=["post-meta", input.kind, state.color, input.weak ? "weak" : null] title=state.tooltip>
+    <a if(state.href != null) href=state.href>${state.text}</a>
+    <span else>${state.text}</span>
+  </div>
+</if>
@@ -0,0 +1,20 @@
+div.post-meta {
+  display: inline-block;
+  padding: 0;
+  padding-right: 1em;
+  margin: 0;
+
+  user-select: none;
+
+  a {
+    color: inherit;
+    border-bottom: 0.25px dotted;
+  }
+  a:hover {
+    border-bottom: 0.5px solid;    
+  }
+}
+
+div.post-meta.weak {
+  opacity: 0.5;
+}
@@ -0,0 +1,50 @@
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      shortName: "",
+      name: "",
+      text: "",
+    }
+
+    this.updatePost(input)
+  }
+
+  onInput(input) {
+    if (this.state == null) {
+      return
+    }
+
+    this.updatePost(input)
+  }
+
+  updatePost(input) {
+    this.state.shortName = input.post.nick.split("_").shift()
+    this.state.name = input.post.nick
+    
+    this.state.text = input.post.text.replace(/\x02/g, "**")
+
+    if (input.post.kind === "text" && !this.state.text.includes("\"")) {
+      this.state.text = '"' + this.state.text + '"'
+    }
+
+    if (!input.post.nick.startsWith("=")) {
+      const postNick = input.post.nick.replace("'s", "").replace("s'", "s")
+      for (const character of input.characters) {
+        for (const nick of character.nicks) {
+          if (nick === postNick) {
+            this.state.shortName = character.shortName
+            return
+          }
+        }
+      }
+    }
+  }
+
+  kindClass(prefix) {
+    if (this.input.post == null) {
+      return
+    }
+
+    return `${prefix}${this.input.post.kind.replace(".", "-")}`
+  }
+}
@@ -0,0 +1,20 @@
+<div class=["post", component.kindClass("post-type")]>
+  <div class="post-meta-row">
+    <post-meta kind="timestamp" value=input.post.time />
+    <post-meta kind="nick" value=input.post.nick />
+  </div>
+  <div if(input.post.kind.startsWith("annotation.")) class="post-body" >
+    <annotation level=(input.post.kind.substring(11))>
+      <markdown class="post-content" source=state.text />
+    </annotation>
+  </div>
+  <div if(input.post.kind === "scene") class="post-body color-text">
+    <markdown class="post-content post-scene" source=state.text />
+  </div>
+  <div if(input.post.kind === "action") class="post-body color-text">
+    <markdown class="post-content post-action" source=(state.shortName + " " + state.text) />
+  </div>
+   <div if(input.post.kind === "text") class="post-body color-text">
+    <markdown class="post-content post-text" source=state.text />
+  </div>
+</div>
@@ -0,0 +1,36 @@
+div.post {
+  margin-bottom: 1ch;
+
+  .post-meta-row {
+    padding: 0;
+    margin: 0;
+  }
+  
+  div.post-body {
+    font-size: 1.25em;
+
+    div.nick-wrapper {
+      display: inline;
+
+      .nick-decoration {
+        display: inline;
+      }
+
+      .nick {
+        display: inline;
+      }
+    }
+
+    div.post-content {
+      display: inline;
+    }
+
+    div.annotation {
+      margin-top: 0.33em;
+    }
+  }
+  div.post-body p:first-of-type {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}
@@ -0,0 +1,6 @@
+<include("../layout", {title: "Logs", site: "logs"})>
+  <@body>
+    <background src="/assets/images/bg.png" opacity=0.25 />
+    <page log=input.log user=input.user selected=input.selected />
+  </@body>
+</include>
@@ -6,6 +6,7 @@ import moment from "moment"
                     icon="L"
                     link=("/logs/" + log.id)
                     description=log.description
+                     characters=log.characters
                     name=(log.title || (log.channelName + " - " + moment(log.date).format("MMMM D, YYYY")))
                     tags=[{kind: "Location", name: log.channelName}, {kind: "Event", name: log.event}]
                     enableAllTags=true
@@ -12,7 +12,7 @@ import moment from "moment"
    <chapter-meta weak kind="date" value=input.chapter.createdDate />
    <chapter-meta weak kind="author" value=input.chapter.author />
  </div>
-  <markdown class="chapter-content" source=input.chapter.source />
+  <markdown class="chapter-content color-text" source=input.chapter.source />

  <edit-chapter-modal enabled=(state.modal === "edit") chapter=input.chapter on-close("close") on-edit("updateChapter") />
  <remove-chapter-modal enabled=(state.modal === "remove") chapter=input.chapter on-close("close") on-remove("removeChapter") />
@@ -31,4 +31,8 @@
      opacity: 1;
    }
  }
+
+  div.chapter-content {
+    font-size: 1.25em;
+  }
 }