notherbase-fs 1.2.14 → 1.2.15

package/controllers/item.js

@@ -16,12 +16,11 @@ router.get("/all", async function(req, res) {
     }
 });
 
-router.get("/findOne", async function(req, res) {
+router.get("/", async function(req, res) {
     try {
-        let foundItem = await items.findOne({name: req.query.name});
+        let foundItem = await items.findOne({ name: req.query.name });
 
-        if (!foundItem) res.status(500).end();
-        else res.status(200).send({ foundItem: foundItem });
+        res.status(200).send({ foundItem: foundItem });
     }
     catch(err) {
         res.status(500).end();
@@ -29,11 +28,27 @@ router.get("/findOne", async function(req, res) {
     }
 });
 
-router.get("/", async function(req, res) {
+router.post("/", async function(req, res) {
     try {
-        let foundItems = await items.find({ name: { $regex: req.query.name } });
+        if (!req.body.id) {
+            await items.create({
+                name: req.body.name,
+                shortDescription: req.body.shortDescription,
+                fullDescription: req.body.fullDescription
+            });
+        }
+        else {
+            let foundItem = await items.findById(req.body.id);
 
-        res.status(200).send({ foundItems: foundItems });
+            if (foundItem) {
+                foundItem.name = req.body.name;
+                foundItem.shortDescription = req.body.shortDescription;
+                foundItem.fullDescription = req.body.fullDescription;
+                await foundItem.save();
+            }
+        }
+
+        res.status(200).end();
     }
     catch(err) {
         res.status(500).end();
@@ -41,13 +56,9 @@ router.get("/", async function(req, res) {
     }
 });
 
-router.post("/", async function(req, res) {
+router.post("/delete", async function(req, res) {
     try {
-        await items.create({
-            name: req.body.name,
-            shortDescription: req.body.shortDescription,
-            fullDescription: req.body.fullDescription
-        });
+        await items.findByIdAndDelete(req.body.id);
 
         res.status(200).end();
     }
@@ -57,5 +68,4 @@ router.post("/", async function(req, res) {
     }
 });
 
-
 module.exports = router;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notherbase-fs",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "description": "Functions to help make developing for NotherBase easier.",
   "main": "index.js",
   "scripts": {

package/test/coast/tall-beach/nono-cove/local-scripts/items.js

@@ -0,0 +1,162 @@
+class ItemFloor {
+    constructor() {
+        this.items = [];
+        this.$itemList = $(".floor#items ul.items");
+        this.$items = $(".floor#items ul.items li");
+
+        this.$read = $(".floor#items .editor .read");
+        this.$readName = $(".floor#items .editor .read #name");
+        this.$readShort = $(".floor#items .editor .read #short");
+        this.$readFull = $(".floor#items .editor .read #full");
+
+        this.$edit = $(".floor#items .editor .edit");
+        this.$editName = $(".floor#items .editor .edit #name");
+        this.$editShort = $(".floor#items .editor .edit #short");
+        this.$editFull = $(".floor#items .editor .edit #full");
+
+        this.selected = -1;
+        this.state = "reading";
+
+        this.updateItems();
+    }
+
+    hasValidSelection() {
+        return (this.selected > -1 && this.selected < this.items.length);
+    }
+
+    async updateItems() {
+        try {
+            await $.get(`/item/all`, (data) => {
+                this.items = data.foundItems;
+                this.renderItemList();
+            });
+        } 
+        catch(err) {
+            console.log(err);
+        }
+    };
+
+    renderItemList() {
+        this.$itemList.empty();
+
+        for (let i = 0; i < this.items.length; i++) {
+            $(".floor#items ul.items").append(`<li onClick="itemFloor.selectItem(${i})">${this.items[i].name}</li>`);
+        };
+
+        this.$items = $(".floor#items ul.items li");
+        this.selectItem(this.selected);
+    }
+    
+    createNewItem() {
+        if (this.state === "reading") {
+            this.items.push({
+                _id: null,
+                name: "New Item",
+                shortDescription: "Short Description",
+                fullDescription: "Full Description"
+            });
+
+            this.renderItemList();
+            this.selectItem(this.items.length - 1);
+            this.editSelectedItem();
+        }
+    };
+
+    selectItem(index) {
+        this.$items.removeClass("selected");
+        this.selected = index;
+
+        if (index > -1) {
+            $(this.$items[index]).addClass("selected");
+        }
+
+        this.readSelectedItem();
+    }
+
+    readSelectedItem() {
+        this.cancelEdit();
+
+        if (this.hasValidSelection()) {
+            this.$readName.text(this.items[this.selected].name);
+            this.$readShort.text(this.items[this.selected].shortDescription);
+            this.$readFull.text(this.items[this.selected].fullDescription);
+        }
+        else {
+            this.$readName.text("Please select an item from the list.");
+            this.$readShort.text("");
+            this.$readFull.text("");
+        }
+    }
+
+    editSelectedItem() {
+        if (this.hasValidSelection()) {
+            if (this.state != "editing") {
+                this.$read.addClass("invisible");
+            }
+    
+            this.state = "editing";
+            this.$edit.removeClass("invisible");
+    
+            this.$editName.val(this.items[this.selected].name);
+            this.$editShort.val(this.items[this.selected].shortDescription);
+            this.$editFull.val(this.items[this.selected].fullDescription);
+        }
+    }
+
+    async saveSelectedItem() {
+        if (this.state === "editing") {
+            try {
+                await $.post("/item", {
+                    id: this.items[this.selected]._id,
+                    name: this.$editName.val(),
+                    shortDescription: this.$editShort.val(),
+                    fullDescription: this.$editFull.val(),
+                }, () => {
+                    this.items[this.selected].name = this.$editName.val();
+                    this.items[this.selected].shortDescription = this.$editShort.val();
+                    this.items[this.selected].fullDescription = this.$editFull.val();
+                    this.cancelEdit();
+                    this.updateItems();
+                });
+            } 
+            catch(err) {
+                console.log(err);
+            }
+        }
+    }
+
+    cancelEdit() {
+        if (this.state === "editing") {
+            this.$edit.addClass("invisible");
+            this.$read.removeClass("invisible");
+            this.state = "reading";
+        }
+    }
+
+    async deleteSelectedItem() {
+        if (this.state === "reading" && this.hasValidSelection()) {
+            try {
+                await $.post("/item/delete", {
+                    id: this.items[this.selected]._id
+                }, () => {
+                    this.selectItem(-1);
+                    this.updateItems();
+                });
+            } 
+            catch(err) {
+                console.log(err);
+            }
+        }
+    }
+}
+
+let itemFloor = new ItemFloor();
+
+
+
+
+
+
+$(".floor button#toggle").on("click", function (e) {
+    $(e.target.parentElement).find(".content").toggleClass("invisible");
+});

package/test/coast/tall-beach/nono-cove/styles/items-floor.css

@@ -0,0 +1,92 @@
+:root {
+    --bgColor: rgb(37, 37, 37);
+    --bgColorBright: rgb(66, 66, 66);
+    --shadowColor: rgb(26, 26, 26);
+    --textColor: rgb(185, 135, 69);
+    --textColorBright: rgb(221, 181, 130);
+    --standardBorder: 1px solid var(--textColor);
+    --standardRadius: 5px;
+}
+
+.floor#items ul.items {
+    width: 40%;
+    height: 800px;
+    border: var(--standardBorder);
+    padding: 5px;
+    margin: 0;
+}
+
+.floor#items ul.items li {
+    list-style: none;
+    cursor: pointer;
+}
+
+.floor#items ul.items li:hover {
+    background-color: var(--bgColorBright);
+}
+
+.floor#items ul.items li.selected {
+    background-color: var(--shadowColor);
+}
+
+.floor#items .editor {
+    width: 55%;
+    height: 800px;
+    border: var(--standardBorder);
+    padding: 10px;
+}
+
+.floor#items .read h5 {
+    margin: 10px;
+}
+
+.floor#items .read #name {
+    margin: 20px;
+}
+
+.floor#items .read #short {
+    width: 100%;
+    height: 100px;
+    border: var(--standardBorder);
+    padding: 2px;
+}
+
+.floor#items .read #full {
+    width: 100%;
+    height: 250px;
+    border: var(--standardBorder);
+    padding: 2px;
+}
+
+.floor#items .edit h5 {
+    margin: 10px;
+}
+
+
+.floor {
+    width: 100%;
+    min-height: 50px;
+    border: 1px solid var(--shadowColor);
+    background-color: var(--bgColor);
+    padding: 10px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.floor h2 {
+    width: 90%;
+}
+
+.floor button {
+    margin: 0;
+}
+
+.floor .content {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+}

package/test/coast/tall-beach/nono-cove/views/index.ejs

@@ -11,6 +11,50 @@
 
 <hr>
 
+<section class="floor" id="items">
+    <h2>Items</h2>
+    <button id="toggle">Toggle</button>
+
+    <div class="content invisible">
+        <ul class="items">
+
+        </ul>
+    
+        <div class="editor">
+            <div class="edit invisible">
+                <h5>Item Name:</h5>
+                <input type="text" id="name">
+            
+                <h5>Short Item Description:</h5>
+                <textarea id="short" name="short" cols="30" rows="3"></textarea>
+            
+                <h5>Full Item Description:</h5>
+                <textarea id="full" name="full" cols="30" rows="10"></textarea>
+
+                <button id="cancel" onclick="itemFloor.cancelEdit()">Cancel</button>
+                <button id="save" onclick="itemFloor.saveSelectedItem()">Save</button>
+            </div>
+
+            <div class="read">
+                <h5 id="name">Item Name</h5>
+            
+                <h5>Short Item Description:</h5>
+                <p id="short"></p>
+            
+                <h5>Full Item Description:</h5>
+                <p id="full"></p>
+
+                <button id="new" onclick="itemFloor.createNewItem()">Create New</button>
+                <button id="edit" onclick="itemFloor.editSelectedItem()">Edit</button>
+                <button id="delete" onclick="itemFloor.deleteSelectedItem()">Delete</button>
+                <button id="refresh" onclick="itemFloor.updateItems()">Refresh List</button>
+            </div>
+        </div>
+    </div>
+</section>
+
+<hr>
+
 <a href="/the-front" class="to">
     Go to The Front
 </a>

package/test/test-index.js

@@ -26,7 +26,8 @@ const world = {
                                     {
                                         name: "",
                                         options: {
-                                            localScripts: ["game"],
+                                            localScripts: ["game", "items"],
+                                            styles: ["items-floor"],
                                             serverScripts: ["game"]
                                         }
                                     },