Finish skill tree backend and frontend connections

src/App.js

@@ -357,7 +357,7 @@ function AdminPanel(p) {
 		{page:"Skills",url:"/admin/skills",table:"/skill"},
 		{page:"Skill Types",url:"/admin/skilltypes",table:"/skill_type"},
 		{page:"Skill Data",url:"/admin/skilldata",table:"/skill_data"},
-		{page:<span style={{color:"gold"}}>Skill Tree Editor</span>,url:"/admin/skilltreeeditor",render:<SkillTreeEditor GetData={p.DATA}/>},
+		{page:<span style={{color:"gold"}}>Skill Tree Editor</span>,url:"/admin/skilltreeeditor",render:<SkillTreeEditor setUpdate={p.setUpdate} password={password} BACKENDURL={GetBackendURL(p)} GetData={p.DATA}/>},
 		{page:"Skill Tree Data",url:"/admin/skilltreedata",table:"/skill_tree_data"},
 		{page:"Photon Arts",url:"/admin/photonarts",table:"/photon_art",duplicate:true},
 		{page:"Class Skills",url:"/admin/classskills",table:"/class_skill",duplicate:true},
@@ -753,6 +753,7 @@ function App() {
 	const [TESTMODE,setTESTMODE] = useState(false)
 	const [DATA,setDATA] = useState({GetData:()=>{}})
 	const [DATAID,setDATAID] = useState({GetData:()=>{}})
+	const [update,setUpdate] = useState(false)
 
 	const [LOGGEDINUSER,setLOGGEDINUSER] = useState("")
 	const [LOGGEDINHASH,setLOGGEDINHASH] = useState("")
@@ -765,6 +766,19 @@ function App() {
 		return data!==undefined?data[table]!==undefined?data[table][row]!==undefined?data[table][row][col]!==undefined?data[table][row][col]:data[table][row]:data[table]:data:"no data"
 	}
 	
+	useEffect(()=>{
+		if (update) {
+			setUpdate(false)
+			axios.get(GetBackendURL({TESTMODE:TESTMODE})+"/data")
+			.then((data)=>{
+				setDATA(data.data)
+			})
+			axios.get(GetBackendURL({TESTMODE:TESTMODE})+"/dataid")
+			.then((data)=>{
+				setDATAID(data.data)
+			})
+		}
+	},[update])
 
 	useEffect(()=>{
 		axios.get(GetBackendURL({TESTMODE:TESTMODE})+"/data")
@@ -786,7 +800,7 @@ function App() {
 						<title>{APP_TITLE+" - Admin Panel"}</title>
 					</Helmet>
 				<TestHeader/>
-					<AdminPanel setTESTMODE={setTESTMODE} BACKENDURL={BACKENDURL} TESTMODE={TESTMODE} DATA={GetData}/>
+					<AdminPanel setUpdate={setUpdate} setTESTMODE={setTESTMODE} BACKENDURL={BACKENDURL} TESTMODE={TESTMODE} DATA={GetData}/>
 				</Route>
 				<Route path={process.env.PUBLIC_URL+"/test"}>
 					<Helmet>
@@ -836,11 +850,6 @@ function App() {
 				<Route path={process.env.PUBLIC_URL+"/formula"}>
 					<DamageCalculator/>
 				</Route>
-				<Route path={process.env.PUBLIC_URL+"/skilltree"}>
-					<Box title="Skill Tree">
-						<SkillTreeEditor BACKENDURL={GetBackendURL({TESTMODE:TESTMODE})} GetData={GetData}/>
-					</Box>
-				</Route>
 				<Route path="/">
 					<Helmet>
 						<title>{APP_TITLE}</title>

src/skilltree/skillTreeEditor.js

@@ -7,9 +7,11 @@ function SkillTreeEditor(p) {
 
     const ADJUSTMENT = [-32,-32]
 
+    const [firstLoad,setFirstLoad] = useState(true)
+
     const [classList,setClassList] = useState({})
     const [skillTreeData,setSkillTreeData] = useState({})
-    const [cl,setCl] = useState(0)
+    const [cl,setCl] = useState(-1)
     const [lineColor,setLineColor] = useState("#000000")
     const [lineWidth,setLineWidth] = useState(3)
     const [dimensionX,setDimensionX] = useState(6)
@@ -25,7 +27,7 @@ function SkillTreeEditor(p) {
     const [loading,setLoading] = useState(false)
 
     function GetSkills(x,y) {
-        var filtered = skillData.filter((skill)=>Number(skill[0])===x&&Number(skill[1])===y)
+        var filtered = skillData.filter((skill)=>Number(skill.split(",")[0])===Number(x)&&Number(skill.split(",")[1])===Number(y))
         if  (filtered.length>0) {
             return filtered[0]
         } else {
@@ -35,12 +37,29 @@ function SkillTreeEditor(p) {
 
     function SaveSkillTrees() {
         axios.post(p.BACKENDURL+"/saveskilltree",{
-
+            pass:p.password,
+            data:skillLines.slice(0,dimensionY).map((str)=>str.slice(0,dimensionX)).join(','),
+            skill_data:skillData.join(';'),
+            line_color:lineColor,
+            line_width:lineWidth,
+            gridsizex:gridSizeX,
+            gridsizey:gridSizeY,
+            gridpaddingx:gridPaddingX,
+            gridpaddingy:gridPaddingY,
+            class_id:cl
         })
         .then((data)=>{
-
+            if (data.data==="OK!") {
+                setMessage(<span style={{color:"green"}}>{"Successfully saved skill tree for "+p.GetData("class",undefined,undefined,true)[cl].name+"!"}</span>)
+                p.setUpdate(true)
+            }
+        })
+        .catch((err)=>{
+            setMessage(<span style={{color:"red"}}>{err.message}</span>)
+        })
+        .then(()=>{
+            setLoading(false)
         })
-        setLoading(false)
     }
 
     useEffect(()=>{
@@ -50,6 +69,7 @@ function SkillTreeEditor(p) {
 
     useEffect(()=>{
         var keys = Object.keys(skillTreeData)
+        var found = false
         for (var id of keys) {
             //console.log(cl+"/"+skillTreeData[id].class_id)
             if (Number(skillTreeData[id].class_id)===Number(cl)) {
@@ -65,12 +85,22 @@ function SkillTreeEditor(p) {
                 setGridSizeY(skillTreeData[id].gridsizey)
                 setGridPaddingX(skillTreeData[id].gridpaddingx)
                 setGridPaddingY(skillTreeData[id].gridpaddingy)
+                found=true
             }
         }
+        if (!found) {
+            setSkillLines([])
+            setSkillData([])
+            setDimensionX(6)
+            setDimensionY(6)
+        }
     },[skillTreeData,cl])
 
     useEffect(()=>{
-        setCl(Object.keys(classList)[0])
+        if (firstLoad) {
+            setCl(Object.keys(classList)[0])
+            setFirstLoad(false)
+        }
     },[classList])
 
     useEffect(()=>{
@@ -127,27 +157,34 @@ function SkillTreeEditor(p) {
 
     return <>
             {loading?<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>:<>
+            <h2>{message}</h2>
             <label for="classSelect">Class Select:</label><select id="classSelect" value={cl} onChange={(f)=>{setCl(f.currentTarget.value)}}>
+                <option value=""></option>
                 {Object.keys(classList).map((c)=><option value={c}>{c+" - "+classList[c].name}</option>)}
             </select>
-            <br/><button onClick={()=>{
+            <br/>
+            <br/>
+            {p.GetData("class",undefined,undefined,true)[cl]?.name&&<button onClick={()=>{
                 setLoading(true)
                 SaveSkillTrees()
-            }}>{"Save "+p.GetData("class",undefined,undefined,true)[cl].name+" Skill Tree"}</button>
+            }}>{"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}
                 skillLines={skillLines}
                 />
             {renderedInputs.map((control)=>control)}
-            <label for="lineColor">Line Color:</label><input type="color" id="lineColor" value={lineColor} onChange={(f)=>{setLineColor(f.currentTarget.value)}}/>
+            <br/>
-            <label for="lineWidth">Line Width:</label><input type="number" id="lineWidth" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/>
+            <hr/>
-            <label for="gridSizeX">Grid Size X:</label><input type="number" id="gridSizeX" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/>
+            <br/>
-            <label for="gridSizeY">Grid Size Y:</label><input type="number" id="gridSizeY" value={dimensionY} onChange={(f)=>{setDimensionY(f.currentTarget.value)}}/>
+            <label for="lineColor">Line Color:</label><input type="color" id="lineColor" value={lineColor} onChange={(f)=>{setLineColor(f.currentTarget.value)}}/><br/>
-            <label for="boxSizeX">Box Size X:</label><input type="number" id="boxSizeX" value={gridSizeX} onChange={(f)=>{setGridSizeX(f.currentTarget.value)}}/>
+            <label for="lineWidth">Line Width:</label><input type="number" id="lineWidth" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/><br/>
-            <label for="boxSizeY">Box Size Y:</label><input type="number" id="boxSizeY" value={gridSizeY} onChange={(f)=>{setGridSizeY(f.currentTarget.value)}}/>
+            <label for="gridSizeX">Grid Size X:</label><input type="number" id="gridSizeX" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/><br/>
-            <label for="gridPaddingX">Grid Padding X:</label><input type="number" id="gridPaddingX" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/>
+            <label for="gridSizeY">Grid Size Y:</label><input type="number" id="gridSizeY" value={dimensionY} onChange={(f)=>{setDimensionY(f.currentTarget.value)}}/><br/>
-            <label for="gridPaddingY">Grid Padding Y:</label><input type="number" id="gridPaddingY" value={gridPaddingY} onChange={(f)=>{setGridPaddingY(f.currentTarget.value)}}/>
+            <label for="boxSizeX">Box Size X:</label><input type="number" id="boxSizeX" value={gridSizeX} onChange={(f)=>{setGridSizeX(f.currentTarget.value)}}/><br/>
+            <label for="boxSizeY">Box Size Y:</label><input type="number" id="boxSizeY" value={gridSizeY} onChange={(f)=>{setGridSizeY(f.currentTarget.value)}}/><br/>
+            <label for="gridPaddingX">Grid Padding X:</label><input type="number" id="gridPaddingX" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/><br/>
+            <label for="gridPaddingY">Grid Padding Y:</label><input type="number" id="gridPaddingY" value={gridPaddingY} onChange={(f)=>{setGridPaddingY(f.currentTarget.value)}}/><br/>
 
             </div></>}
         </>