From 5bccfd1438b513eee9334a024fa6a1501bf4ad6d Mon Sep 17 00:00:00 2001
From: Joshua Sigona <sigonasr2@gmail.com>
Date: Sat, 14 Aug 2021 16:54:09 +0900
Subject: [PATCH] Prepare saving of skill trees

---
 src/App.js                       |  2 +-
 src/skilltree/skillTreeEditor.js | 21 +++++++++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 45b1a24..c3357f0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -838,7 +838,7 @@ function App() {
 				</Route>
 				<Route path={process.env.PUBLIC_URL+"/skilltree"}>
 					<Box title="Skill Tree">
-						<SkillTreeEditor GetData={GetData}/>
+						<SkillTreeEditor BACKENDURL={GetBackendURL({TESTMODE:TESTMODE})} GetData={GetData}/>
 					</Box>
 				</Route>
 				<Route path="/">
diff --git a/src/skilltree/skillTreeEditor.js b/src/skilltree/skillTreeEditor.js
index 3760bb9..f197976 100644
--- a/src/skilltree/skillTreeEditor.js
+++ b/src/skilltree/skillTreeEditor.js
@@ -21,6 +21,8 @@ function SkillTreeEditor(p) {
     const [renderedInputs,setRenderedInputs] = useState([])
     const [skillLines,setSkillLines] = useState([])
     const [skillData,setSkillData] = useState([])
+    const [message,setMessage] = useState("")
+    const [loading,setLoading] = useState(false)
 
     function GetSkills(x,y) {
         var filtered = skillData.filter((skill)=>Number(skill[0])===x&&Number(skill[1])===y)
@@ -31,6 +33,16 @@ function SkillTreeEditor(p) {
         }
     }
 
+    function SaveSkillTrees() {
+        axios.post(p.BACKENDURL+"/saveskilltree",{
+
+        })
+        .then((data)=>{
+
+        })
+        setLoading(false)
+    }
+
     useEffect(()=>{
         setClassList(p.GetData("class",undefined,undefined,true))
         setSkillTreeData(p.GetData("skill_tree_data",undefined,undefined,true))
@@ -114,9 +126,14 @@ function SkillTreeEditor(p) {
     },[skillLines,gridSizeX,gridSizeY,gridPaddingX,gridPaddingY,cl,dimensionY,dimensionX,skillData])
 
     return <>
+            {loading?<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>:<>
             <label for="classSelect">Class Select:</label><select id="classSelect" value={cl} onChange={(f)=>{setCl(f.currentTarget.value)}}>
                 {Object.keys(classList).map((c)=><option value={c}>{c+" - "+classList[c].name}</option>)}
             </select>
+            <br/><button onClick={()=>{
+                setLoading(true)
+                SaveSkillTrees()
+            }}>{"Save "+p.GetData("class",undefined,undefined,true)[cl].name+" Skill Tree"}</button>
             <div style={{width:"800px",position:"relative",left:"300px"}}>
             <SkillTree strokeStyle={lineColor} lineWidth={lineWidth} lineDash={[]}
                 gridDimensionsX={dimensionX} gridDimensionsY={dimensionY} gridSizeX={gridSizeX} gridSizeY={gridSizeY} gridPaddingX={gridPaddingX} gridPaddingY={gridPaddingY}
@@ -132,8 +149,8 @@ function SkillTreeEditor(p) {
             <label for="gridPaddingX">Grid Padding X:</label><input type="number" id="gridPaddingX" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/>
             <label for="gridPaddingY">Grid Padding Y:</label><input type="number" id="gridPaddingY" value={gridPaddingY} onChange={(f)=>{setGridPaddingY(f.currentTarget.value)}}/>
 
-            </div>
-            </>
+            </div></>}
+        </>
 }
 
 export {SkillTreeEditor}
\ No newline at end of file