So sorry. First time doing something like this. HTML <fieldset class="repeating_vewe">
<input type="number" name="attr_fuelcur1" class="span4 customvehicletext" value="0" min="0"/>
<input type="number" name="attr_fuelmax1" class="span3 customvehicletext" value="0" min="0"/>
<input type='hidden' type='number' value='@{fuelicv1}' name="attr_fuelbar" class="sheet-hidden sheet-fuelbar" disabled='true'>
<div class="sheet-fuelbar"></div> </fieldset> <script type="text/worker">
on("sheet:opened change:repeating_vewe:fuelcur1 change:repeating_vewe:fuelmax1", function() {
getAttrs(["repeating_vewe_fuelcur1", "repeating_vewe_fuelmax1"], function(values) {
var maximum = values.repeating_vewe_fuelmax1;
var current = values.repeating_vewe_fuelcur1;
var fuelPercent = [0,10,20,30,40,50,60,70,80,90,100,999];
for(let i = 0; i < fuelPercent.length; i++) {
if(current <= (maximum * fuelPercent[i]/ 100)){
tvalue1 = i;
console.log("fuelic value is " + tvalue1)
break;
}
}
setAttrs({
"fuelicv1":tvalue1
});
});
});
</script> CSS /*!!! Progress Bar !!!*/ div.sheet-fuelbar { width: 230px;
height: 20px;
border: 2px solid black;
color: black;
font-size: 12px;
font-weight: bold;
text-align: center; } input.sheet-fuelbar[value="0"] ~ div.sheet-fuelbar {
background: white;
} input.sheet-fuelbar[value="0"] ~ div.sheet-fuelbar::before {
content: "NO FUEL";
} input.sheet-fuelbar[value="1"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 90%, # 520000 5 %,#960000 95%, #fc 0303 100 %);
} input.sheet-fuelbar[value="1"] ~ div.sheet-fuelbar::before {
content:"CRITICALLY LOW FUEL";
} input.sheet-fuelbar[value="2"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 80%, #524300 10%,#859600 90%, #fce703 100%);
} input.sheet-fuelbar[value="2"] ~ div.sheet-fuelbar::before {
content:"LOW FUEL LEVELS";
} input.sheet-fuelbar[value="3"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 70%, #524300 20%,#859600 80%, #fce703 100%);
} input.sheet-fuelbar[value="3"] ~ div.sheet-fuelbar::before {
content:"LOW FUEL LEVELS";
} input.sheet-fuelbar[value="4"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 60%, #445200 30%,#859600 70%, #fce703 100%);
} input.sheet-fuelbar[value="4"] ~ div.sheet-fuelbar::before {
content:"REFUELING ADVISED";
} input.sheet-fuelbar[value="5"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 50%, #445200 40%,#859600 60%, #fc0303 80%);
} input.sheet-fuelbar[value="5"] ~ div.sheet-fuelbar::before {
content:"REFUELING ADVISED";
} input.sheet-fuelbar[value="6"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 40%, #255200 40%,#449600 50%, #fc0303 70%);
} input.sheet-fuelbar[value="6"] ~ div.sheet-fuelbar::before {
content:"ACCEPTABLE FUEL LEVELS";
} input.sheet-fuelbar[value="7"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 30%, #255200 30%,#449600 40%, #adfc03 60%);
} input.sheet-fuelbar[value="7"] ~ div.sheet-fuelbar::before {
content:"ACCEPTABLE FUEL LEVELS";
} input.sheet-fuelbar[value="8"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 20%, #255200 20%,#449600 30%, #adfc03 50%);
} input.sheet-fuelbar[value="8"] ~ div.sheet-fuelbar::before {
content:"ACCEPTABLE FUEL LEVELS";
} input.sheet-fuelbar[value="9"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, white 10%, #255200 10%,#449600 20%, #adfc03 40%);
} input.sheet-fuelbar[value="9"] ~ div.sheet-fuelbar::before {
content:"ACCEPTABLE FUEL LEVELS";
} input.sheet-fuelbar[value="10"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, # 255200 1 %,#449600 10%, #adfc03 30%);
} input.sheet-fuelbar[value="10"] ~ div.sheet-fuelbar::before {
content:"FULLY FUELED";
} input.sheet-fuelbar[value="11"] ~ div.sheet-fuelbar {
background: linear-gradient(to left, # 520000 1 %,#960000 10%, #fc0303 30%);
} input.sheet-fuelbar[value="11"] ~ div.sheet-fuelbar::before {
content:"OVERFUELED!";
}
/*!!! End of Progress Bar !!!*/