From 5b28ce4bc26ed163ab2c3d01fe847004d0f06f68 Mon Sep 17 00:00:00 2001 From: Gisle Aune Date: Sat, 6 Oct 2018 14:26:38 +0200 Subject: [PATCH] data: Added character list/add/edit/remove --- .../components/compact-list-item/index.marko | 3 + marko/components/compact-list-item/style.less | 5 + .../compact-list-options/index.marko | 5 + .../compact-list-options/style.less | 28 ++++++ .../compact-list-property/index.marko | 4 + .../compact-list-property/style.less | 24 +++++ marko/components/compact-list/index.marko | 3 + marko/components/compact-list/style.less | 13 +++ marko/components/layout-navbar/index.marko | 1 + marko/components/menu-link/style.less | 3 +- marko/global/colors.less | 34 +++++++ marko/page/data/characters.marko | 6 ++ .../add-character-modal/component.js | 69 +++++++++++++ .../add-character-modal/index.marko | 22 +++++ .../components/character-list/index.marko | 5 + .../data/components/character/component.js | 20 ++++ .../data/components/character/index.marko | 12 +++ .../components/characters-page/component.js | 36 +++++++ .../components/characters-page/index.marko | 5 + .../data/components/data-menu/index.marko | 9 ++ .../edit-character-modal/component.js | 57 +++++++++++ .../edit-character-modal/index.marko | 16 ++++ .../remove-character-modal/component.js | 42 ++++++++ .../remove-character-modal/index.marko | 9 ++ routes/data/characters.js | 15 +++ routes/data/index.js | 8 ++ rpdata/api/Character.js | 96 ++++++++++++++++++- server.js | 4 +- 28 files changed, 551 insertions(+), 3 deletions(-) create mode 100644 marko/components/compact-list-item/index.marko create mode 100644 marko/components/compact-list-item/style.less create mode 100644 marko/components/compact-list-options/index.marko create mode 100644 marko/components/compact-list-options/style.less create mode 100644 marko/components/compact-list-property/index.marko create mode 100644 marko/components/compact-list-property/style.less create mode 100644 marko/components/compact-list/index.marko create mode 100644 marko/components/compact-list/style.less create mode 100644 marko/page/data/characters.marko create mode 100644 marko/page/data/components/add-character-modal/component.js create mode 100644 marko/page/data/components/add-character-modal/index.marko create mode 100644 marko/page/data/components/character-list/index.marko create mode 100644 marko/page/data/components/character/component.js create mode 100644 marko/page/data/components/character/index.marko create mode 100644 marko/page/data/components/characters-page/component.js create mode 100644 marko/page/data/components/characters-page/index.marko create mode 100644 marko/page/data/components/data-menu/index.marko create mode 100644 marko/page/data/components/edit-character-modal/component.js create mode 100644 marko/page/data/components/edit-character-modal/index.marko create mode 100644 marko/page/data/components/remove-character-modal/component.js create mode 100644 marko/page/data/components/remove-character-modal/index.marko create mode 100644 routes/data/characters.js create mode 100644 routes/data/index.js diff --git a/marko/components/compact-list-item/index.marko b/marko/components/compact-list-item/index.marko new file mode 100644 index 0000000..45892c2 --- /dev/null +++ b/marko/components/compact-list-item/index.marko @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/marko/components/compact-list-item/style.less b/marko/components/compact-list-item/style.less new file mode 100644 index 0000000..19a669e --- /dev/null +++ b/marko/components/compact-list-item/style.less @@ -0,0 +1,5 @@ +tr.compact-list-item { + user-select: none; + outline: 0.05px dotted; + vertical-align: middle; +} \ No newline at end of file diff --git a/marko/components/compact-list-options/index.marko b/marko/components/compact-list-options/index.marko new file mode 100644 index 0000000..6fa49e1 --- /dev/null +++ b/marko/components/compact-list-options/index.marko @@ -0,0 +1,5 @@ + +
+ +
+ \ No newline at end of file diff --git a/marko/components/compact-list-options/style.less b/marko/components/compact-list-options/style.less new file mode 100644 index 0000000..5072def --- /dev/null +++ b/marko/components/compact-list-options/style.less @@ -0,0 +1,28 @@ +td.compact-list-options { + width: 20%; + padding: 0 0.5ch; + + + div.content { + font-size: 1em; + text-align: right; + + a { + display: inline-block; + margin-right: 1ch; + opacity: 0.5; + } + a:hover { + opacity: 1; + cursor: pointer; + } + } +} + +td.compact-list-options.short { + width: 10%; +} + +td.compact-list-options.long { + width: 30%; +} \ No newline at end of file diff --git a/marko/components/compact-list-property/index.marko b/marko/components/compact-list-property/index.marko new file mode 100644 index 0000000..31505f5 --- /dev/null +++ b/marko/components/compact-list-property/index.marko @@ -0,0 +1,4 @@ + +
${input.label}
+
${input.value}
+ \ No newline at end of file diff --git a/marko/components/compact-list-property/style.less b/marko/components/compact-list-property/style.less new file mode 100644 index 0000000..3e42a79 --- /dev/null +++ b/marko/components/compact-list-property/style.less @@ -0,0 +1,24 @@ +td.compact-list-property { + width: 20%; + padding: 0 0.5ch; + + div.label { + font-size: 0.5em; + line-height: 1em; + padding-top: 0.5em; + } + + div.value { + font-size: 0.75em; + padding-bottom: 0.25em; + user-select: text; + } +} + +td.compact-list-property.short { + width: 10%; +} + +td.compact-list-property.long { + width: 30%; +} \ No newline at end of file diff --git a/marko/components/compact-list/index.marko b/marko/components/compact-list/index.marko new file mode 100644 index 0000000..fd42a7f --- /dev/null +++ b/marko/components/compact-list/index.marko @@ -0,0 +1,3 @@ + + +
\ No newline at end of file diff --git a/marko/components/compact-list/style.less b/marko/components/compact-list/style.less new file mode 100644 index 0000000..12dcee1 --- /dev/null +++ b/marko/components/compact-list/style.less @@ -0,0 +1,13 @@ +table.compact-list { + padding-top: 0.5em; + padding-bottom: 3em; + + width: 90%; + max-width: 100ch; + padding-right: 1em; + + margin: auto; + + border-collapse: separate; + border-spacing: 0 0.5em; +} \ No newline at end of file diff --git a/marko/components/layout-navbar/index.marko b/marko/components/layout-navbar/index.marko index a7efd3c..14f65d5 100644 --- a/marko/components/layout-navbar/index.marko +++ b/marko/components/layout-navbar/index.marko @@ -6,5 +6,6 @@
Story Logs + Data
\ No newline at end of file diff --git a/marko/components/menu-link/style.less b/marko/components/menu-link/style.less index 875c6cc..72d7c2d 100644 --- a/marko/components/menu-link/style.less +++ b/marko/components/menu-link/style.less @@ -2,6 +2,7 @@ div.menu-link { width: 100%; padding-left: 0.5ch; font-size: 1.1em; + padding-bottom: 0.125em; white-space: nowrap; @@ -10,7 +11,7 @@ div.menu-link { div.icon { display: inline-block; width: 3ch; - padding: 0.15em 0.125em; + padding: 0 0.125em; text-align: center; vertical-align: middle; } diff --git a/marko/global/colors.less b/marko/global/colors.less index c6ead63..893f91c 100644 --- a/marko/global/colors.less +++ b/marko/global/colors.less @@ -66,6 +66,32 @@ body.theme-logs { } } +body.theme-data { + .color-menu { + color: #775; + } + .menu-link.selected { + background-color: rgba(204, 204, 34, 0.226); + } + .menu-link:hover, .Menu > .head-menu > a:hover { + background-color: rgba(204, 204, 34, 0.25); + } + .color-primary, button, input:focus, textarea:focus, select:focus, .modal h1, .modal h2, .modal label, .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4, .markdown-content hr, .markdown-content a { + color: #CC2; + } + .color-text, input, textarea, select { + color: #BBB; + } + .color-highlight-dark { + background-color: rgba(18, 8, 0, 0.50); + } + .color-highlight-primary { + background-color: rgba(204, 204, 34, 0.25); + color: #CC2; + } +} + + div.markdown-content .orange, body.theme-logs div.markdown-content blockquote, body.theme-logs div.markdown-content table, body.theme-logs div.markdown-content pre { background-color: rgba(221, 170, 17, 0.125); color: #DA1; @@ -90,6 +116,14 @@ div.markdown-content .green, body.theme-mapp div.markdown-content blockquote, bo color: #1F8; } } +div.markdown-content .yellow, body.theme-data div.markdown-content blockquote, body.theme-data div.markdown-content table, body.theme-data div.markdown-content pre { + background-color: rgba(204, 204, 34, 0.25); + color: #CC2; + + h1, h2, h3 { + color: #CC2; + } +} /* Tag colors */ .color-tag-event { diff --git a/marko/page/data/characters.marko b/marko/page/data/characters.marko new file mode 100644 index 0000000..8fab7d2 --- /dev/null +++ b/marko/page/data/characters.marko @@ -0,0 +1,6 @@ + + <@body> + + + + diff --git a/marko/page/data/components/add-character-modal/component.js b/marko/page/data/components/add-character-modal/component.js new file mode 100644 index 0000000..44c59ac --- /dev/null +++ b/marko/page/data/components/add-character-modal/component.js @@ -0,0 +1,69 @@ +const moment = require("moment") + +const {charactersApi} = require("../../../../../rpdata/api/Character") + +module.exports = class { + onCreate(input) { + this.state = { + error: null, + loading: false, + values: { + name: "", + nick: "", + shortName: "", + author: "", + description: "", + } + } + } + + onInput(input) { + this.state.values = Object.assign({}, this.state.values, {author: input.user.name}) + } + + change(key, ev) { + this.state.values[key] = ev.target.value + } + + open() { + + } + + close() { + this.emit("close") + } + + save() { + if (this.state.loading) { + return + } + + const values = Object.assign({}, this.state.values) + if (values.name.length < 2) { + this.state.error = "Name is too short (min: 2)" + return + } + if (values.author == "") { + delete values.author + } + + this.state.loading = true + charactersApi.add(this.state.values).then((res) => { + this.emit("added", res) + this.emit("close") + this.state.values = { + name: "", + nick: "", + shortName: "", + author: this.input.user.name, + description: "", + } + }).catch(errs => { + console.warn("Failed to edit:", errs) + + this.state.error = "Failed to edit: " + errs[0].message + }).then(() => { + this.state.loading = false + }) + } +} \ No newline at end of file diff --git a/marko/page/data/components/add-character-modal/index.marko b/marko/page/data/components/add-character-modal/index.marko new file mode 100644 index 0000000..3b29470 --- /dev/null +++ b/marko/page/data/components/add-character-modal/index.marko @@ -0,0 +1,22 @@ + +

Add Character

+ +

${state.error}

+ + + + + + + + + + + + + + +