diff --git a/package-lock.json b/package-lock.json index 9d41827..bdb177c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13868,6 +13868,11 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "xmlhttprequest": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz", + "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw=" + }, "xregexp": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.3.0.tgz", diff --git a/package.json b/package.json index 0ba0fbe..6f41ab9 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "react-redux": "^7.2.0", "react-scripts": "3.4.1", "react-tabs": "^3.1.0", - "redux": "^4.0.5" + "redux": "^4.0.5", + "xmlhttprequest": "^1.8.0" }, "scripts": { "start": "react-scripts start", diff --git a/src/App.js b/src/App.js index d87325a..2b2aca3 100644 --- a/src/App.js +++ b/src/App.js @@ -10,6 +10,7 @@ import SpellsTab from './components/tabs/spells.js' import InventoryTab from './components/tabs/inventory.js' import LevelsTab from './components/tabs/levels.js' + export default class App extends React.Component { constructor(props) { super(props); @@ -26,6 +27,9 @@ export default class App extends React.Component { this.removeFromList = this.removeFromList.bind(this); this.addToAvailableList = this.addToAvailableList.bind(this); + this.formSubmitHandler = this.formSubmitHandler.bind(this); + + /*TODO: ALL of this is placeholder info, just to check math and logic. * Every single value here will need to be replaced with data nabbed from the server. * However, for right now, this will function for testing. @@ -153,19 +157,22 @@ export default class App extends React.Component { copper: 0, cantrips: [], - availableCantrips: ['firebolt', 'prestigitation', 'ray of frost'], + availableCantrips: [], spells: [], - availableSpells: ['shield', 'charm person', 'thunderwave'], + availableSpells: [], feats: [], - availableFeats: ['fleet', 'great weapon master', 'warcaster'], + availableFeats: [], items: [], - availableItems: ['shortsword', 'staff', 'bag of holding'], + availableItems: [], classLevels: [], - availableClassLevels: ['fighter', 'sorcerer', 'monk', 'ranger', 'rogue'], + availableClassLevels: [], + + + Host: "http://localhost:8765", }; } @@ -596,6 +603,104 @@ export default class App extends React.Component { } } + + + + + + + getData(slug, handleGen) { + + var xhr = new XMLHttpRequest(); + xhr.open("GET", this.state.Host + slug); + // When doing authentication: + //xhr.withCredentials = true; + //xhr.open(method, action, true, username, password); + xhr.responseType = "json" + xhr.addEventListener("load", function(e) { handleGen(xhr, e) }); + xhr.send(); + + } + + formSubmitHandler(e) { + var that = this; + e.stopPropagation(); + e.preventDefault(); + var form = e.currentTarget; + + var action = form.getAttribute("action"); + var method = form.getAttribute("method"); + + var xhr = new XMLHttpRequest(); + xhr.open(method, this.state.Host + action); + // When doing authentication: + //xhr.withCredentials = true; + //xhr.open(method, action, true, username, password); + xhr.responseType = "json"; + var body = null; + + switch (method) { + case "POST": + var body = new FormData(form); + xhr.addEventListener("load", function(e) { + if (xhr.status === 200) { + var id = xhr.response.data.id; + var id_action = `${action}/${id}`; + document.getElementById("update-race-subtype-form").setAttribute("action", id_action); + document.getElementById("delete-race-subtype-form").setAttribute("action", id_action); + that.getData(id_action, function(xhr2) { + if (xhr2.status === 200) { + document.getElementById("update-racesubtype-name").value = xhr2.response.data.name; + document.getElementById("update-racesubtype-description").value = xhr2.response.data.description; + } + else if (xhr2.status >= 400 && xhr2.status < 500){ + alert(`client error: ${xhr2.response.message}`); + } + else if (xhr2.status >= 500) { + console.log(`server error: ${xhr2.response.message}`); + } + }); + } + else if (xhr.status >= 400 && xhr.status < 500){ + alert(`client error: ${xhr.response.message}`); + } + else if (xhr.status >= 500) { + console.log(`server error: ${xhr.response.message}`); + } + }); + break; + case "PUT": + var body = new FormData(form); + xhr.addEventListener("load", function(e) { + if (xhr.status >= 200 && xhr.status < 300 ) { + alert(`successfully updated at ${action}`); + } else if (xhr.status >= 400 && xhr.status < 500){ + alert(`client error: ${xhr.response.message}`); + } else if (xhr.status >= 500) { + console.log(`server error: ${xhr.response.message}`); + } + }); + break; + case "DELETE": + xhr.addEventListener("load", function(e) { + if (xhr.status >= 200 && xhr.status < 300 ) { + alert(`successfully deleted at ${action}`); + } else if (xhr.status >= 400 && xhr.status < 500){ + alert(`client error: ${xhr.response.message}`); + } else if (xhr.status >= 500) { + console.log(`server error: ${xhr.response.message}`); + } + }); + break; + + default: + console.log(`Invalid form method ${method}, expected one of \'POST\', \'PUT\', \'DELETE\'`); + return; + } + + xhr.send(body); + } + render() { return ( @@ -607,6 +712,7 @@ export default class App extends React.Component { Spells & Feats Inventory Levels + Testing @@ -619,7 +725,7 @@ export default class App extends React.Component { */} - +