data: Added character nicks modal

2018-10-07 11:08:48 +02:00
parent 5b28ce4bc2
commit 843dc42272
8 changed files with 176 additions and 2 deletions
@@ -0,0 +1,66 @@
+const moment = require("moment")
+
+const {charactersApi} = require("../../../../../rpdata/api/Character")
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      error: null,
+      loading: false,
+      values: {
+        newNick: "",
+      }
+    }
+  }
+
+  change(key, ev) {
+    this.state.values[key] = ev.target.value
+  }
+
+  open() {
+
+  }
+
+  close() {
+    this.emit("close")
+  }
+
+  addNick() {
+    if (this.state.loading) {
+      return
+    }
+
+    const input = {id: this.input.character.id, nick: this.state.values.newNick}
+
+    this.state.loading = true
+    charactersApi.addNick(input).then((res) => {
+      this.emit("nicks", res.nicks)
+      this.state.values = {newNick: ""}
+    }).catch(errs => {
+      console.warn("Failed to add nick:", errs)
+
+      this.state.error = "Failed to add nick: " + errs[0].message
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+
+  removeNick(nick) {
+    if (this.state.loading) {
+      return
+    }
+
+    const input = {id: this.input.character.id, nick}
+
+    this.state.loading = true
+    charactersApi.removeNick(input).then((res) => {
+      this.emit("nicks", res.nicks)
+    }).catch(errs => {
+      console.warn("Failed to remove nick:", errs)
+
+      this.state.error = "Failed to remove nick: " + errs[0].message
+    }).then(() => {
+      this.state.loading = false
+    })
+  }
+}
@@ -0,0 +1,18 @@
+<modal class="modal color-text nolabel" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
+  <h1>Manage Nicks</h1>
+
+  <p class="color-error">${state.error}</p>
+  
+  <label>Add Nick</label>
+  <div class="add-nick-row">
+    <input key="newNick" placeholder="New_Nick" class="big" on-change("change", "newNick") value=state.values.newNick />
+    <button disabled=state.loading on-click("addNick")>Add</button>
+  </div>
+  
+  <label>Current Nicks</label>
+  <div for(nick in input.character.nicks) class="existing-nick-row" >
+    <div class="content color-text">${nick}</div>
+    <button disabled=state.loading on-click("removeNick", nick)>Remove</button>
+  </div>
+
+</modal>
@@ -0,0 +1,34 @@
+div.add-nick-row {
+  vertical-align: middle !important;
+  margin-top: -1em;
+
+  input {
+    vertical-align: middle !important;
+    display: inline-block !important; 
+    width: 78% !important;
+    margin: 0 !important;
+  }
+
+  button {
+    vertical-align: middle !important;
+    display: inline-block !important; 
+    width: 20% !important;
+    padding: 0.5em 0 !important;
+  }
+}
+
+div.existing-nick-row {
+  padding: 0.25em;
+  border-bottom: 1px solid rgba(0, 220, 255, 0.125);
+
+  div.content {
+    width: 80%;
+    display: inline-block;
+  }
+
+  button {
+    width: 20% !important;
+    display: inline-block !important;
+    margin: 0 !important;
+  }
+}