Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the Form class and more user settings

Browse source
This commit is contained in:
MathMan05 2024-08-25 23:19:07 -05:00
parent d641ee6961
commit db7b55b79c
5 changed files with 675 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

255
webpage/settings.ts
View file

@ -55,6 +55,7 @@ class Buttons implements OptionsElement<unknown>{
private generateHTMLArea(buttonInfo:Options|string,htmlarea:HTMLElement){
let html:HTMLElement;
if(buttonInfo instanceof Options){
buttonInfo.subOptions=undefined;
html=buttonInfo.generateHTML();
}else{
html=this.handleString(buttonInfo);
@ -80,11 +81,13 @@ class TextInput implements OptionsElement<string>{
readonly onSubmit:(str:string)=>void;
value:string;
input:WeakRef<HTMLInputElement>;
constructor(label:string,onSubmit:(str:string)=>void,owner:Options,{initText=""}={}){
password:boolean;
constructor(label:string,onSubmit:(str:string)=>void,owner:Options,{initText="",password=false}={}){
this.label=label;
this.value=initText;
this.owner=owner;
this.onSubmit=onSubmit;
this.password=password;
}
generateHTML():HTMLDivElement{
const div=document.createElement("div");
@ -93,7 +96,7 @@ class TextInput implements OptionsElement<string>{
div.append(span);
const input=document.createElement("input");
input.value=this.value;
input.type="text";
input.type=this.password?"password":"text";
input.oninput=this.onChange.bind(this);
this.input=new WeakRef(input);
div.append(input);
@ -117,6 +120,36 @@ class TextInput implements OptionsElement<string>{
}
}
class SettingsText implements OptionsElement<void>{
readonly onSubmit:(str:string)=>void;
value:void;
readonly text:string
constructor(text:string){
this.text=text;
}
generateHTML():HTMLSpanElement{
const span=document.createElement("span");
span.innerText=this.text;
return span;
}
watchForChange(){}
submit(){}
}
class SettingsTitle implements OptionsElement<void>{
readonly onSubmit:(str:string)=>void;
value:void;
readonly text:string
constructor(text:string){
this.text=text;
}
generateHTML():HTMLSpanElement{
const span=document.createElement("h2");
span.innerText=this.text;
return span;
}
watchForChange(){}
submit(){}
}
class CheckboxInput implements OptionsElement<boolean>{
readonly label:string;
readonly owner:Options;
@ -408,12 +441,22 @@ class Options implements OptionsElement<void>{
readonly owner:Buttons|Options|Form;
readonly ltr:boolean;
value:void;
readonly html:WeakMap<OptionsElement<any>,WeakRef<HTMLDivElement>>=new WeakMap();
container:WeakRef<HTMLDivElement>=new WeakRef(document.createElement("div"));
constructor(name:string,owner:Buttons|Options|Form,{ltr=false}={}){
this.name=name;
this.options=[];
this.owner=owner;
this.ltr=ltr;
}
removeAll(){
while(this.options.length){
this.options.pop();
}
const container=this.container.deref();
if(container){
container.innerHTML="";
}
}
watchForChange(){};
addOptions(name:string,{ltr=false}={}){
@ -422,9 +465,37 @@ class Options implements OptionsElement<void>{
this.generate(options);
return options;
}
subOptions:Options|Form|undefined;
addSubOptions(name:string,{ltr=false}={}){
const options=new Options(name,this,{ltr});
this.subOptions=options;
const container=this.container.deref();
if(container){
this.generateContainter();
}else{
throw Error("Tried to make a subOptions when the options weren't rendered");
}
return options;
}
addSubForm(name:string,onSubmit:((arg1:object)=>void),{ltr=false,submitText="Submit",fetchURL="",headers={},method="POST",traditionalSubmit=false}={}){
const options=new Form(name,this,onSubmit,{ltr,submitText,fetchURL,headers,method,traditionalSubmit});
this.subOptions=options;
const container=this.container.deref();
if(container){
this.generateContainter();
}else{
throw Error("Tried to make a subForm when the options weren't rendered");
}
return options;
}
returnFromSub(){
this.subOptions=undefined;
this.generateContainter();
}
addSelect(label:string,onSubmit:(str:number)=>void,selections:string[],{defaultIndex=0}={}){
const select=new SelectInput(label,onSubmit,selections,this,{defaultIndex});
this.options.push(select);
this.generate(select);
return select;
}
addFileInput(label:string,onSubmit:(files:FileList)=>void,{clear=false}={}){
@ -433,8 +504,8 @@ class Options implements OptionsElement<void>{
this.generate(FI);
return FI;
}
addTextInput(label:string,onSubmit:(str:string)=>void,{initText=""}={}){
const textInput=new TextInput(label,onSubmit,this,{initText});
addTextInput(label:string,onSubmit:(str:string)=>void,{initText="",password=false}={}){
const textInput=new TextInput(label,onSubmit,this,{initText,password});
this.options.push(textInput);
this.generate(textInput);
return textInput;
@ -469,8 +540,18 @@ class Options implements OptionsElement<void>{
this.generate(box);
return box;
}
readonly html:WeakMap<OptionsElement<any>,WeakRef<HTMLElement>>=new WeakMap();
container:WeakRef<HTMLDivElement>=new WeakRef(document.createElement("div"));
addText(str:string){
const text=new SettingsText(str);
this.options.push(text);
this.generate(text);
return text;
}
addTitle(str:string){
const text=new SettingsTitle(str);
this.options.push(text);
this.generate(text);
return text;
}
generate(elm:OptionsElement<any>){
const container=this.container.deref();
if(container){
@ -484,24 +565,57 @@ class Options implements OptionsElement<void>{
container.append(div);
}
}
title:WeakRef<HTMLElement>=new WeakRef(document.createElement("h2"));
generateHTML():HTMLElement{
const div=document.createElement("div");
div.classList.add("titlediv");
if(this.name!==""){
const title=document.createElement("h2");
title.textContent=this.name;
div.append(title);
title.classList.add("settingstitle");
}
const title=document.createElement("h2");
title.textContent=this.name;
div.append(title);
if(this.name!=="") title.classList.add("settingstitle");
this.title=new WeakRef(title);
const container=document.createElement("div");
this.container=new WeakRef(container);
container.classList.add(this.ltr?"flexltr":"flexttb","flexspace");
for(const thing of this.options){
this.generate(thing);
}
this.generateContainter();
div.append(container);
return div;
}
generateContainter(){
const container=this.container.deref();
if(container){
const title=this.title.deref();
if(title) title.innerHTML="";
container.innerHTML="";
if(this.subOptions){
container.append(this.subOptions.generateHTML());//more code needed, though this is enough for now
if(title){
const name=document.createElement("span");
name.innerText=this.name;
name.classList.add("clickable");
name.onclick=()=>{
this.returnFromSub();
}
title.append(name," > ",this.subOptions.name)
}
}else{
for(const thing of this.options){
this.generate(thing);
}
if(title){
title.innerText=this.name;
}
}
if(title&&title.innerText!==""){
title.classList.add("settingstitle");
}else if(title){
title.classList.remove("settingstitle");
}
}else{
console.warn("tried to generate container, but it did not exist");
}
}
changed(){
if(this.owner instanceof Options||this.owner instanceof Form){
this.owner.changed();
@ -538,16 +652,19 @@ class Options implements OptionsElement<void>{
class Form implements OptionsElement<object>{
name:string;
readonly options:Options;
readonly owner:Buttons|Options;
readonly owner:Options;
readonly ltr:boolean;
readonly names:Map<string,OptionsElement<any>>
readonly names:Map<string,OptionsElement<any>>=new Map();
readonly required:WeakSet<OptionsElement<any>>=new WeakSet();
readonly submitText:string;
readonly fetchURL:string;
readonly headers:object;
readonly headers={};
readonly method:string;
value:object;
constructor(name:string,owner:Buttons|Options,onSubmit:((arg1:object)=>void),{ltr=false,submitText="Submit",fetchURL="",headers={},method="POST"}={}){
traditionalSubmit:boolean;
values={};
constructor(name:string,owner:Options,onSubmit:((arg1:object)=>void),{ltr=false,submitText="Submit",fetchURL="",headers={},method="POST",traditionalSubmit=false}={}){
this.traditionalSubmit=traditionalSubmit;
this.name=name;
this.method=method;
this.submitText=submitText;
@ -558,14 +675,16 @@ class Form implements OptionsElement<object>{
this.ltr=ltr;
this.onSubmit=onSubmit;
}
setValue(key:string,value:any){//the value can't really be anything, but I don't care enough to fix this
this.values[key]=value;
}
addSelect(label:string,formName:string,selections:string[],{defaultIndex=0,required=false}={}){
const select=this.options.addSelect(label,_=>{},selections,{defaultIndex});
this.names.set(formName,select);
if(required){
this.required.add(select);
}
return;
return select;
}
addFileInput(label:string,formName:string,{required=false}={}){
const FI=this.options.addFileInput(label,_=>{},{});
@ -573,16 +692,16 @@ class Form implements OptionsElement<object>{
if(required){
this.required.add(FI);
}
return;
return FI;
}
addTextInput(label:string,formName:string,{initText="",required=false}={}){
const textInput=this.options.addTextInput(label,_=>{},{initText});
addTextInput(label:string,formName:string,{initText="",required=false,password=false}={}){
const textInput=this.options.addTextInput(label,_=>{},{initText,password});
this.names.set(formName,textInput);
if(required){
this.required.add(textInput);
}
return;
return textInput;
}
addColorInput(label:string,formName:string,{initColor="",required=false}={}){
const colorInput=this.options.addColorInput(label,_=>{},{initColor});
@ -590,7 +709,7 @@ class Form implements OptionsElement<object>{
if(required){
this.required.add(colorInput);
}
return;
return colorInput;
}
addMDInput(label:string,formName:string,{initText="",required=false}={}){
@ -599,7 +718,7 @@ class Form implements OptionsElement<object>{
if(required){
this.required.add(mdInput);
}
return;
return mdInput;
}
addCheckboxInput(label:string,formName:string,{initState=false,required=false}={}){
@ -608,18 +727,26 @@ class Form implements OptionsElement<object>{
if(required){
this.required.add(box);
}
return;
return box;
}
addText(str:string){
this.options.addText(str);
}
addTitle(str:string){
this.options.addTitle(str);
}
generateHTML():HTMLElement{
const div=document.createElement("div");
div.append(this.options.generateHTML());
const button=document.createElement("button");
button.onclick=_=>{
this.submit();
div.classList.add("FormSettings");
if(!this.traditionalSubmit){
const button=document.createElement("button");
button.onclick=_=>{
this.submit();
}
button.textContent=this.submitText;
div.append(button)
}
button.textContent=this.submitText;
div.append(button)
return div;
}
onSubmit:((arg1:object)=>void);
@ -627,38 +754,78 @@ class Form implements OptionsElement<object>{
this.onSubmit=func;
};
changed(){
if(this.traditionalSubmit){
this.owner.changed();
}
}
submit(){
const build={}
const build={};
for(const key of Object.keys(this.values)){
const thing=this.values[key];
if(thing instanceof Function){
try{
build[key]=thing();
}catch(e:any){
const elm=this.options.html.get(e[0]);
if(elm){
const html=elm.deref();
if(html){
this.makeError(html,e[1]);
}
}
return;
}
}else{
build[key]=thing;
}
}
for(const thing of this.names.keys()){
if(thing==="") continue;
const input=this.names.get(thing) as OptionsElement<any>;
build[thing]=input.value;
}
if(this.fetchURL===""){
if(this.fetchURL!==""){
fetch(this.fetchURL,{
method:this.method,
body:JSON.stringify(build)
body:JSON.stringify(build),
headers:this.headers
}).then(_=>_.json()).then(json=>{
if(json.errors){
this.errors(json.errors)
}
if(json.errors&&this.errors(json.errors)) return;
this.onSubmit(json);
})
}else{
this.onSubmit(build);
}
console.warn("needs to be implemented")
}
errors(errors){
for(const error of errors){
errors(errors:{code:number,message:string,errors:{[key:string]:{_errors:{message:string,code:string}}}}){
if(!(errors instanceof Object)){return};
for(const error of Object.keys(errors)){
const elm=this.names.get(error);
if(elm){
const ref=this.options.html.get(elm);
if(ref&&ref.deref()){
const html=ref.deref() as HTMLDivElement;
this.makeError(html,error._errors[0].message)
this.makeError(html,errors[error]._errors[0].message)
return true;
}
}
}
return false;
}
error(formElm:string,errorMessage:string){
const elm=this.names.get(formElm);
if(elm){
const htmlref=this.options.html.get(elm);
if(htmlref){
const html=htmlref.deref();
if(html){
this.makeError(html,errorMessage);
}
}
}else{
console.warn(formElm+" is not a valid form property")
}
}
makeError(e:HTMLDivElement,message:string){
let element=e.getElementsByClassName("suberror")[0] as HTMLElement;