Show/hide images when a form is submitted.

[CODE-NINJA]

By the way, please next time use CODE-BLOCK to show your code, like…

$w.onReady(()=> {
    $w('#bagnallLatest').onReady(()=> {
        let status = $w('#bagnallLatest').getCurrentItem();

        if(status.inspectionResult==='Passed'){
            $w('#passTick').expand();}
        else {$w('#passTick').collapse();}
    //});

    //$w('#bagnallLatest').onReady(() => {
    //    let status = $w('#bagnallLatest').getCurrentItem();

        if(status.inspectionResult==='Under repair'){
            $w('#underRepair').expand();
        } 
        else {$w('#underRepair').collapse();}
    });
    
    //--------------------------------------------------------
    $w('#fireGlass').onChange(() => {
        if ($w('#fireGlass').value === 'Yes'){
            $w('#fireGlass').style.backgroundColor = "#67E65B";
        } else if ($w('#fireGlass').value === 'No'){
            $w('#fireGlass').style.backgroundColor = "#FF4040";
        }
    });

    $w('#iStrip').onChange(() => {
        if ($w('#iStrip').value === 'Yes'){
            $w('#iStrip').style.backgroundColor = "#67E65B";
        } else if ($w('#iStrip').value === 'No'){
            $w('#iStrip').style.backgroundColor = "#FF4040";
        }
    });    

    $w('#doorClose').onChange(() => {
        if ($w('#doorClose').value === 'Yes'){
            $w('#doorClose').style.backgroundColor = "#67E65B";
        } else if ($w('#doorClose').value === 'No'){
            $w('#doorClose').style.backgroundColor = "#FF4040";
        }
    });

    $w('#doorGap').onChange(() => {
        if ($w('#doorGap').value === 'No'){
            $w('#doorGap').style.backgroundColor = "#67E65B";
        } else if ($w('#doorGap').value === 'Yes'){
            $w('#doorGap').style.backgroundColor = "#FF4040";
        }
    });

    $w('#fireDoor').onChange(() => {
        if ($w('#fireDoor').value === 'Yes One Side'){
            $w('#fireDoor').style.backgroundColor = "#67E65B";
        } else if ($w('#fireDoor').value === 'No'){
            $w('#fireDoor').style.backgroundColor = "#FF4040";
        }
    });

    $w('#fireDoor').onChange(() => {
        if ($w('#fireDoor').value === 'Yes Both Sides'){
            $w('#fireDoor').style.backgroundColor = "#67E65B";
        } else if ($w('#fireDoor').value === 'No'){
            $w('#fireDoor').style.backgroundColor = "#FF4040";
        }
    });

    $w('#doorDamage').onChange(() => {
        if ($w('#doorDamage').value === 'No'){
            $w('#doorDamage').style.backgroundColor = "#67E65B";
        } else if ($w('#doorDamage').value === 'Yes'){
            $w('#doorDamage').style.backgroundColor = "#FF4040";
        }
    });

    $w('#inspectionResult').onChange(() => {
        if ($w('#inspectionResult').value === 'Passed'){
            $w('#inspectionResult').style.backgroundColor = "#67E65B";
        } else if ($w('#inspectionResult').value === 'Under repair'){
            $w('#inspectionResult').style.backgroundColor = "#FF4040";
        }
    });

    $w('#btnSubmit').onClick(() => {       
        if (validateForm()) {
            submitForm();            
        } else {
            updateFormValidation();
        }
    });

    function validateForm() {
        return $w('#doorNo').valid &&
        $w('#surveyDate').valid &&
        $w('#fireGlass').valid &&
        $w('#iStrip').valid &&
        $w('#doorClose').valid &&
        $w('#doorGap').valid &&
        $w('#fireDoor').valid &&
        $w('#doorDamage').valid &&
        $w('#failNotes').valid &&
        $w('#inspectionResult').valid;
    }

    function updateFormValidation() {
        $w('#doorNo').updateValidityIndication();
        $w('#surveyDate').updateValidityIndication();
        $w('#fireGlass').updateValidityIndication();
        $w('#iStrip').updateValidityIndication();
        $w('#doorClose').updateValidityIndication();
        $w('#doorGap').updateValidityIndication();
        $w('#fireDoor').updateValidityIndication();
        $w('#doorDamage').updateValidityIndication();
        $w('#failNotes').updateValidityIndication();
        $w('#inspectionResult').updateValidityIndication();
    }

    function submitForm() {    
    $w("#bagnallLatest").setFieldValues( {
        doorNumber: $w('#doorNo').value,
        surveyDate: $w('#surveyDate').value,
        fireGlassPanel: $w('#fireGlass').value,
        intumescentStrip: $w('#iStrip').value,
        doorCloses: $w('#doorClose').value,
        doorGapOver4Mm: $w('#doorGap').value,
        fireDoorSign: $w('#fireDoor').value,
        damageToFireDoor: $w('#doorDamage').value,
        failureNotes: $w('#failNotes').value,
        inspectionResult: $w('#inspectionResult').value,
    });

    function statusUpdate() {
        $w('#bagnallLatest').refresh();
        let status = $w('#bagnallLatest').getCurrentItem();
        if(status.inspectionResult==='Passed'){
            $w('#passTick').expand();
                $w('#underRepair').collapse();
                // $w('#text6').text="Passed";
                console.log("Passed");
        } else if(status.inspectionResult==='Under repair') {
            $w('#passTick').collapse();
            $w('#underRepair').expand();
            console.log("underRepair");
            //$w('#text6').text="underRepair";
        }
    }

    $w('#successMessage').hide();
    $w('#errorMessage').hide();

    $w("#bagnallLatest").save()
        .then( (item) => {
            $w('#successMessage').show();
            $w('#formDoneNext').show();
            $w("#bagnallLatest").refresh();
            setTimeout(statusUpdate, 1000);
        })
        .catch( (err) => {
            let errMsg = err;
            $w('#errorMessage').show();
        });
    }
});

export function changeFloor_click(event) {
    if ($w('#floorMenu').hidden){
        $w('#floorMenu').show();
    }
    else {$w('#floorMenu').hide();
    }    
}