Simplify code. How?

[user643]

WIX Editor.
I am looking for possibilities to simplify the code for the scenario described below. I don’t need an exact solution, but ideas about basic concept and links of tutorials would be helpful.

Scenario. I have created a visual learning path. Every customer has its own learning path on a member site. The data is stored in a collection.

The screenshot shows only a small part of the learning path.
The levels of the learning path are made of multistate-boxes (numbers 1-5). In the end there will be 60 (!) multistateboxes on the page. Every multistate boxes has 4 states (load, done, highlighted, locked). Every multistate box has a hover-event and a click-event. Each event contains at least one if-statement (to consider the current state).

Right now the code lists all the queries and event for each multistate box seperately. Examples:

//Query looks up actual state for level ‘goCowalk’ and changes the state in box accordingly
wixData.query(“ausbildungsweg”)
.eq(“levelStates”, “goCOwalk”)
.find()
.then((result) => {
let praefix = “GoCOwalk”
let item = result.items[0]
let state = item.state
let praefixState = state+praefix
console.log(praefixState)
$w(‘#goCOwalk’).changeState(praefixState)
} )

//Action (open lightbox) when user clicks Box1
export function box1_click(event) {
let state = $w(‘#goBAwalk’).currentState.id
console.log(state)
if (state == “doneGoBAwalk”) {
wixWindow.openLightbox(“test”);
}
if (state === “highlightedGoOBwalk”) {
wixWindow.openLightbox(“test”);
}

}

How can I write more generic functions, which checks first which box have been clicked or hovered, so that I don’t have to repeat those examples 64 times?
I tried to write a generic function for this code, but I had difficulties to hand over the value ‘goCOwalk’ as a variable and also to select the element based on a variable ( $w('#goCOwalk’).changeState(praefixState))

I am a beginner and I don’t need the perfect solution. I am looking for some hints which points me into the right direction (e.g. tutorial).

Thanks!

[CODE-NINJA]

$w.onReady(async()=> {    
    $w('#goCOwalk').changeState(praefixState)});
    //---------------------------------------------
    $w('#box1').onClick((event)=> {actionClick(event);});
    $w('#box2').onClick((event)=> {actionClick(event);});
    $w('#box3').onClick((event)=> {actionClick(event);});
    $w('#box4').onClick((event)=> {actionClick(event);});
    $w('#box5').onClick((event)=> {actionClick(event);});
    $w('#box6').onClick((event)=> {actionClick(event);});
    $w('#box7').onClick((event)=> {actionClick(event);});
    $w('#box8').onClick((event)=> {actionClick(event);});
    $w('#box9').onClick((event)=> {actionClick(event);});
    $w('#box10').onClick((event)=>{actionClick(event);});
    $w('#box11').onClick((event)=>{actionClick(event);});
    $w('#box12').onClick((event)=>{actionClick(event);});
    $w('#box13').onClick((event)=>{actionClick(event);});
    $w('#box14').onClick((event)=>{actionClick(event);});
    $w('#box15').onClick((event)=>{actionClick(event);});
});

function actionClick(event) {console.log(event.target.id+'-clicked');
    const box = event.target.id;    console.log('What to do now with my selected BOX? --->', box);
}

.
.
.
CODE-UPGRADE-LEVEL-1:
----------------------------------------------

$w.onReady(async () => {
    for (let i = 1; i <= 15; i++) {
        let boxId = `#box${i}`;
        $w(boxId).onClick((event) => { actionClick(event); });
    }
});

function actionClick(event) {
    console.log(event.target.id + '-clicked');
    const box = event.target.id;
    console.log('What to do now with my selected BOX? --->', box);
}

.
.
.
CODE-UPGRADE-LEVEL-2:
----------------------------------------------

const myBoxes = ['box1', 'box2', 'box3', ...................];

$w.onReady(async () => {
    for (let i = 1; i <= myBoxes.length; i++) {
        $w(`#box${i}`).onClick((event) => { actionClick(event); });
    }
});

function actionClick(event) {
    console.log(event.target.id + '-clicked');
    const box = event.target.id;
    console.log('What to do now with my selected BOX? --->', box);
}

.
.
.
CODE-UPGRADE-LEVEL-3:
----------------------------------------------

const myBoxes=[];
      myBoxes[0] = 'box0';
      myBoxes[1] = 'box1';
      myBoxes[2] = 'box2';
      myBoxes[3] = 'box3';
      myBoxes[4] = 'box4';
      myBoxes[5] = .........;
      myBoxes[6] =  .........;
      myBoxes[7] =  .........;
      myBoxes[8] =  .........;
      myBoxes[9] =  .........;
      myBoxes[...] =  .........;
      ..........................


$w.onReady(async () => {
    for (let i = 1; i <= myBoxes.length; i++) {
        $w(`#box${i}`).onClick((event) => { actionClick(event); });
    }
});

function actionClick(event) {
    console.log(event.target.id + '-clicked');
    const box = event.target.id;
    console.log('What to do now with my selected BOX? --->', box);
}

.
.
.
CODE-UPGRADE-LEVEL-4: —> RETURNING-ASYNCHRONOUS-FUNCTION
----------------------------------------------

let data = await getData('levelStates', 'goCOwalk');
let item = data.items[0];
let state = item.state;

async function getData(dbFIELD, VALUE) {
    return wixData.query(DATABASE)
    .eq(dbFIELD, VALUE)
    .find().then((result) => {return result});   
}

[user643]

Thank you very much, russian-dima! Those are many starting points which I can work on.

[CODE-NINJA]

Genau so machst du das auch mit den STATES deiner MSB (Multistate-box).

Nimm an du hast 20 STATES in deiner MSB.
Schau dir die Funktionsweise des CODES an. Was fällt dir auf?
Könntest du mit hilfe dieser Struktur nicht auch deine STATES → DIRECT steuern, anstatt immer diese → if(){…} else {…}-Abfragen machen zu müssen ?

Mal gut überlegen!

Könntest du nicht auch direkt anstatt von → ‘box0’, ‘box1’, ‘box2’…
…nicht genauso direct —> ‘GoCOwalk’, ‘goBAwalk’, oder was du da auch immer versuchst zu machen, nehmen ?

[user643]

Thanks again for your help! I have been able to achieve, what I wanted. The code is about 60x shorter than before

[CODE-NINJA]

Always try to keep your code as short, readable and dynamic as possible.