From a60cca1be432bffd6841a56b86da08baabc09931 Mon Sep 17 00:00:00 2001 From: "sigonasr2, Sig, Sigo" Date: Tue, 14 Sep 2021 07:31:06 +0000 Subject: [PATCH] Basic build list display implemented. --- src/Builds.js | 56 ++++++++++++++++++++++++++++++++++++++--- src/TestPanel.js | 10 +++----- src/components/Class.js | 11 ++++++++ src/style.css | 35 ++++++++++++++++++++++++++ 4 files changed, 101 insertions(+), 11 deletions(-) create mode 100644 src/components/Class.js diff --git a/src/Builds.js b/src/Builds.js index bd770cb..0a4a25d 100644 --- a/src/Builds.js +++ b/src/Builds.js @@ -1,22 +1,70 @@ import { useEffect,useState } from 'react' +import Class from './components/Class'; +import ReactPlaceholder from 'react-placeholder'; +import "react-placeholder/lib/reactPlaceholder.css"; +import {HandThumbsUp} from 'react-bootstrap-icons' +import { DisplayIcon } from './DEFAULTS'; const axios = require('axios'); +function Build(p) { + const {build} = p + const {GetData} = p + const buildData = build.data?build.data[0]==='{'?JSON.parse(build.data):{}:{} + return
+
+
+
#{build.id}

 {build.build_name}

(Created by {build.creator})
+
{build.likes}
+
+
{buildData?.level}
+
{buildData?.secondaryLevel}
+
{build.created_on}
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ {/*JSON.stringify(build)*/} +
+
+
+
+
+} + function Builds(p) { const {GetData,BACKENDURL} = p const [builds,setBuilds] = useState([]) + const [sort,setSort] = useState("date_updated") + const [filter,setFilter] = useState("") + const [filter_type,setFilterType] = useState("") + const [page,setPage] = useState(0) + useEffect(()=>{ - axios.get(BACKENDURL+"/builds") - },[BACKENDURL]) + axios.get(`${BACKENDURL}/getBuilds?sort_type=${sort}${filter_type!==""?`&filter_type=${filter_type}`:""}${filter_type!==""?`&filter=${encodeURI(filter)}`:""}${page!==0?`&offset=${page}`:""}`) + .then((data)=>{ + setBuilds(data.data) + }) + },[BACKENDURL,sort,filter_type,filter,page]) return <>

Builds List

- {} -
+ {builds.map((build)=>)}
} diff --git a/src/TestPanel.js b/src/TestPanel.js index 414bbfc..85a3a25 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -8,6 +8,7 @@ import axios from 'axios'; import Helmet from 'react-helmet' import ReactPlaceholder from 'react-placeholder'; import "react-placeholder/lib/reactPlaceholder.css"; +import Class from './components/Class'; import { useLocation,useHistory,useParams,matchPath } from 'react-router' @@ -67,12 +68,6 @@ function PageControl(p) { } -function Class(p) { - const CLASSES = p.GetData("class") - const class_obj = CLASSES[p.name] - return {class_obj?<>{class_obj.name}:<>} -} - function EditableClass(p){ return <>
{p.setClassNameSetter(p.editClass);p.setClassSelectWindowOpen(true)}}>
@@ -478,6 +473,7 @@ function SaveData() { secondaryLevel:secondaryLevel, weaponBaseName:selectedWeapon[WEAPON_WEAPON]?.name, weaponType:selectedWeapon[WEAPON_WEAPONTYPE]?.name, + weaponExistenceID:selectedWeapon[WEAPON_EXISTENCE_DATA]?.id, armor1Name:selectedArmor1?.name, armor2Name:selectedArmor2?.name, armor3Name:selectedArmor3?.name, @@ -684,7 +680,7 @@ function deepCopySkills(skillData) {

Equip

-
{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot">

Weapons

1
+
{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot">

Weapons

1
{setArmorSlotSelection(1);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor1)}>

Armor 1

{setArmorSlotSelection(2);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor2)}>

Armor 2

{setArmorSlotSelection(3);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor3)}>

Armor 3

diff --git a/src/components/Class.js b/src/components/Class.js new file mode 100644 index 0000000..e837b9c --- /dev/null +++ b/src/components/Class.js @@ -0,0 +1,11 @@ + +import ReactPlaceholder from 'react-placeholder'; +import "react-placeholder/lib/reactPlaceholder.css"; + +function Class(p) { + const CLASSES = p.GetData("class",undefined,undefined,p.useIDs??false) + const class_obj = CLASSES[p.name] + return {class_obj?<>{!p.hideName&&class_obj.name}:<>} + } + +export default Class; \ No newline at end of file diff --git a/src/style.css b/src/style.css index 06d2693..8cc4fe5 100644 --- a/src/style.css +++ b/src/style.css @@ -1795,4 +1795,39 @@ dd:before { .trashButton:hover { color:rgba(200,50,50,1); border: 2px solid red; +} +.build{ + background-color:rgba(0,0,0,0.5); +} +.build:hover{ + color:rgba(215,215,255,1); + background-color:rgba(0.5,0.5,0.5,0.5); + cursor:pointer; +} +.buildID{ + float:left; +} +.buildTitle{ + display:inline; +} +.buildAuthor{ + display:inline; +} +.buildClass{ + display:inline; +} +.buildAvatar{ + +} +.buildData{ + float:right; +} +.buildLikes{ + float:right; +} +.buildImage{ +} +.buildPalette{ + width:360px; + margin:auto; } \ No newline at end of file