ESP32 Relay webserver

Hi guys, i have a bit of a long one. I’m trying to combine a code from randomnerdtutorials to another one i highly modified from them as well. The thing is, they both use different way to create the HTML web page. The one for the relays creates the page directly from the main.cpp file where the one I’m working on uses an external file (index.html) and publishes it via SPIFFS.

So what I’m trying to do is insert the portion of the main.cpp file used to create multiple HTML button:

String processor(const String& var){
  //Serial.println(var);
  if(var == "BUTTONPLACEHOLDER"){
    String buttons ="";
    for(int i=1; i<=NUM_RELAYS; i++){
      String relayStateValue = relayState(i);
      buttons+= "<h4>Relay #" + String(i) + " - GPIO " + relayGPIOs[i-1] + "</h4><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"" + String(i) + "\" "+ relayStateValue +"><span class=\"slider\"></span></label>";
    }
    return buttons;
  }
  return String();
}

Into my own button that bypasses the %BUTTONPLACEHOLDER%:

<label class="button1">
    <input type="checkbox" onchange="changeState(); toggleCheckbox(this);" id="1">
    <span class="button" id="button1" style="color: #4CAF50">Pull</span>
</label>

I only have one relay and the thing that’s bugging me is when they create the button, they put

id="" + String(i) + "" “+ relayStateValue +”>

Where they get the relayStateValue from the main.cpp:

String relayState(int numRelay){
  if(RELAY_NO){
    if(digitalRead(relayGPIOs[numRelay-1])){
      return "";
    }
    else {
      return "checked";
    }
  }
  else {
    if(digitalRead(relayGPIOs[numRelay-1])){
      return "checked";
    }
    else {
      return "";
    }
  }
  return "";
}

I really have no clue what to do, i dont know if it would help to provide the whole code, if so i can dot that.

I’m am please to announce, to myself mostly, that i found a workaround ! Instead of replacing into my own button, i inserted my code into the creation of the button in the main.cpp ! And it works ! so if anyone ever stumble across this thread, that is the easiest solution !

You will be my hero if you help me then…
Mmy brain is going to exlpode right im trying to combine the exactly same code for relays
With a webserver for sensor they also uploaded if i am right that using the Spiffs…
Is it possible to combine main.ccp with spiffs? Is it better to use only spiffs or main.ccp
If you could help i would be glad…
I already did a webserver with spiffs that combine a live data chart with 2 buttons to control a relay but the problem is when i press the button the page redirects to https://myip/on or off and that does destroying my live chart also lags thank you