logs: Added log import form.

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

@@ -0,0 +1,83 @@
+const {tz} = require("moment-timezone")
+
+const {logsApi} = require("../../../../../rpdata/api/Log")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      loading: false,
+      imported: null,
+      values: {
+        importer: "MircLike",
+        timezone: tz.guess() || "UTC",
+        channelName: "",
+        date: "",
+        data: "",
+      },
+      timezones: tz.names(),
+    }
+
+    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.emit("close")
+
+    this.state.values = {
+      importer: "MircLike",
+      timezone: tz.guess() || "UTC",
+      channelName: "",
+      date: "",
+      data: "",
+    }
+    this.state.imported = null
+    this.state.loading = false
+  }
+
+  save() {
+    if (this.state.loading) {
+      return
+    }
+    this.state.error = null;
+
+    const input = Object.assign({}, this.state.values)
+    if (input.date != "" && input.importer !== "ForumLog") {
+      input.date = new Date(input.date)
+      if (Number.isNaN(input.date)) {
+        this.state.error = "Invalid date"
+        return
+      }
+    } else if (input.importer === "MircLike") {
+      this.state.error = "Date is required for mIRC-like logs"
+      return
+    } else {
+      input.date = null;
+    }
+
+    if (input.channelName.length < 2 || input.channelName.includes(" ") || input.channelName.includes(" ") || input.channelName.charAt(0) !== "#") {
+      this.state.error = "A valid channelName name is required"
+      return
+    }
+
+    this.state.loading = true
+    logsApi.import(input).then(logs => {
+      this.state.imported = logs
+    }).catch(errs => {
+      console.warn("Import failed:", errs)
+
+      this.state.error = "Import failed: " + errs[0].message
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+}

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

@@ -0,0 +1,44 @@
+import moment from "moment"
+
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
+  <if(state.imported == null)>
+    <h1>Import Log</h1>
+
+    <p key="error" class="color-error">${state.error}</p>
+
+    <label>Type</label>
+    <select key="importer" autofocus class="big" placeholder="Kind" on-change("change", "importer") value=state.values.importer>
+      <option value="MircLike" selected=(state.values.importer === "MircLike")>mIRC-Like log</option>
+      <option value="ForumLog" selected=(state.values.importer === "ForumLog")>Forum Log</option>
+    </select>
+
+    <label>Timezone</label>
+    <select key="timezone" class="big" placeholder="Kind" on-change("change", "timezone") value=state.values.timezone>
+      <option for(tz in state.timezones) value=tz selected=(state.values.timezone === tz)>${tz}</option>
+    </select>
+
+    <label>Channel</label>
+    <input key="channelName" placeholder="(Required)" class="big" on-change("change", "channelName") value=state.values.channelName />
+
+    <if(state.values.importer === "MircLike")>
+      <label>Date</label>
+      <input key="date" class="big" placeholder="(Required)" on-change("change", "date") value=state.values.date />
+    </if>
+
+    <label>Content</label>
+    <textarea key="data" placeholder="(Required)" class="tall" on-change("change", "data") value=state.values.data />
+
+    <button disabled=state.loading on-click("save")>Import</button>
+  </if>
+  <else>
+    <h1>Import Successful</h1>
+
+    <p>The following logs were imported.</p>
+
+    <ol class="imported-log-list">
+      <for (log in state.imported)>
+        <li><a class="color-primary" href=("/logs/" + log.id)>${log.id} (${moment(log.date).format("MMMM D, YYYY")})</a></li>
+      </for>
+    </ol>
+  </else>
+</modal>

marko/page/logs/components/import-log-modal/style.less

@@ -0,0 +1,9 @@
+ol.imported-log-list {
+  color: #777;
+
+  li {
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -3,5 +3,6 @@
   <menu-link key="logs" selected=(input.selected.index && !state.filtered) icon="L" href="/logs/">All</menu-link>
   <if-permitted key="if-permitted" user=input.user permission="log.add">
     <menu-link key="add_log" dark on-click("select", "log.add") icon="+">Add Log</menu-link>
+    <menu-link key="import_log" dark on-click("select", "log.import") icon="+">Import Log</menu-link>
   </if-permitted>
 </menu>

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

@@ -5,3 +5,4 @@
   <logs-table logs=state.logs on-addfilter("addFilter") />
 </main>
 <add-log-modal enabled=(state.modal === "log.add") on-close("close") />
+<import-log-modal enabled=(state.modal === "log.import") on-close("close") />