story: Added add story modal, reorganized story page to allow modals and live updates.

2018-09-23 15:57:53 +02:00
parent a2d949edaf
commit ae31accd81
13 changed files with 201 additions and 8 deletions
@@ -0,0 +1,79 @@
+const moment = require("moment")
+
+const {storyApi} = require("../../../../../rpdata/api/Story")
+
+module.exports = class {
+  onCreate() {
+    this.state = {
+      error: null,
+      values: {
+        name: "",
+        fictionalDate: "",
+        category: "Info",
+        open: false,
+        listed: false,
+      },
+      tags: [],
+      loading: false,
+    }
+
+    this.filled = false
+  }
+
+  addTag(tag) {
+    if (tag.name == "" || tag.kind == "") {
+      return
+    }
+
+    this.state.tags = this.state.tags.filter(t => t.kind !== tag.kind || t.name !== tag.name).concat([tag])
+  }
+
+  removeTag(tag) {
+    this.state.tags = this.state.tags.filter(t => t.kind !== tag.kind || t.name !== tag.name)
+  }
+
+  change(key, ev) {
+    this.state.values[key] = ev.target.value
+    this.state.values = Object.assign({}, this.state.values)
+  }
+
+  save() {
+    const values = this.state.values
+    
+    let fictionalDate = new Date(values.fictionalDate + " UTC")
+    if (values.fictionalDate != "") {
+      if (Number.isNaN(fictionalDate)) {
+        this.state.error = `Could not parse ${values.fictionalDate} as date`
+        return
+      }
+    } else {
+      fictionalDate = null
+    }
+    
+    const input = {name: values.name, category: values.category, open: values.open, listed: values.listed, tags: this.state.tags}
+    if (fictionalDate != null) {
+      input.fictionalDate = fictionalDate
+    }
+
+    console.log(input)
+
+    this.state.loading = true
+    storyApi.add(input).then(data => {
+      this.emit("add", data)
+      this.emit("close")
+
+      this.state.tags = []
+      this.state.values = {name: "", fictionalDate: "", category: "", open: "", listed: ""}
+
+      window.location = `/story/${data.id}/`
+    }).catch(errs => {
+      console.warn("Failed to edit:", errs)
+      this.state.error = "Failed to edit: " + errs[0].message
+      this.state.loading = false
+    })
+  }
+
+  close() {
+    this.emit("close")
+  }
+}
@@ -0,0 +1,33 @@
+<modal class="modal color-text nolabel" key="modal2" enabled=(input.enabled) closable on-close("close") >
+  <h1>Edit Story</h1>
+
+  <p key="error" class="color-error">${state.error}</p>
+
+  <h2>Meta</h2>
+  <label>Title</label>
+  <input key="name" placeholder="Name" class="big" on-change("change", "name") value=state.values.name />
+
+  <label>IC Date</label>
+  <input key="icdate" placeholder="IC Date" on-change("change", "fictionalDate") value=state.values.fictionalDate />
+  
+  <label>Category</label>
+  <select key="category" placeholder="Kind" on-change("change", "category")>
+    <option for(category in input.categories) value=category.name selected=(state.values.category === category.name)>${category.name}</option>
+  </select>
+
+  <h2>Tags</h2>
+  <story-tag-options small tags=state.tags loading=state.loading on-remove("removeTag") on-add("addTag") />  
+
+  <h2>Options</h2>
+  <toggle value=state.values.listed on="Listed" off="Unlisted" 
+          onDesc="The story will be visible on the front page."
+          offDesc="A direct link is required to view this story."
+          on-change("change", "listed") />
+  <toggle value=state.values.open on="Open" off="Closed"
+          onDesc="Other authors can add chapters to this story."
+          offDesc="Only you can add chapters to this story."
+          on-change("change", "open") />
+
+  <h2></h2>
+  <button disabled=state.loading on-click("save")>Add Story</button>  
+</modal>