logs: Added add log form.

marko/page/logs/components/add-log-modal/component.js

@@ -0,0 +1,61 @@
+const moment = require("moment")
+
+const {logsApi} = require("../../../../../rpdata/api/Log")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      loading: false,
+      values: {
+        date: "",
+        channel: "",
+        title: "",
+        event: "",
+        description: "",
+        open: false,
+      },
+    }
+
+    this.first = false
+  }
+
+  change(key, ev) {
+    this.state.values[key] = ev.target.value
+    this.state.values = Object.assign({}, this.state.values)
+  }
+
+  open() {
+    this.state.loading = false
+  }
+
+  close() {
+    this.first = false
+    this.emit("close")
+  }
+
+  save() {
+    if (this.state.loading) {
+      return
+    }
+
+    const input = Object.assign({}, this.state.values)
+    
+    input.date = new Date(input.date)
+    if (Number.isNaN(input.date)) {
+      this.state.error = "Invalid date"
+      return
+    }
+
+    this.state.loading = true
+    logsApi.add(input).then(log => {
+      window.location = `/logs/${log.id}/`
+    }).catch(errs => {
+      console.warn("Failed to add:", errs)
+
+      this.state.error = "Failed to add: " + errs[0].message
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+}

marko/page/logs/components/add-log-modal/index.marko

@@ -0,0 +1,32 @@
+import moment from "moment"
+
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
+  <h1>Add Log</h1>
+
+  <p key="error" class="color-error">${state.error}</p>
+
+  <label>Date</label>
+  <input key="date" placeholder="(Required)" class="big" on-change("change", "date") value=state.values.date />
+
+  <label>Channel</label>
+  <input key="channel" placeholder="(Required)" class="big" on-change("change", "channel") value=state.values.channel />
+
+  <label>Title</label>
+  <input key="title" placeholder="(Optional)" class="big" on-change("change", "title") value=state.values.title />
+
+  <label>Event Name</label>
+  <input key="event" placeholder="(Optional)" class="big" on-change("change", "event") value=state.values.event />
+  
+  <label>Description</label>
+  <textarea key="description" placeholder="(Optional)" on-change("change", "description") value=state.values.description />
+
+  <label>Options</label>
+  <toggle value=state.values.open on="Open" off="Closed"
+          onDesc=("IRC posts in "+state.values.channel.name+" will end up here.")
+          offDesc="The logbot will not append to this log."
+          on-change("change", "open") />
+
+  <p if(state.values.open) key="warning" class="color-danger">Opening a log will close all others for the same channels.</p>  
+
+  <button disabled=state.loading on-click("save")>Save</button>
+</modal>

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

@@ -0,0 +1,5 @@
+module.exports = class {
+  select(value) {
+    this.emit("select", value)
+  }
+}

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

@@ -1,6 +1,7 @@
 <menu user=input.user>
   <menu-header>Logs</menu-header>
   <menu-link selected=input.selected.index icon="L" href="/logs/">All</menu-link>
+  <menu-link dark on-click("select", "add") icon="+">Add Log</menu-link>
   <menu-gap />
   <menu-header>Filters</menu-header>
   <menu-gap />

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

@@ -3,10 +3,19 @@ const {logHeaderApi} = require("../../../../../rpdata/api/LogHeader")
 module.exports = class {
   onCreate(input) {
     this.state = {
-      logs: input.logs
+      logs: input.logs,
+      modal: null,
     }
   }
 
+  open(modal) {
+    this.state.modal = modal
+  }
+
+  close() {
+    this.state.modal = null
+  }
+
   onMount() {
     logHeaderApi.list({limit: 0}).then(logs => {
       this.state.logs = logs

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

@@ -1,5 +1,6 @@
 <background src="/assets/images/bg.png" opacity=0.25 />
-<logs-menu key="menu" selected=(input.selected || {}) user=input.user />
+<logs-menu key="menu" on-select("open") selected=(input.selected || {}) user=input.user />
 <main>
   <logs-list logs=state.logs />
-</main>
+</main>
+<add-log-modal enabled=(state.modal === "add") on-close("close") />

rpdata/api/Log.js

@@ -86,7 +86,7 @@ class LogAPI {
   add(input) {
     return query(`
       mutation FindLog($input: LogAddInput!) {
-        log(input: $input) {
+        addLog(input: $input) {
           id
           shortId
           date