7 changed files with 196 additions and 11 deletions
-
83marko/page/logs/components/import-log-modal/component.js
-
44marko/page/logs/components/import-log-modal/index.marko
-
9marko/page/logs/components/import-log-modal/style.less
-
1marko/page/logs/components/logs-menu/index.marko
-
1marko/page/logs/components/page/index.marko
-
22package-lock.json
-
47rpdata/api/Log.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 |
|||
}) |
|||
} |
|||
} |
|||
@ -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> |
|||
@ -0,0 +1,9 @@ |
|||
ol.imported-log-list { |
|||
color: #777; |
|||
|
|||
li { |
|||
a:hover { |
|||
text-decoration: underline; |
|||
} |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue