Database editor integration (non-functional post)

src/App.js

@@ -357,6 +357,8 @@ 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:"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},
 		{page:"Class Skill Data",url:"/admin/classskilldata",table:"/class_skill_data",duplicate:true},
@@ -395,22 +397,24 @@ function AdminPanel(p) {
 					})}}}></input>
 			<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
 		</div>:<>
-		<div className="w-25">Testing Mode <Toggle checked={p.TESTMODE} onChange={(f)=>{p.setTESTMODE(f.target.checked)}}/> {p.TESTMODE?<b>ON</b>:<b>OFF</b>}<br/>
 		<Box title="Navigation">
+		<div className="w-25">Testing Mode <Toggle checked={p.TESTMODE} onChange={(f)=>{p.setTESTMODE(f.target.checked)}}/> {p.TESTMODE?<b>ON</b>:<b>OFF</b>}<br/>
 		  <Table classes="adminNav">
 		  {navigationData.map((nav)=>(nav.hr)?<hr/>:<><Link to={process.env.PUBLIC_URL+nav.url}>{nav.page}</Link><br/></>)}
 		  <Link to={process.env.PUBLIC_URL+"/admin/database_manager"}>Database Manager</Link><br/>
-		</Table></Box></div>
+		</Table></div></Box>
 		<div className="w-75">
 			{navigationData.map((nav)=>(nav.duplicate===undefined&&nav.hr===undefined)&&<Route path={process.env.PUBLIC_URL+nav.url}>
+				<Box title={nav.page}>
 				<Helmet>
 					<title>{APP_TITLE+" - Admin Panel: "+nav.page}</title>
 				</Helmet>
-				<h2><u>{nav.page}</u></h2>
-				<TableEditor password={password} BACKENDURL={GetBackendURL(p)} path={nav.table}/>
-			</Route>)}
+				{nav.render??<TableEditor password={password} BACKENDURL={GetBackendURL(p)} path={nav.table}/>}
+				</Box></Route>)}
 			<Route path={process.env.PUBLIC_URL+"/admin/database_manager"}>
+				<Box title="Database Editor">
 					<DatabaseEditor password={password} BACKENDURL={GetBackendURL(p)}/>
+				</Box>
 			</Route>
 		</div></>}
 	</div>

src/skilltree/skillTreeEditor.js

@@ -7,7 +7,8 @@ function SkillTreeEditor(p) {
 
     const ADJUSTMENT = [-32,-32]
 
-    const [classList,setClassList] = useState([])
+    const [classList,setClassList] = useState({})
+    const [skillTreeData,setSkillTreeData] = useState({})
     const [cl,setCl] = useState(0)
     const [lineColor,setLineColor] = useState("#000000")
     const [lineWidth,setLineWidth] = useState(3)
@@ -18,18 +19,27 @@ function SkillTreeEditor(p) {
     const [gridPaddingX,setGridPaddingX] = useState(10)
     const [gridPaddingY,setGridPaddingY] = useState(10)
     const [renderedInputs,setRenderedInputs] = useState([])
-    const [skillLines,setSkillLines] = useState([
-        "□  □  ", //─   □
-        "└□─┘□□", //│ ├┤┼
-        " │  ││", //    
-        " │  □│", //┌ ┐ ┬
-        " □─□┼□", //└ ┘ ┴
-        "    □ "])
+    const [skillLines,setSkillLines] = useState([])
 
     useEffect(()=>{
         setClassList(p.GetData("class",undefined,undefined,true))
+        setSkillTreeData(p.GetData("skill_tree_data",undefined,undefined,true))
     },[p.GetData])
 
+    useEffect(()=>{
+        var keys = Object.keys(skillTreeData)
+        for (var id of keys) {
+            //console.log(cl+"/"+skillTreeData[id].class_id)
+            if (skillTreeData[id].class_id==cl) {
+                var data = skillTreeData[id].data.split(',')
+                setSkillLines(data)
+                setDimensionX(data[0].length)
+                setDimensionY(data.length)
+                setLineColor(skillTreeData[id].line_color)
+            }
+        }
+    },[skillTreeData,cl])
+
     useEffect(()=>{
         setCl(Object.keys(classList)[0])
     },[classList])
@@ -69,15 +79,15 @@ function SkillTreeEditor(p) {
     },[skillLines,gridSizeX,gridSizeY,gridPaddingX,gridPaddingY,cl])
 
     return <>
+            <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>
             <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)}
-            <select value={cl} onChange={(f)=>{setCl(f.currentTarget.value)}}>
-                {Object.keys(classList).map((c)=><option value={c}>{c+" - "+classList[c].name}</option>)}
-            </select>
             <input type="color" value={lineColor} onChange={(f)=>{setLineColor(f.currentTarget.value)}}/>
             <input type="number" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/>
             <input type="number" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/>