diff --git a/main/homepage.html b/main/homepage.html
index eac7fb9..c30e0a7 100644
--- a/main/homepage.html
+++ b/main/homepage.html
@@ -1,242 +1,203 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1024"><title>WiCAN</title><style>:root{--primary-color:#24478f;--primary-light:#c2d1f0;--primary-dark:#1a3266;--background-color:#f0f2f5;--white:#fff;--gray-100:#f7f7f7;--gray-200:#e9ecef;--gray-300:#dee2e6;--gray-400:#ced4da;--gray-500:#adb5bd;--gray-600:#6c757d;--gray-700:#495057;--shadow-sm:0 1px 3px rgba(0,0,0,0.12);--shadow-md:0 4px 6px rgba(0,0,0,0.1);--transition:all 0.3s ease}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;display:flex;background-color:var(--background-color);margin:0;overflow-x:hidden;color:var(--gray-700);line-height:1.5}.sidebar{height:100vh;width:240px;background-color:var(--white);border-right:1px solid var(--gray-200);padding-top:1rem;position:fixed;overflow-y:auto;box-shadow:var(--shadow-sm)}.sidebar button{background-color:transparent;border:none;outline:none;cursor:pointer;padding:1rem 1.5rem;text-align:left;width:100%;transition:var(--transition);font-size:0.95rem;color:var(--gray-600);display:flex;align-items:center;gap:0.75rem}.sidebar button:hover{background-color:var(--gray-100);color:var(--primary-color)}.sidebar button.active{background-color:var(--primary-color);color:var(--white);font-weight:500}.logo{width:80%;max-width:100%;max-height:100%;height:auto;display:block;margin:2.5rem auto 0;padding:0;margin-bottom:0;padding-bottom:0}.content{margin-left:240px;padding:2rem;width:calc(100% - 240px);max-width:1200px}.tabcontent{display:none;padding:1.5rem;border-radius:8px;background-color:var(--white);box-shadow:var(--shadow-md);margin-bottom:1.5rem}.form-table{width:100%;border-collapse:separate;border-spacing:0 0.5rem;font-weight:600}.form-table td{padding:0.75rem;vertical-align:middle}.form-table td:first-child{width:40%;font-weight:500;color:var(--gray-700)}.slider-container{display:flex;align-items:center;gap:10px}input[type="range"]{width:100%}input[type="text"],input[type="number"],select{width:100%;padding:0.65rem;border:1px solid var(--gray-300);border-radius:6px;font-size:0.95rem;transition:var(--transition);background-color:var(--white)}input[type="text"]:focus,input[type="number"]:focus,select:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(36,71,143,0.1);outline:none}input[type="text"]:disabled,input[type="number"]:disabled,select:disabled{background-color:var(--gray-100);cursor:not-allowed}button,input[type="button"],.store{padding:0.65rem 1.25rem;border:none;border-radius:6px;background-color:var(--primary-color);color:var(--white);font-weight:500;cursor:pointer;transition:var(--transition)}button:hover,input[type="button"]:hover,.store:hover{background-color:var(--primary-dark)}button:disabled,input[type="button"]:disabled,.store:disabled{background-color:var(--gray-400);cursor:not-allowed}.section-title{font-size:1.5rem;font-weight:600;margin:0 0 1rem;color:var(--primary-color);padding-bottom:0.5rem;border-bottom:2px solid var(--primary-light)}.divider{margin:1.5rem 0;border-bottom:1px solid var(--gray-200)}#table2{width:100%;border-collapse:separate;border-spacing:0;margin:1rem 0}#table2 th,#table2 td{padding:0.75rem;border:1px solid var(--gray-300)}#table2 th{background-color:var(--gray-100);font-weight:600;text-align:left}#table2 tr:nth-child(even){background-color:var(--gray-50)}.status-indicator{display:inline-flex;align-items:center;padding:0.25rem 0.75rem;border-radius:1rem;font-size:0.875rem;font-weight:500}.status-connected{background-color:#d1fae5;color:#065f46}.status-disconnected{background-color:#fee2e2;color:#991b1b}input[type="file"]{padding:0.5rem;border:1px dashed var(--gray-400);border-radius:6px;background-color:var(--gray-50);cursor:pointer}input[type="file"]:hover{border-color:var(--primary-color)}input[type="checkbox"]{width:1.25rem;height:1.25rem;margin-right:0.5rem;cursor:pointer}.notification-container{position:fixed;top:0;left:240px;right:0;z-index:1000;padding:1rem;font-weight:500;display:none;transition:all 0.3s ease}.notification-container.show{display:block}.form-input::placeholder{font-size:14px;color:#888}.custom-init-group{margin-bottom:1.5rem}.custom-init-group label{display:block;margin-bottom:0.5rem;color:var(--gray-700)}.pid-entry{border:none;border-radius:8px;padding:0rem;margin-bottom:0.2rem;background:var(--white);font-size:0.95rem;font-weight:500;color:var(--gray-600)}.pid-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.pid-title{color:var(--gray-700)}.pid-content{display:flex;flex-direction:column;gap:1.5rem}.pid-field{display:flex;flex-direction:column;gap:0.5rem}.pid-field label{color:var(--gray-700)}.pid-field input,.pid-field select{width:50%;padding:0.75rem;border:1px solid var(--gray-300);border-radius:6px}.button-group{margin-top:1rem;display:flex;gap:1rem}@media (max-width:768px){.notification-container{left:0}}@media (max-width:1024px){.sidebar{width:200px}.content{margin-left:200px;width:calc(100% - 200px)}}@media (max-width:768px){.sidebar{width:100%;height:auto;position:relative}.content{margin-left:0;width:100%;padding:1rem}.form-table td{display:block;width:100%}.form-table td:first-child{padding-bottom:0.25rem}.compact-form-table{width:100%;border-collapse:collapse}.compact-form-table td{padding:3px;vertical-align:middle;font-size:0.85rem}.compact-form-table input,.compact-form-table select{width:95%;padding:2px 5px;height:24px;font-size:0.85rem;border:1px solid var(--gray-300);border-radius:4px}}</style></head><body onload="Load();"><div class="sidebar"><embed src="/logo.svg" class="logo" /><button class="tablinks" onclick="openTab(event, 'status_view')" id="defaultOpen"><b>Status</b></button><button class="tablinks" onclick="openTab(event, 'wifi_settings')"><b>Settings</b></button><button class="tablinks" onclick="openTab(event, 'automate')"><b>Automate</b></button><button class="tablinks" onclick="openTab(event, 'monitor')"><b>Monitor</b></button><button class="tablinks" onclick="openTab(event, 'power_saving_tab')"><b>Power Saving</b></button><button class="tablinks" onclick="openTab(event, 'system_tab')"><b>System</b></button><button class="tablinks" onclick="openTab(event, 'about_tab')"><b>About</b></button></div><div class="content"><div id="notification" class="notification-container"></div><div id="status_view" class="tabcontent"><div class="section-title">Status</div><table class="form-table"><tr><td>WiFi Mode:</td><td><div id="wifi_mode_current">AP&nbsp;</div></td></tr><tr><td>AP Channel:</td><td><div id="ap_channel_status">6&nbsp;</div></td></tr><tr><td>WiFi Station:</td><td><div id="sta_status">Not Connected&nbsp;</div></td></tr><tr><td>Station IP:</td><td><div id="sta_ip">192.168.3.1&nbsp;</div></td></tr><tr><td>mDNS:</td><td><div id="mdns">&nbsp;</div></td></tr><tr><td>CAN Bitrate:</td><td><div id="can_bitrate_status">500K&nbsp;</div></td></tr><tr><td>CAN Mode:</td><td><div id="can_mode_status">Silent&nbsp;</div></td></tr><tr><td>Port Type:</td><td><div id="port_type_status">TCP&nbsp;</div></td></tr><tr><td>TCP/UDP Port:</td><td><div id="port_status">3333&nbsp;</div></td></tr><tr><td>Battery Voltage:</td><td><div id="batt_voltage">12.8V&nbsp;</div></td></tr><tr><td><input id="check_status_button" name="check_status_button" type="button" onclick="checkStatus()" value="Check status" /></td><td>&nbsp;</td></tr></table></div><div id="wifi_settings" class="tabcontent"><form id="configForm" name="configForm" action="/action_page" onchange="submit_enable();"><div class="section-title">AP Config</div><table class="form-table"><tr><td>Mode:</td><td><select name="wifi_mode" id="wifi_mode"><option value="AP">AP</option><option value="APStation">AP+Station</option></select></td></tr><tr><td>AP Channel:</td><td><select name="ap_ch_value" id="ap_ch_value"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option></select></td></tr><tr><td>AP Password:</td><td><input type="text" id="ap_pass_value" name="ap_pass_value" value="Testpass" /></td></tr></table><div class="divider"></div><div class="section-title">Station Config</div><table class="form-table"><tr><td>SSID:</td><td><input type="text" id="ssid_value" name="ssid_value" value="MeatPi" disabled /></td></tr><tr><td>Password:</td><td><input type="text" id="pass_value" name="pass_value" value="TomatoSauce" disabled /></td></tr><tr><td>Security:</td><td><select id="sta_security" name="sta_security" disabled><option value="wpa3">WPA3</option><option value="wpa2">WPA2</option></select></td></tr></table><div class="divider"></div><div class="section-title">CAN</div><table class="form-table"><tr><td>CAN Bitrate:</td><td><select name="can_datarate" id="can_datarate"><option value="5K">5K</option><option value="10K">10K</option><option value="20K">20K</option><option value="25K">25K</option><option value="50K">50K</option><option value="100K">100K</option><option value="125K">125K</option><option value="250K">250K</option><option value="500K">500K</option><option value="800K">800K</option><option value="1000K">1000K</option><option value="auto">Auto</option></select></td></tr><tr><td>CAN Mode:</td><td><select name="can_mode" id="can_mode"><option value="normal" selected="selected">Normal</option><option value="silent">Silent</option></select></td></tr><tr><td>Port Type:</td><td><select name="port_type" id="port_type"><option value="tcp">TCP</option><option value="udp">UDP</option></select></td></tr><tr><td>TCP/UDP Port:</td><td><input type="number" id="tcp_port_value" name="tcp_port_value" value="3333" min="1" max="65535" /></td></tr><tr><td>Protocol:</td><td><select name="protocol" id="protocol"><option value="realdash66">realdash66</option><option value="slcan">slcan</option><option value="savvycan">savvyCAN</option><option value="elm327">elm327</option><option value="auto_pid">AutoPID</option></select></td></tr><tr><td>MQTT:</td><td><select name="mqtt_en" id="mqtt_en"><option value="enable">Enable</option><option value="disable">Disable</option></select></td></tr></table><div class="divider"></div><div class="section-title">BLE</div><table class="form-table"><tr><td>Passkey:</td><td><input type="number" id="ble_pass_value" name="ble_pass_value" value="000000" min="0" max="999999" /></td></tr><tr><td>BLE Status:</td><td><select name="ble_status" id="ble_status"><option value="enable">Enable</option><option value="disable">Disable</option></select></td></tr></table><div id="mqtt_en_div"><div class="divider"></div><div class="section-title">MQTT</div><table class="form-table"><tr><td><label for="mqtt_url"><b>MQTT URL:</b></label></td><td><input type="text" id="mqtt_url" name="mqtt_url" value="127.0.0.1" /></td></tr><tr><td><label for="mqtt_port"><b>MQTT Port:</b></label></td><td><input type="number" id="mqtt_port" name="mqtt_port" value="1883" min="1" max="65535" /></td></tr><tr><td><label for="mqtt_user"><b>MQTT User:</b></label></td><td><input type="text" id="mqtt_user" name="mqtt_user" value="meatpi" /></td></tr><tr><td><label for="mqtt_pass"><b>MQTT Pass:</b></label></td><td><input type="text" id="mqtt_pass" name="mqtt_pass" value="meatpi" /></td></tr><tr><td><label for="mqtt_tx_topic"><b>TX Topic:</b></label></td><td><input type="text" id="mqtt_tx_topic" name="mqtt_tx_topic" value="" /></td><td><input type="checkbox" id="mqtt_tx_en_checkbox" name="mqtt_tx_en_checkbox" onchange="txCheckBoxChanged()"></td></tr><tr><td><label for="mqtt_rx_topic"><b>RX Topic:</b></label></td><td><input type="text" id="mqtt_rx_topic" name="mqtt_rx_topic" value="" /></td><td><input type="checkbox" id="mqtt_rx_en_checkbox" name="mqtt_rx_en_checkbox" onchange="rxCheckBoxChanged()"></td></tr><tr><td><label for="mqtt_status_topic"><b>Status Topic:</b></label></td><td><input type="text" id="mqtt_status_topic" name="mqtt_status_topic" value="" /></td></tr><tr><td><label for="mqtt_elm327_log"><b>MQTT elm327 log:</b></label></td><td><select name="mqtt_elm327_log" style="width: 93px;" id="mqtt_elm327_log" onchange="alert_elm327()"><option value="enable">Enable</option><option value="disable">Disable</option></select></td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table><div style="overflow-x:auto;"><table id="can_flt_table"><tr><th>CAN ID (dec)</th><th>Name</th><th>PID</th><th>Index</th><th>Start Bit</th><th>Bit Length</th><th>Expression</th><th>Cycle ms</th><th><input id="store_canflt_button" name="store_canflt_button" type="button" onclick="storeCANFLT()" value="Store" style="width: 70px;" /></th></tr><tr><td><input type="number" id="canId" min="0" max="536870912" style="width: 100px;" /></td><td><input type="text" id="name" maxlength="16" style="width: 70px;" /></td><td><input type="number" id="pid" style="width: 40px;" /></td><td><input type="number" id="pindex" style="width: 40px;" /></td><td><input type="number" id="startBit" min="0" max="63" style="width: 40px;" /></td><td><input type="number" id="bitLength" min="1" max="64" style="width: 40px;" /></td><td><input type="text" id="expression" maxlength="32" style="width: 100px;" /></td><td><input type="number" id="cycle" min="100" max="1000" style="width: 50px;" /></td><td><input id="add_row_button" name="add_row_button" type="button" onclick="addCANFLTRow()" value="Add ID" style="width: 70px;" /></td></tr></table></div></div></form></div><div id="automate" class="tabcontent"><div class="section-title">Automate</div><table class="form-table"><tr><td>MQTT HA Discovery:</td><td><select id="ha_discovery" name="ha_discovery" onchange="checkForDuplicates(); toggleDestinationAndCycle(); toggleSendToFields(); enableAutoStoreButton();submit_enable();"><option value="disable">Disable</option></select></td></tr><tr><td>Grouping:</td><td><select id="grouping" name="grouping" onchange="checkForDuplicates(); toggleDestinationAndCycle(); toggleSendToFields(); enableAutoStoreButton();submit_enable();"><option value="disable">Disable</option><option value="enable">Enable</option></select></td></tr><tr><td>Destination Type:</td><td><select id="group_dest_type" name="group_dest_type" onchange="enableAutoStoreButton();submit_enable();"><option value="Default">Default</option><option value="MQTT_Topic">MQTT Topic</option></select></td></tr><tr><td>Destination:</td><td><input type="text" id="destination" name="destination" disabled oninput="enableAutoStoreButton();submit_enable();"></td></tr><tr><td>Cycle Time(ms):</td><td><input type="text" id="group_cycle" name="group_cycle" value="5000" disabled oninput="enableAutoStoreButton();submit_enable();"></td></tr></table><div class="section-title">Standard PIDs</div><table class="form-table"><tr><td>Standard PIDs:</td><td><select id="standard_pids" name="standard_pids" onchange="toggleStandardPIDOptions();enableAutoStoreButton();submit_enable();"><option value="disable">Disable</option><option value="enable">Enable</option></select></td></tr><tr><td>ECU Protocol:</td><td><select id="ecu_protocol" name="ecu_protocol" onchange="enableAutoStoreButton();submit_enable();"><option value="6">6- ISO 15765-4 (CAN 11bit/500K)</option><option value="7">7- ISO 15765-4 (CAN 29bit/500K)</option><option value="8">8- ISO 15765-4 (CAN 11bit/250K)</option><option value="9">9- ISO 15765-4 (CAN 29bit/250K)</option></select></td></tr><tr><td>Available PIDs:</td><td style="display: flex; align-items: center; gap: 5px;"><select id="available_pids" name="available_pids" disabled onchange="enableAutoStoreButton();submit_enable();" style="flex: 1;"></select><button id="add_pid_button" onclick="addSelectedPID()" disabled style="margin-left: 5px;">Add PID</button><button id="scan_pids_button" onclick="scanAvailablePIDs()" style="margin-left: 5px;">Scan PIDs</button></td></tr></table><div id="standard_pids_table"><div class="std-pid-entries"></div></div><div class="section-title">Vehicle Specific</div><table class="form-table"><tr><td>Vehicle Specific:</td><td><select id="car_specific" name="car_specific" onchange="toggleCarModel(); toggleDestinationAndCycle(); enableAutoStoreButton();submit_enable();"><option value="disable">Disable</option><option value="enable">Enable</option></select></td></tr><tr><td>Vehicle Model:</td><td style="display: flex; align-items: center; gap: 5px;"><select id="car_model" name="car_model" onchange="enableAutoStoreButton();submit_enable();" style="flex: 1;"></select><button onclick="fetchVehicleProfiles()" style="margin-left: 5px;">Get Latest</button></td></tr><tr><td>Vehicle Profiles:</td><td><form id="car_data_form" enctype="multipart/form-data"><input id="car_data_file" name="car_data_file" type="file" onchange="sendCARDataFile();submit_enable();" /></form></td></tr><tr><td>Specific Initialisation:</td><td><input type="text" id="specific_init" name="specific_init" oninput="enableAutoStoreButton()"></td></tr></table><div id="specific_pids_table"><div class="specific-pid-entries"></div></div><div class="section-title">Custom PIDs</div><table class="form-table"><tr><td>Custom Initialisation:</td><td><input type="text" id="initialisation" name="initialisation" oninput="enableAutoStoreButton()"></td></tr></table><div id="automate_table"><div class="pid-entries"></div></div><div class="button-group"><button onclick="addRowAutoTable()" class="primary-button">New</button><button id="custom_pid_store" onclick="storeAutoTableData()" class="store" disabled>Store</button></div></div><div id="monitor" class="tabcontent"><div class="section-title">Monitor Settings</div><table class="form-table"><tr><td>Bitrate</td><td>Filter</td><td>Mask</td></tr><tr><td><select name="mon_datarate" id="mon_datarate"><option value="10K">10K</option><option value="20K">20K</option><option value="50K">50K</option><option value="100K">100K</option><option value="125K">125K</option><option value="250K">250K</option><option value="500K" selected="selected">500K</option><option value="800K">800K</option><option value="1000K">1Mbit</option></select></td><td><input type="text" id="mon_filter" name="mon_filter" value="00000000" /></td><td><input type="text" id="mon_mask" name="mon_mask" value="FFFFFFFF" /></td><td><input id="mon_button" name="mon_button" type="button" onclick="mon_control()" value="Start" style="font-size: 100%;" /></td></tr></table><div class="divider"></div><table id="table2" class="form-table"><thead><tr><th>ID</th><th>Type</th><th>Len</th><th>Data</th><th>Time</th><th>Count</th></tr></thead><tbody></tbody></table></div><div id="power_saving_tab" class="tabcontent"><div class="section-title">Sleep Mode</div><table class="form-table"><tr><td>Sleep Mode:</td><td><select name="sleep_status" id="sleep_status" onChange="submit_enable();"><option value="enable">Enable</option><option value="disable">Disable</option></select></td></tr><tr><td>Sleep Voltage:</td><td class="slider-container"><input type="range" id="sleep_volt" name="sleep_volt" value="13.2" min="12.0" max="15.0" step="0.1" oninput="document.getElementById('sleep_volt_value').textContent = this.value;submit_enable();"><span id="sleep_volt_value">13.2</span>V
-                    </td></tr><tr><td>Sleep After:</td><td class="slider-container"><input type="range" id="sleep_time" name="sleep_time" value="2" min="1" max="30" step="1" oninput="document.getElementById('sleep_time_value').textContent = this.value;submit_enable();"><span id="sleep_time_value">2</span>min
-                    </td></tr><tr><td>Battery Alert:</td><td><select name="batt_alert" id="batt_alert" onchange="submit_enable();"><option value="enable">Enable</option><option value="disable">Disable</option></select></td></tr></table><div id="batt_alert_div"><div class="divider"></div><div class="section-title">Battery Alert</div><table class="form-table"><tr><td><label for="batt_alert_ssid"><b>SSID:</b></label></td><td><input type="text" id="batt_alert_ssid" name="batt_alert_ssid" value="MeatPi" /></td></tr><tr><td><label for="batt_alert_pass"><b>Password:</b></label></td><td><input type="text" id="batt_alert_pass" name="batt_alert_pass" value="TomatoSauce" /></td></tr><tr><td><label for="batt_alert_volt"><b>Alert Voltage:</b></label></td><td><input type="number" step="0.1" id="batt_alert_volt" name="batt_alert_volt" value="11.0" min="9.0" max="15.0" /></td></tr><tr><td><label for="batt_alert_protocol"><b>Alert Protocol:</b></label></td><td><select name="batt_alert_protocol" style="width: 93px;" id="batt_alert_protocol"><option value="mqtt">MQTT</option></select></td></tr><tr><td><label for="batt_alert_url"><b>Alert URL:</b></label></td><td><input type="text" id="batt_alert_url" name="batt_alert_url" value="127.0.0.1" /></td></tr><tr><td><label for="batt_alert_port"><b>Alert Port:</b></label></td><td><input type="number" id="batt_alert_port" name="batt_alert_port" value="1883" min="1" max="65535" /></td></tr><tr><td><label for="batt_mqttusername"><b>Alert MQTT User:</b></label></td><td><input type="text" id="batt_mqtt_user" name="batt_mqtt_user" value="meatpi" /></td></tr><tr><td><label for="batt_mqttpass"><b>Alert MQTT Pass:</b></label></td><td><input type="text" id="batt_mqtt_pass" name="batt_mqtt_pass" value="meatpi" /></td></tr><tr><td><label for="batt_alert_topic"><b>Alert Topic:</b></label></td><td><input type="text" id="batt_alert_topic" name="batt_alert_topic" value="CAR1/voltage" /></td></tr><tr><td><b>Alert every:</b></td><td><select name="batt_alert_time" style="width: 93px;" id="batt_alert_time"><option value="1">1hr</option><option value="6">6hr</option><option value="12">12hr</option><option value="24">1day</option></select></td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table></div></div><div id="system_tab" class="tabcontent"><div class="section-title">System</div><table class="form-table"><tr><td>Reboot WiCAN:</td><td><input id="reboot_button" name="reboot_button" type="button" onclick="reboot()" value="Reboot" style="width: 15%;" /></td></tr><tr><td>Download Configuration:</td><td><input id="download_cfg_butt" name="download_cfg_butt" type="button" onclick="downloadCfg()" value="Download" style="width: 15%;" /></td></tr><tr><td>Upload Configuration:</td><td><input type="button" onclick="document.getElementById('fileInput').click()" value="Upload" style="width: 15%;" /><input type="file" id="fileInput" accept=".json" onchange="uploadCfg()" style="display: none;" /></td></tr></table><div class="section-title">Firmware Update</div><table class="form-table"><tr><td><input id="ota_file" name="ota_file" type="file" accept=".bin" /></td><td><input id="ota_submit_button" type="button" value="Update" onclick="otaClick()" style="width: 15%;" /></td></tr></table></div><div id="about_tab" class="tabcontent"><div class="section-title">About</div><form id="ota_form" action="/upload/ota.bin" method="post" enctype="multipart/form-data"><table class="form-table"><tr><td>Firmware ver:</td><td><div id="fw_version">1.00</div></td></tr><tr><td>Hardware ver:</td><td><div id="hw_version">v2.10</div></td></tr><tr><td>Git ver:</td><td><div id="git_version">v2.10</div></td></tr><tr><td>Designed By:</td><td><div id="made_by"><a href="https://www.meatpi.com/"><b>meatpi.com</b></a></div></td></tr></table></form></div><input id="submit_button" name="submit_button" type="button" onclick="postConfig()" value="Submit Changes" disabled /></div><script>
-document.addEventListener('DOMContentLoaded', (event) => {document.getElementById("submit_button").disabled=true;});
-let latest_car_models=null;function loadCarModels(data){const carModelSelect=document.getElementById("car_model");if(data && Array.isArray(data.supported)){carModelSelect.innerHTML = "";data.supported.forEach(model => {const option=document.createElement("option");option.value=model;option.text=model;carModelSelect.appendChild(option);});}else{console.error("Invalid data format or missing 'supported' property.");}
-toggleCarModel();toggleDestinationAndCycle();
-toggleSendToFields();toggleStandardPIDOptions();}
-function showNotification(message, color = "red", duration=5000){const notification=document.getElementById("notification");switch (color) {case "red":
-notification.style.backgroundColor = "#fee2e2";notification.style.borderColor = "#ef4444";notification.style.color = "#991b1b";break;
-case "green":
-notification.style.backgroundColor = "#dcfce7";notification.style.borderColor = "#22c55e";notification.style.color = "#166534";break;
-case "blue":
-notification.style.backgroundColor = "#dbeafe";notification.style.borderColor = "#3b82f6";notification.style.color = "#1e40af";break;
-case "yellow":
-notification.style.backgroundColor = "#fef9c3";notification.style.borderColor = "#eab308";notification.style.color = "#854d0e";break;
-default:
-notification.style.backgroundColor = "#fee2e2";notification.style.borderColor = "#ef4444";notification.style.color = "#991b1b";}
-notification.innerHTML=message;notification.classList.add("show");if(window.notificationTimeout){clearTimeout(window.notificationTimeout);}
-window.notificationTimeout=setTimeout(() => {notification.classList.remove("show");}, duration);}
-async function fetchVehicleProfiles(){try{if(!navigator.onLine){throw new Error('No internet connection');}
-const response=await fetch('https://raw.githubusercontent.com/meatpiHQ/wican-fw/main/vehicle_profiles.json');if(!response.ok){throw new Error('Network response was not ok');}
-const data=await response.json();console.log(data);
-latest_car_models=data;const carModels = [];carModels.push("Not Selected");if(data && Array.isArray(data.cars)){data.cars.forEach(car => {if(car.car_model){carModels.push(car.car_model);}});}
-console.log(carModels);var mod = {"supported": carModels};loadCarModels(mod);
-enableAutoStoreButton();} catch(error){console.error('There was a problem with the fetch operation:', error);showNotification("Unable to fetch vehicle_profiles.json. " + error.message, "red");}}
-function toggleCarModel(){const carSpecific=document.getElementById("car_specific").value;const carModelSelect=document.getElementById("car_model");if(carSpecific === "disable"){carModelSelect.disabled=true;}else{carModelSelect.disabled=false;}
-toggleDiscovery();}
-function toggleStandardPIDOptions(){const standardPidsSelect=document.getElementById("standard_pids");const ecuProtocolSelect=document.getElementById("ecu_protocol");const availablePidsSelect=document.getElementById("available_pids");const scanPidButton=document.getElementById("scan_pids_button");const isEnabled=standardPidsSelect.value === "enable";ecuProtocolSelect.disabled = !isEnabled;availablePidsSelect.disabled = !isEnabled;scanPidButton.disabled = !isEnabled;}
-function toggleDestinationAndCycle(){const grouping=document.getElementById("grouping").value;const destinationField=document.getElementById("destination");const cycleField=document.getElementById("group_cycle");const groupDestTypeFeild=document.getElementById("group_dest_type");if(grouping === "enable"){destinationField.disabled=false;cycleField.disabled=false;groupDestTypeFeild.disabled=false;}else{destinationField.disabled=true;cycleField.disabled=true;groupDestTypeFeild.disabled=true;}}
-function toggleDiscovery(){const carSpecific=document.getElementById("car_specific").value;const discovery=document.getElementById("ha_discovery");discovery.disabled=true;discovery.value = "disable";}
-function txCheckBoxChanged(){if(document.getElementById("mqtt_tx_en_checkbox").checked){document.getElementById("mqtt_tx_topic").disabled=false;}else{document.getElementById("mqtt_tx_topic").disabled=true;}}
-function rxCheckBoxChanged(){if(document.getElementById("mqtt_rx_en_checkbox").checked){document.getElementById("mqtt_rx_topic").disabled=false;}else{document.getElementById("mqtt_rx_topic").disabled=true;}}
-function sendCARDataFile(){const fileInput=document.getElementById("car_data_file");const maxFileSize=200 * 1024;if(fileInput.files.length==0){showNotification("No files selected!", "red");alert("No files selected!");}else{const file=fileInput.files[0];if(file.size > maxFileSize){showNotification("File size exceeds 200KB!", "red");alert("File size exceeds 200KB!");return;}
-const reader=new FileReader();reader.onload=function(event) {try{const jsonData=JSON.parse(event.target.result);const formattedData=jsonData.car_model ? {cars: [jsonData]} : jsonData;const unformattedJson=JSON.stringify(formattedData).replace(/\s+/g, '');const form=document.getElementById('car_data_form');const formData=new FormData(form);formData.set('car_data_file', new Blob([unformattedJson], {type: 'application/json'}));latest_car_models=null;fetch('/upload/car_data.json', {method: 'POST',
-body: formData})
-.then(response => response.text())
-.then(data => {console.log('Success:', data);showNotification(data, "green");setTimeout(() => {window.location.reload();}, 1000);})
-.catch(error => {console.error('Error:', error);});} catch (e){showNotification("Invalid JSON file!", "red");alert("The selected file is not a valid JSON file!");}};reader.readAsText(file);}}
-function addRowAutoTable(){addCollapsibleRow();enableAutoStoreButton();}
-async function scanAvailablePIDs(){const scanButton=document.querySelector('#scan_pids_button');const addButton=document.querySelector('#add_pid_button');try{scanButton.disabled=true;scanButton.textContent = "Scanning...";addButton.disabled=true;const ecuProtocol=document.getElementById('ecu_protocol').value;const response=await fetch(`/scan_available_pids?protocol=${ecuProtocol}`);if(!response.ok){throw new Error(`HTTP error! status: ${response.status}`);}
-const data=await response.json();const pidSelect=document.getElementById('available_pids');pidSelect.innerHTML = '';if(data.text){showNotification(data.text, "red");}else if(data.std_pids && Array.isArray(data.std_pids) && data.std_pids.length > 0){data.std_pids.forEach(pid => {const option=document.createElement('option');option.value=pid;option.textContent=pid;pidSelect.appendChild(option);});addButton.disabled=false;showNotification("PID scan complete", "green");}else{showNotification("No PIDs found. Try a different protocol or check if ignition is ON", "orange");}} catch(error){console.error('Error:', error);showNotification("PID scan failed: " + error.message, "red");} finally {scanButton.disabled=false;scanButton.textContent = "Scan PIDs";}}
-const pidEntryStyles = `
-.pid-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.5rem;margin-top: 0.5rem;border: 2px solid var(--gray-300);border-radius: 8px;}
-.header-right {display: flex;gap: 0.5rem;}
-.collapse-btn {background: none;border: none;cursor: pointer;font-size: 1.2rem;padding: 0.25rem 0.5rem;color: var(--gray-700);}
-.pid-content {display: flex;flex-direction: column;gap: 1.5rem;transition: height 0.3s ease;}
-.pid-content.hidden {display: none;}
-`;function addCollapsibleRow(rowData = {}){const container=document.querySelector('.pid-entries');const entry=document.createElement('div');entry.className = 'pid-entry';entry.innerHTML = `
-<div class="pid-header"><div class="header-left"><button type="button" class="collapse-btn">▼</button><span class="pid-title">New PID</span></div><div class="header-right"><button type="button" class="delete-btn">Delete</button></div></div><div class="pid-content hidden"><table class="compact-form-table"><tr><td>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td><input type="text" class="name-input" value="${rowData.Name || ''}" placeholder="Parameter Name"></td></tr><tr><td>Init:</td><td><input type="text" class="init-input" value="${rowData.Init || ''}" placeholder="PID Init"></td></tr><tr><td>PID:</td><td><input type="text" class="pid-input" value="${rowData.PID || ''}" placeholder="PID"></td></tr><tr><td>Expression:</td><td><input type="text" class="expression-input" value="${rowData.Expression || ''}" placeholder="Enter expression"></td></tr><tr><td>Min Value:</td><td><input type="number" class="min-value-input" value="${rowData.MinValue || ''}" step="0.01" placeholder="Minimum value"></td></tr><tr><td>Max Value:</td><td><input type="number" class="max-value-input" value="${rowData.MaxValue || ''}" step="0.01" placeholder="Maximum value"></td></tr><tr><td>Period(ms):</td><td><input type="number" class="period-input" value="${rowData.Period || ''}" placeholder="ms"></td></tr><tr><td>Destination Type:</td><td><select class="type-select"><option value="Default" ${rowData.Type === 'Default' ? 'selected' : ''}>Default</option><option value="MQTT_Topic" ${rowData.Type === 'MQTT_Topic' ? 'selected' : ''}>MQTT_Topic</option><option value="MQTT_WallBox" ${rowData.Type === 'MQTT_WallBox' ? 'selected' : ''}>MQTT_WallBox</option></select></td></tr><tr><td>Send_to:</td><td><input type="text" class="send-to-input" value="${rowData.Send_to || ''}" placeholder="Enter destination"></td></tr></table></div>
-`;const style=document.createElement('style');style.textContent=pidEntryStyles;document.head.appendChild(style);
-const header=entry.querySelector('.pid-header');const deleteBtn=entry.querySelector('.delete-btn');const collapseBtn=entry.querySelector('.collapse-btn');const content=entry.querySelector('.pid-content');const parameterTitle=entry.querySelector('.pid-title');const nameInput=entry.querySelector('.name-input');const pidInput=entry.querySelector('.pid-input');deleteBtn.addEventListener('click', () => {entry.remove();enableAutoStoreButton();});const toggleCollapse = (e) => {e.stopPropagation();const isHidden=content.style.display === 'none';content.style.display=isHidden ? 'block' : 'none';collapseBtn.textContent=isHidden ? '▲' : '▼';};
-header.addEventListener('click', toggleCollapse);collapseBtn.addEventListener('click', toggleCollapse);parameterTitle.textContent=rowData.Name ? rowData.Name : 'New PID';const updateTitle = () => {parameterTitle.textContent = `${nameInput.value || 'New Parameter'}`;};
-nameInput.addEventListener('input', updateTitle);pidInput.addEventListener('input', updateTitle);entry.querySelectorAll('input, select').forEach(input => {input.addEventListener('input', enableAutoStoreButton);});
-container.appendChild(entry);}
-function addSelectedPID(rowData = {}){const pidSelect=document.getElementById('available_pids');const selectedPID=rowData.Name || pidSelect.value;if(selectedPID){const container=document.querySelector('.std-pid-entries');const entry=document.createElement('div');entry.className = 'std-pid-entry';entry.innerHTML = `
-<div class="pid-header"><div class="header-left"><button type="button" class="collapse-btn">▼</button><span class="pid-title">${selectedPID}</span></div><div class="header-right"><button type="button" class="delete-btn">Delete</button></div></div><div class="pid-content" style="display: none;"><table class="compact-form-table"><tr><td>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td><input type="text" class="name-input" value="${selectedPID}" readonly></td></tr><tr><td>Receive Header:</td><td><input type="text" class="receive-header-input" value="${rowData.ReceiveHeader || ''}" placeholder="Optional Receive Header" maxlength="8"></td></tr><tr><td>Period(ms):</td><td><input type="number" class="period-input" value="${rowData.Period || '1000'}" min="100" max="120000"></td></tr><tr><td>Destination Type:</td><td><select class="type-select"><option value="Default" ${rowData.Type === 'Default' ? 'selected' : ''}>Default</option><option value="MQTT_Topic" ${rowData.Type === 'MQTT_Topic' ? 'selected' : ''}>MQTT_Topic</option><option value="MQTT_WallBox" ${rowData.Type === 'MQTT_WallBox' ? 'selected' : ''}>MQTT_WallBox</option></select></td></tr><tr><td>Destination:</td><td><input type="text" class="send-to-input" value="${rowData.Send_to || ''}" placeholder="Enter destination"></td></tr></table></div>
-`;const style=document.createElement('style');style.textContent=pidEntryStyles;document.head.appendChild(style);
-const header=entry.querySelector('.pid-header');const deleteBtn=entry.querySelector('.delete-btn');const collapseBtn=entry.querySelector('.collapse-btn');const content=entry.querySelector('.pid-content');deleteBtn.addEventListener('click', () => {entry.remove();enableAutoStoreButton();});const toggleCollapse = (e) => {e.stopPropagation();const isHidden=content.style.display === 'none';content.style.display=isHidden ? 'block' : 'none';collapseBtn.textContent=isHidden ? '▲' : '▼';};
-header.addEventListener('click', toggleCollapse);collapseBtn.addEventListener('click', toggleCollapse);entry.querySelectorAll('input, select').forEach(input => {input.addEventListener('input', enableAutoStoreButton);});
-container.appendChild(entry);enableAutoStoreButton();}}
-function addCarParameter(rowData = {}){if(rowData.name){const container=document.querySelector('.specific-pid-entries');const entry=document.createElement('div');entry.className = 'specific-pid-entry';entry.innerHTML = `
-<div class="pid-header"><div class="header-left"><button type="button" class="collapse-btn">▼</button><span class="pid-title">${rowData.name}</span></div><div class="header-right"><button type="button" class="delete-btn">Delete</button></div></div><div class="pid-content" style="display: none;"><table class="compact-form-table"><tr><td>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td><td><input type="text" class="name-input" value="${rowData.name}"></td></tr><tr><td>PID:</td><td><input type="text" class="pid-input" value="${rowData.pid || ''}" placeholder="PID"></td></tr><tr><td>PID Init:</td><td><input type="text" class="pid-init-input" value="${rowData.pid_init || ''}" placeholder="Init"></td></tr><tr><td>Expression:</td><td><input type="text" class="expression-input" value="${rowData.expression || ''}" placeholder="Expression"></td></tr><tr><td>Unit:</td><td><input type="text" class="unit-input" value="${rowData.unit || ''}" placeholder="Unit"></td></tr><tr><td>Class:</td><td><input type="text" class="class-input" value="${rowData.class || ''}" placeholder="Class"></td></tr><tr><td>Min Value:</td><td><input type="number" class="min-input" value="${rowData.min || ''}" step="0.01" placeholder="Min"></td></tr><tr><td>Max Value:</td><td><input type="number" class="max-input" value="${rowData.max || ''}" step="0.01" placeholder="Max"></td></tr><tr><td>Period(ms):</td><td><input type="number" class="period-input" value="${rowData.period || '5000'}" min="100" max="60000"></td></tr><tr><td>Destination Type:</td><td><select class="type-select"><option value="Default" ${rowData.type === 'Default' ? 'selected' : ''}>Default</option><option value="MQTT_Topic" ${rowData.type === 'MQTT_Topic' ? 'selected' : ''}>MQTT_Topic</option><option value="MQTT_WallBox" ${rowData.type === 'MQTT_WallBox' ? 'selected' : ''}>MQTT_WallBox</option></select></td></tr><tr><td>Destination:</td><td><input type="text" class="send-to-input" value="${rowData.send_to || ''}" placeholder="Destination"></td></tr></table></div>
-`;const style=document.createElement('style');style.textContent=pidEntryStyles;document.head.appendChild(style);
-const header=entry.querySelector('.pid-header');const deleteBtn=entry.querySelector('.delete-btn');const collapseBtn=entry.querySelector('.collapse-btn');const content=entry.querySelector('.pid-content');deleteBtn.addEventListener('click', () => {entry.remove();enableAutoStoreButton();});const toggleCollapse = (e) => {e.stopPropagation();const isHidden=content.style.display === 'none';content.style.display=isHidden ? 'block' : 'none';collapseBtn.textContent=isHidden ? '▲' : '▼';};
-header.addEventListener('click', toggleCollapse);collapseBtn.addEventListener('click', toggleCollapse);entry.querySelectorAll('input, select').forEach(input => {input.addEventListener('input', enableAutoStoreButton);});
-container.appendChild(entry);enableAutoStoreButton();}}
-function loadAutoTable(jsonData){try{console.log("Raw jsonData:", jsonData);const data=JSON.parse(jsonData);console.log("Parsed data:", data);const initialisationElement=document.getElementById("initialisation");if(initialisationElement){initialisationElement.value=data.initialisation || '';}
-const automateTable=document.getElementById("automate_table");if(!automateTable){console.error("Automate table not found");return;}
-const setElementValue = (id, value, defaultValue = '') => {const element=document.getElementById(id);if(element){element.value=value || defaultValue;}};setElementValue("car_specific", data.car_specific, 'disable');setElementValue("ha_discovery", 'disable');setElementValue("grouping", data.grouping, 'disable');setElementValue("group_cycle", data.cycle, '5000');setElementValue("destination", data.destination, '');setElementValue("car_model", data.car_model, '');setElementValue("standard_pids", data.standard_pids, 'disable');setElementValue("ecu_protocol", data.ecu_protocol, '6');setElementValue("group_dest_type", data.group_dest_type, 'Default');if(data.pids && Array.isArray(data.pids)){data.pids.forEach((pidData,index) => {console.log(`Loading PID ${index}:`, pidData);addCollapsibleRow({Name: pidData.Name || '',
-Init: pidData.Init || '',
-PID: pidData.PID || '',
-Expression: pidData.Expression || '',
-MinValue: pidData.MinValue || '',
-MaxValue: pidData.MaxValue || '',
-Period: pidData.Period || '',
-Type: pidData.Type || 'Default',
-Send_to: pidData.Send_to || ''});});}if(data.std_pids && Array.isArray(data.std_pids)){data.std_pids.forEach((pidData,index) => {console.log(`Loading Standard PID ${index}:`, pidData);addSelectedPID({Name: pidData.Name || '',
-ReceiveHeader: pidData.ReceiveHeader || '',
-Period: pidData.Period || '',
-Type: pidData.Type || 'Default',
-Send_to: pidData.Send_to || ''});});}
-requestAnimationFrame(() => {try{const carSpecificElement=document.getElementById("car_specific");if(carSpecificElement){carSpecificElement.dispatchEvent(new Event('change'));}
-const groupingElement=document.getElementById("grouping");if(groupingElement){groupingElement.dispatchEvent(new Event('change'));}
-const groupDestTypeElement=document.getElementById("group_dest_type");if(groupDestTypeElement){groupDestTypeElement.dispatchEvent(new Event('change'));}
-const ecuProtocolElement=document.getElementById("ecu_protocol");if(ecuProtocolElement){ecuProtocolElement.dispatchEvent(new Event('change'));}
-const standardPidsElement=document.getElementById("standard_pids");if(standardPidsElement){standardPidsElement.dispatchEvent(new Event('change'));}if(typeof toggleCarModel === 'function') toggleCarModel();if(typeof toggleDestinationAndCycle === 'function') toggleDestinationAndCycle();if(typeof toggleSendToFields === 'function') toggleSendToFields();if(typeof toggleStandardPIDOptions === 'function') toggleStandardPIDOptions();} catch (error){console.error('Error in UI updates:', error);}});console.log("loadAutoTable completed successfully");} catch(error){console.error('Error in loadAutoTable:', error);showNotification("Error loading table data: " + error.message, "red");}}
-function enableAutoStoreButton(){const storeButton=document.querySelector('button.store');if(storeButton){storeButton.disabled=false;}
-document.getElementById("custom_pid_store").disabled=false;}
-async function storeAutoTableData(){try{const custom_pid_data = [];const std_pid_data = [];const entries=document.querySelectorAll('.pid-entry');const standardEntries=document.querySelectorAll('.std-pid-entry');const initialisationValue=document.getElementById("initialisation")?.value || '';const groupingValue=document.getElementById("grouping")?.value || 'disable';const groupDestTypeValue=document.getElementById("group_dest_type")?.value || 'Default';const ha_discoveryValue=document.getElementById("ha_discovery")?.value || 'disable';const destinationValue=document.getElementById("destination")?.value || '';const cycleField=document.getElementById("group_cycle");const cycleValue=cycleField?.value || '5000';const carSpecificValue=document.getElementById("car_specific")?.value || 'disable';const carModelField=document.getElementById("car_model");const standard_pidsValue=document.getElementById("standard_pids")?.value || 'disable';const ecu_protocolValue=document.getElementById("ecu_protocol")?.value || '6';const carModelValue=carModelField?.value || '';if(carSpecificValue== "enable" && (!carModelValue || carModelValue.length === 0 || carModelValue === "Not Selected")){throw new Error("Car model must be selected");}
-let carData = {car_model: carModelValue,
-init: document.getElementById("specific_init").value,
-pids: []};const specificPidEntries=document.querySelectorAll('.specific-pid-entry');if(specificPidEntries.length > 0){carData.pids=Array.from(specificPidEntries).map(entry => {return {pid: entry.querySelector('.pid-input').value,
-pid_init: entry.querySelector('.pid-init-input').value,
-parameters: [{name: entry.querySelector('.name-input').value,
-expression: entry.querySelector('.expression-input').value,
-unit: entry.querySelector('.unit-input').value,
-class: entry.querySelector('.class-input').value,
-period: entry.querySelector('.period-input').value,
-min: entry.querySelector('.min-input').value,
-max: entry.querySelector('.max-input').value,
-type: entry.querySelector('.type-select').value,
-send_to: entry.querySelector('.send-to-input').value}]};});}
-fetch('/store_car_data', {method: 'POST',
-headers: {'Content-Type': 'application/json'},
-body: JSON.stringify({cars: [carData]})}).then(response => response.text())
-.then(data => console.log('Success:', data))
-.catch(error => console.error('Error:', error));if(!cycleField.disabled && (!/^\d+$/.test(cycleValue) || parseInt(cycleValue) < 1000)){showNotification("Cycle must be a number greater than 1000", "red");return false;}if(entries?.length){entries.forEach((entry,index) => {const pidData = {Name: entry.querySelector('.name-input')?.value || '',
-Init: entry.querySelector('.init-input')?.value || '',
-PID: entry.querySelector('.pid-input')?.value || '',
-Expression: entry.querySelector('.expression-input')?.value || '',
-MinValue: entry.querySelector('.min-value-input')?.value || '',
-MaxValue: entry.querySelector('.max-value-input')?.value || '',
-Period: entry.querySelector('.period-input')?.value || '',
-Type: entry.querySelector('.type-select')?.value || 'Default',
-Send_to: entry.querySelector('.send-to-input')?.value || ''};if(pidData.Name.length === 0 || pidData.Name.length >= 32){throw new Error("Name must not be empty and must be less than 32 characters");}if(pidData.PID.length === 0 || pidData.PID.length >= 10){throw new Error("PID must not be empty and must be less than 10 characters");}if(pidData.Expression.length === 0 || pidData.Expression.length >= 32){throw new Error("Expression must not be empty and must be less than 32 characters");}if(!/^\d+$/.test(pidData.Period) || (parseInt(pidData.Period) < 100 && parseInt(pidData.Period)!=0)){throw new Error("Period must be a number greater than 100");}if(pidData.Send_to.length >= 64){throw new Error("Send_to must be less than 64 characters");}
-custom_pid_data.push(pidData);});}if(standardEntries?.length){standardEntries.forEach((entry,index) => {const stdPIDData = {Name: entry.querySelector('.name-input')?.value || '',
-ReceiveHeader: entry.querySelector('.receive-header-input')?.value || '',
-Period: entry.querySelector('.period-input')?.value || '',
-Type: entry.querySelector('.type-select')?.value || 'Default',
-Send_to: entry.querySelector('.send-to-input')?.value || ''};if(stdPIDData.Name.length === 0 || stdPIDData.Name.length >= 32){throw new Error("Name must not be empty and must be less than 32 characters");}if(!/^\d+$/.test(stdPIDData.Period) || (parseInt(stdPIDData.Period) < 1000 && parseInt(stdPIDData.Period)!=0)){throw new Error("Period must be a number greater than 1000");}if(stdPIDData.Send_to.length >= 64){throw new Error("Send_to must be less than 64 characters");}
-std_pid_data.push(stdPIDData);});}
-const jsonData = {initialisation: initialisationValue,
-grouping: groupingValue,
-group_dest_type: groupDestTypeValue,
-destination: destinationValue,
-cycle: cycleValue,
-car_specific: carSpecificValue,
-ha_discovery: ha_discoveryValue,
-car_model: carModelValue,
-pids: custom_pid_data,
-std_pids: std_pid_data,
-standard_pids: standard_pidsValue,
-ecu_protocol: ecu_protocolValue};await fetch('store_auto_data', {method: 'POST',
-headers: {'Content-Type': 'application/json'},
-body: JSON.stringify(jsonData)})
-.then(response => response.text())
-.then(result => {showNotification("Settings saved successfully", "green");document.querySelector(".store").disabled=true;document.getElementById("custom_pid_store").disabled=true;})
-.catch(error => {showNotification("Error saving settings: " + error.message, "red");return false;});
-return true;} catch (error){showNotification(error.message, "red");return false;}}
-function checkForDuplicates(){const rows=document.querySelectorAll('.pid-entry');const pidMap=new Map();rows.forEach(row => {const pidInput=row.querySelector('.pid-input');const sendToInput=row.querySelector('.send-to-input');if(pidInput && pidInput.value){const pidValue=pidInput.value;if(pidMap.has(pidValue)){pidMap.get(pidValue).push(sendToInput);}else{pidMap.set(pidValue, [sendToInput]);}}});pidMap.forEach((inputs,pid) => {if(inputs.length > 1){inputs.forEach(input => {input.disabled=true;input.value = '';});}else{inputs[0].disabled=false;}});}
-function toggleDestinationField(){const groupingValue=document.getElementById("grouping").value;toggleDestinationAndCycle();}
-function toggleSendToFields(){const groupingValue=document.getElementById("grouping")?.value || 'disable';const table=document.getElementById("automate_table");if(!table) return;const rows=table.getElementsByClassName('pid-entry');if(!rows.length) return;Array.from(rows).forEach(row => {const sendToInput=row.querySelector('.send-to-input');if(sendToInput){sendToInput.disabled = (groupingValue === "Group ALL");}});}
-var canData = [];function restoreCANFLTRow(id,n,p,pi,s,b,e,c){var canId=id;if(canId < 0){canId=0;}else if(canId > 536870912){canId=536870912;}
-var name=n;var pid=p;var pindex=pi;var startBit=s;var bitLength=b;var expression=e;var cycle=c;var table=document.getElementById("can_flt_table");var row=table.insertRow(-1);var cell1=row.insertCell(0);var cell2=row.insertCell(1);var cell3=row.insertCell(2);var cell4=row.insertCell(3);var cell5=row.insertCell(4);var cell6=row.insertCell(5);var cell7=row.insertCell(6);var cell8=row.insertCell(7);var cell9=row.insertCell(8);cell1.innerHTML=canId;cell2.innerHTML=name;cell3.innerHTML=pid;cell4.innerHTML=pindex;cell5.innerHTML=startBit;cell6.innerHTML=bitLength;cell7.innerHTML=expression;cell8.innerHTML=cycle;cell9.innerHTML = '<button style="width: 70px;" onclick="deleteCANFLTRow(this)">Delete</button>';canData.push({CANID: canId,
-Name: name,
-PID: pid,
-PIDIndex: pindex,
-StartBit: startBit,
-BitLength: bitLength,
-Expression: expression,
-Cycle: cycle});document.getElementById("canId").value = "";document.getElementById("name").value = "";document.getElementById("pid").value = "";document.getElementById("pindex").value = "";document.getElementById("startBit").value = "";document.getElementById("bitLength").value = "";document.getElementById("expression").value = "";document.getElementById("cycle").value = "";}
-function openTab(evt,tabName){var i, tabcontent, tablinks;tabcontent=document.getElementsByClassName("tabcontent");for(i=0;i < tabcontent.length;i++){tabcontent[i].style.display = "none";}
-tablinks=document.getElementsByClassName("tablinks");for(i=0;i < tablinks.length;i++){tablinks[i].className=tablinks[i].className.replace(" active", "");}
-document.getElementById(tabName).style.display = "block";evt.currentTarget.className+=" active";}
-function sta_enable(){}
-function submit_enable(){console.log("sumbit_enable");if(document.getElementById("wifi_mode").value=="AP"){document.getElementById("ssid_value").disabled=true;document.getElementById("pass_value").disabled=true;document.getElementById("sta_security").disabled=true;document.getElementById("ble_status").disabled=false;}else{document.getElementById("ssid_value").disabled=false;document.getElementById("pass_value").disabled=false;document.getElementById("sta_security").disabled=false;document.getElementById("ble_status").disabled=true;document.getElementById("ble_status").selectedIndex="1";}if(document.getElementById("ble_status").selectedIndex=="0"){alert("Warrning!\\r\\n\\r\\nWhen BLE is connected the WiFi AP WiCAN_xxxxxx will be disabled.\\r\\nTo re-ennable the WiFi AP Turn OFF BLE on your phone or device, then power cycle WiCAN. If you connect to WiFi AP ssid WiCAN_xxxxxx, the BLE will automatically be disabled.");document.getElementById("mqtt_en").value = "disable";document.getElementById("mqtt_en_div").style.display = "none";document.getElementById("mqtt_en").disabled=true;document.getElementById("batt_alert").value = "disable";document.getElementById("batt_alert_div").style.display = "none";document.getElementById("batt_alert").disabled=true;}else{document.getElementById("mqtt_en").disabled=false;document.getElementById("batt_alert").disabled=false;}if(document.getElementById("ap_pass_value").value.length < 8 || document.getElementById("ap_pass_value").value.length > 63 || document.getElementById("pass_value").value.length < 8 || document.getElementById("pass_value").value.length > 63){showNotification("AP/Station password len, min=0 max=64", "red");document.getElementById("submit_button").disabled=true;}else if(document.getElementById("ssid_value").value.length < 1 || document.getElementById("ssid_value").value.length > 32){showNotification("AP/station ssid len, min=1 max=32", "red");document.getElementById("submit_button").disabled=true;}else if(document.getElementById("mqtt_tx_topic").value.length < 1 || document.getElementById("mqtt_tx_topic").value.length > 32){showNotification("MQTT TX Topic length, min=1 max=64", "red");document.getElementById("submit_button").disabled=true;}else if(document.getElementById("mqtt_rx_topic").value.length < 1 || document.getElementById("mqtt_rx_topic").value.length > 32){showNotification("MQTT RX Topic length, min=1 max=64", "red");document.getElementById("submit_button").disabled=true;}else if(document.getElementById("mqtt_status_topic").value.length < 1 || document.getElementById("mqtt_status_topic").value.length > 32){showNotification("MQTT Status Topic length, min=1 max=64", "red");document.getElementById("submit_button").disabled=true;}else if(document.getElementById("tcp_port_value").value > 65535 || document.getElementById("tcp_port_value").value < 1){showNotification("Port value, min=1 max=65535", "red");document.getElementById("submit_button").disabled=true;}else if(document.getElementById("batt_alert_port").value > 65535 || document.getElementById("batt_alert_port").value < 1){showNotification("Port value, min=1 max=65535", "red");document.getElementById("submit_button").disabled=true;}else if(document.getElementById("ble_pass_value").value.length != 6 || document.getElementById("ble_pass_value").value.charAt(0)=="0"){showNotification("Passkey length, min=6 max=6, 1st number not 0", "red");document.getElementById("submit_button").disabled=true;}else if(document.getElementById("sleep_volt").value < 12 || document.getElementById("sleep_volt").value > 15){showNotification("Sleep Voltage Value, min=12.0 max=15.0", "red");document.getElementById("submit_button").disabled=true;}else{document.getElementById("submit_button").disabled=false;}if(document.getElementById("protocol").value=="savvycan"){document.getElementById("tcp_port_value").value = "23";document.getElementById("tcp_port_value").disabled=true;document.getElementById("port_type").selectedIndex="0";document.getElementById("port_type").disabled=true;}else{document.getElementById("tcp_port_value").disabled=false;document.getElementById("port_type").selectedIndex="0";document.getElementById("port_type").disabled=false;}if(document.getElementById("sleep_status").value=="enable"){if(document.getElementById("ble_status").selectedIndex != "0") {document.getElementById("batt_alert").disabled=false;}}else if(document.getElementById("sleep_status").value=="disable"){document.getElementById("batt_alert").disabled=true;document.getElementById("batt_alert").selectedIndex="1";}if(document.getElementById("batt_alert").value=="enable"){document.getElementById("batt_alert_div").style.display = "block";}else if(document.getElementById("batt_alert").value=="disable"){document.getElementById("batt_alert_div").style.display = "none";}if(document.getElementById("mqtt_en").value=="enable"){document.getElementById("mqtt_en_div").style.display = "block";}else if(document.getElementById("mqtt_en").value=="disable"){document.getElementById("mqtt_en_div").style.display = "none";}if(document.getElementById("protocol").value=="elm327"){document.getElementById("mqtt_elm327_log").disabled=false;}else{document.getElementById("mqtt_elm327_log").disabled=true;document.getElementById("mqtt_elm327_log").value = "disable";}}
-document.getElementById("defaultOpen").click();function checkStatus(){const xhttp=new XMLHttpRequest();xhttp.onload=function(){var obj=JSON.parse(this.responseText);if(obj.wifi_mode=="APStation"){document.getElementById("wifi_mode_current").innerHTML = "AP+Station";}else if(obj.wifi_mode=="AP"){document.getElementById("wifi_mode_current").innerHTML = "AP";}
-document.getElementById("sta_status").innerHTML=obj.sta_status;document.getElementById("ap_channel_status").innerHTML=obj.ap_ch;document.getElementById("sta_ip").innerHTML=obj.sta_ip;document.getElementById("mdns").innerHTML=obj.mdns;document.getElementById("can_bitrate_status").innerHTML=obj.can_datarate;if(obj.can_mode=="normal"){document.getElementById("can_mode_status").innerHTML = "Normal";}else if(obj.can_mode=="silent"){document.getElementById("can_mode_status").innerHTML = "Silent";}if(obj.port_type=="tcp"){document.getElementById("port_type_status").innerHTML = "TCP";}else if(obj.port_type=="udp"){document.getElementById("port_type_status").innerHTML = "UDP";}
-document.getElementById("port_status").innerHTML=obj.port;document.getElementById("fw_version").innerHTML=obj.fw_version;document.getElementById("hw_version").innerHTML=obj.hw_version;document.getElementById("git_version").innerHTML=obj.git_version;document.getElementById("protocol").value=obj.protocol;document.getElementById("batt_voltage").innerHTML=obj.batt_voltage;if(document.getElementById("batt_alert").value=="enable"){document.getElementById("batt_alert_div").style.display = "block";}else if(document.getElementById("batt_alert").value=="disable"){document.getElementById("batt_alert_div").style.display = "none";}if(document.getElementById("mqtt_en").value=="enable"){document.getElementById("mqtt_en_div").style.display = "block";}else if(document.getElementById("mqtt_en").value=="disable"){document.getElementById("mqtt_en_div").style.display = "none";}};xhttp.open("GET", "/check_status");xhttp.send();}
-function loadCANFLT(){const xhttp=new XMLHttpRequest();xhttp.onload=function(){if(this.responseText === "NONE"){return;}
-var obj=JSON.parse(this.responseText);if(this.responseText!="NONE"){if(Array.isArray(obj.can_flt)) {obj.can_flt.forEach((item) => {restoreCANFLTRow(item["CANID"], item["Name"], item["PID"], item["PIDIndex"], item["StartBit"], item["BitLength"], item["Expression"], item["Cycle"]);});}}};xhttp.open("GET", "/load_canflt");xhttp.send();}
-function loadautoPIDCarData(){const xhttp=new XMLHttpRequest();xhttp.onload=function(){console.log("Car models:", this.responseText);if(this.responseText!="NONE"){var obj=JSON.parse(this.responseText);const carModels = [];if(obj && Array.isArray(obj.cars)){obj.cars.forEach(car => {if(car.car_model){carModels.push(car.car_model);}if(car.pids){document.getElementById("specific_init").value=car.init;car.pids.forEach(pid => {if(pid.parameters){pid.parameters.forEach(param => {addCarParameter({name: param.name,
-expression: param.expression,
-unit: param.unit,
-class: param.class, 
-period: param.period,
-type: param.type,
-min: param.min,
-max: param.max,
-send_to: param.send_to,
-pid: pid.pid,
-pid_init: pid.pid_init});});}});}});}
-var modifiedObj = {"supported": carModels};loadCarModels(modifiedObj);}else{toggleCarModel();toggleDestinationAndCycle();
-toggleSendToFields();toggleStandardPIDOptions();}};xhttp.open("GET", "/load_auto_pid_car_data");xhttp.send();}
-function loadautoPID(){console.log("Loading auto PID data...");const xhttp=new XMLHttpRequest();xhttp.onload=function(){console.log("Server response:", this.responseText);if(this.responseText !== "NONE"){loadAutoTable(this.responseText);document.getElementById("custom_pid_store").disabled=true;}else{console.log("No PID data found on server");}};xhttp.onerror=function(error) {console.error("Error loading auto PID:", error);};
-xhttp.open("GET", "/load_auto_pid");xhttp.send();}
-function postCANFLT(){var obj = {};obj["can_flt"] = canData;var canfltJSON=JSON.stringify(obj);const xhttp=new XMLHttpRequest();xhttp.onload=function(){showNotification(this.responseText, "green");submit_enable();};xhttp.open("POST", "/store_canflt");xhttp.send(canfltJSON);}
-async function postConfig(){var obj = {};await new Promise(resolve => setTimeout(resolve,1000));const storeResult=await storeAutoTableData();if(!storeResult){return;}
-obj["wifi_mode"] = document.getElementById("wifi_mode").value;obj["ap_ch"] = document.getElementById("ap_ch_value").value;obj["sta_ssid"] = document.getElementById("ssid_value").value;obj["sta_pass"] = document.getElementById("pass_value").value;obj["sta_security"] = document.getElementById("sta_security").value;obj["can_datarate"] = document.getElementById("can_datarate").value;obj["can_mode"] = document.getElementById("can_mode").value;obj["port_type"] = document.getElementById("port_type").value;obj["port"] = document.getElementById("tcp_port_value").value;obj["ap_pass"] = document.getElementById("ap_pass_value").value;obj["protocol"] = document.getElementById("protocol").value;obj["ble_pass"] = document.getElementById("ble_pass_value").value;obj["ble_status"] = document.getElementById("ble_status").value;obj["sleep_status"] = document.getElementById("sleep_status").value;obj["sleep_volt"] = document.getElementById("sleep_volt").value;obj["sleep_time"] = document.getElementById("sleep_time").value;obj["batt_alert"] = document.getElementById("batt_alert").value;obj["batt_alert_ssid"] = document.getElementById("batt_alert_ssid").value;obj["batt_alert_pass"] = document.getElementById("batt_alert_pass").value;obj["batt_alert_volt"] = document.getElementById("batt_alert_volt").value;obj["batt_alert_protocol"] = document.getElementById("batt_alert_protocol").value;let mqtt_txt = "mqtt://";let mqtt_url_val=mqtt_txt.concat(document.getElementById("batt_alert_url").value);obj["batt_alert_url"] = mqtt_url_val;obj["batt_alert_port"] = document.getElementById("batt_alert_port").value;obj["batt_alert_topic"] = document.getElementById("batt_alert_topic").value;obj["batt_alert_time"] = document.getElementById("batt_alert_time").value;obj["batt_mqtt_user"] = document.getElementById("batt_mqtt_user").value;obj["batt_mqtt_pass"] = document.getElementById("batt_mqtt_pass").value;obj["mqtt_en"] = document.getElementById("mqtt_en").value;let mqtt_txt2 = "mqtt://";let mqtt_url_val2=mqtt_txt.concat(document.getElementById("mqtt_url").value);obj["mqtt_url"] = mqtt_url_val2;obj["mqtt_port"] = document.getElementById("mqtt_port").value;obj["mqtt_user"] = document.getElementById("mqtt_user").value;obj["mqtt_pass"] = document.getElementById("mqtt_pass").value;obj["mqtt_tx_topic"] = document.getElementById("mqtt_tx_topic").value;if(document.getElementById("mqtt_tx_en_checkbox").checked){obj["mqtt_tx_en"] = "enable";}else{obj["mqtt_tx_en"] = "disable";}
-obj["mqtt_rx_topic"] = document.getElementById("mqtt_rx_topic").value;if(document.getElementById("mqtt_rx_en_checkbox").checked){obj["mqtt_rx_en"] = "enable";}else{obj["mqtt_rx_en"] = "disable";}
-obj["mqtt_status_topic"] = document.getElementById("mqtt_status_topic").value;obj["mqtt_elm327_log"] = document.getElementById("mqtt_elm327_log").value;var configJSON=JSON.stringify(obj);const xhttp=new XMLHttpRequest();xhttp.onload=function(){showNotification(this.responseText, "green");document.getElementById("submit_button").disabled=true;};
-xhttp.onerror=function(){showNotification("Failed to save configuration", "red");};
-xhttp.open("POST", "/store_config");xhttp.send(configJSON);}
-function otaClick(){if(document.getElementById("ota_file").files.length==0){showNotification("No files selected!", "red");alert("No files selected!");}else{document.getElementById("ota_submit_button").disabled=true;showNotification("Updating please wait...", "green");setTimeout(function(){document.getElementById("ota_form").submit();}, 5000);}}
-function reboot(){const xhttp=new XMLHttpRequest();document.getElementById("reboot_button").disabled=true;showNotification("Rebooting please reconnect...", "yellow");xhttp.open("POST", "/system_reboot");xhttp.send("reboot");}
-function send_system_command(command){const xhttp=new XMLHttpRequest();const data = {"command": command};xhttp.open("POST", "/system_commands");xhttp.send(JSON.stringify(data));}
-async function downloadCfg(){const endpoints = [
-'/load_config',
-'/load_auto_pid_car_data',
-'/load_auto_pid',
-'/load_canflt'
-];const delay=500;let combinedData = {};let hasErrors=false;try{for(let i=0;i < endpoints.length;i++){const endpoint=endpoints[i];try{const response=await fetch(endpoint);if(!response.ok){throw new Error(`HTTP error! status: ${response.status}`);}
-const data=await response.json();const key=endpoint.replace('/load_', '');combinedData[key] = data;} catch(fetchError){hasErrors=true;}if(i < endpoints.length - 1){await new Promise(resolve => setTimeout(resolve,delay));}}if(Object.keys(combinedData).length === 0){throw new Error('No data was successfully fetched from any endpoint');}
-const dataStr=JSON.stringify(combinedData,null,2);const blob=new Blob([dataStr], {type: 'application/json'});const url=window.URL.createObjectURL(blob);const link=document.createElement('a');link.href=url;link.download = `config_${new Date().toISOString().split('T')[0]}.json`;document.body.appendChild(link);
-link.click();document.body.removeChild(link);
-window.URL.revokeObjectURL(url);return true;} catch(error){alert('Failed to download configuration');return false;}}
-async function uploadCfg(){const fileInput=document.getElementById('fileInput');const file=fileInput.files[0];if(!file) return;const endpointMap = {'config': '/store_config',
-'auto_pid': '/store_auto_data',
-'auto_pid_car_data': '/store_car_data',
-'canflt': '/store_canflt'};const delay=200;try{const reader=new FileReader();reader.onload=async function(e){try{const jsonData=JSON.parse(e.target.result);let hasErrors=false;for(const [key, endpoint] of Object.entries(endpointMap)){if(jsonData[key]) {try{const response=await fetch(endpoint, {method: 'POST',
-headers: {'Content-Type': 'application/json',},
-body: JSON.stringify(jsonData[key])});if(!response.ok){hasErrors=true;throw new Error(`HTTP error! status: ${response.status}`);}
-await new Promise(resolve => setTimeout(resolve,delay));} catch(fetchError){hasErrors=true;}}}if(hasErrors){alert('Some configurations failed to upload');}else{alert('Configuration uploaded successfully, Rebooting...');}
-fileInput.value = '';} catch(parseError){alert('Failed to parse configuration file');}};reader.onerror=function(){alert('Error reading file');};
-reader.readAsText(file);} catch(error){alert('Upload failed');}}
-function Load(){const xhttp=new XMLHttpRequest();xhttp.onload=function(){var obj=JSON.parse(this.responseText);if(obj.wifi_mode=="APStation"){document.getElementById("wifi_mode").selectedIndex="1";document.getElementById("ssid_value").disabled=false;document.getElementById("pass_value").disabled=false;document.getElementById("sta_security").disabled=false;}else if(obj.wifi_mode=="AP"){document.getElementById("wifi_mode").selectedIndex="0";document.getElementById("ssid_value").disabled=true;document.getElementById("pass_value").disabled=true;}
-var ch=parseInt(obj.ap_ch);ch=ch - 1;document.getElementById("ap_ch_value").selectedIndex=ch.toString();document.getElementById("ssid_value").value=obj.sta_ssid;document.getElementById("pass_value").value=obj.sta_pass;document.getElementById("sta_security").value=obj.sta_security || "wpa3";if(obj.can_datarate=="5K"){document.getElementById("can_datarate").selectedIndex="0";}else if(obj.can_datarate=="10K"){document.getElementById("can_datarate").selectedIndex="1";}else if(obj.can_datarate=="20K"){document.getElementById("can_datarate").selectedIndex="2";}else if(obj.can_datarate=="25K"){document.getElementById("can_datarate").selectedIndex="3";}else if(obj.can_datarate=="50K"){document.getElementById("can_datarate").selectedIndex="4";}else if(obj.can_datarate=="100K"){document.getElementById("can_datarate").selectedIndex="5";}else if(obj.can_datarate=="125K"){document.getElementById("can_datarate").selectedIndex="6";}else if(obj.can_datarate=="250K"){document.getElementById("can_datarate").selectedIndex="7";}else if(obj.can_datarate=="500K"){document.getElementById("can_datarate").selectedIndex="8";}else if(obj.can_datarate=="800K"){document.getElementById("can_datarate").selectedIndex="9";}else if(obj.can_datarate=="1000K"){document.getElementById("can_datarate").selectedIndex = "10";}else if(obj.can_datarate=="auto"){document.getElementById("can_datarate").selectedIndex = "11";}if(obj.can_mode=="normal"){document.getElementById("can_mode").selectedIndex="0";}else if(obj.can_mode=="silent"){document.getElementById("can_mode").selectedIndex="1";}if(obj.port_type=="tcp"){document.getElementById("port_type").selectedIndex="0";}else if(obj.port_type=="udp"){document.getElementById("port_type").selectedIndex="1";}if(obj.ble_status=="enable"){document.getElementById("ble_status").selectedIndex="0";}else if(obj.ble_status=="disable"){document.getElementById("ble_status").selectedIndex="1";}if(obj.sleep_status=="enable"){document.getElementById("sleep_status").selectedIndex="0";}else if(obj.sleep_status=="disable"){document.getElementById("sleep_status").selectedIndex="1";}if("mqtt_tx_en" in obj){if(obj.mqtt_tx_en === "enable") {document.getElementById("mqtt_tx_en_checkbox").checked=true;}else{document.getElementById("mqtt_tx_en_checkbox").checked=false;}}else{document.getElementById("mqtt_tx_en_checkbox").checked=false;document.getElementById("mqtt_tx_topic").disabled=true;}if("mqtt_rx_en" in obj){if(obj.mqtt_rx_en === "enable") {document.getElementById("mqtt_rx_en_checkbox").checked=true;}else{document.getElementById("mqtt_rx_en_checkbox").checked=false;}}else{document.getElementById("mqtt_rx_en_checkbox").checked=false;document.getElementById("mqtt_rx_topic").disabled=true;}
-txCheckBoxChanged();rxCheckBoxChanged();
-document.getElementById("protocol").value=obj.protocol;document.getElementById("tcp_port_value").value=obj.port;document.getElementById("ap_pass_value").value=obj.ap_pass;document.getElementById("ble_pass_value").value=obj.ble_pass;document.getElementById("sleep_volt").value=obj.sleep_volt;document.getElementById("sleep_volt_value").textContent=obj.sleep_volt;document.getElementById("sleep_time").value=obj.sleep_time;document.getElementById('sleep_time_value').textContent=obj.sleep_time;document.getElementById("batt_alert").value=obj.batt_alert;document.getElementById("batt_alert_ssid").value=obj.batt_alert_ssid;document.getElementById("batt_alert_pass").value=obj.batt_alert_pass;document.getElementById("batt_alert_volt").value=obj.batt_alert_volt;document.getElementById("batt_alert_protocol").value=obj.batt_alert_protocol;document.getElementById("batt_alert_url").value=obj.batt_alert_url.slice(7);document.getElementById("batt_alert_port").value=obj.batt_alert_port;document.getElementById("batt_alert_topic").value=obj.batt_alert_topic;document.getElementById("batt_mqtt_user").value=obj.batt_mqtt_user;document.getElementById("batt_mqtt_pass").value=obj.batt_mqtt_pass;document.getElementById("mqtt_en").value=obj.mqtt_en;document.getElementById("mqtt_url").value=obj.mqtt_url.slice(7);document.getElementById("mqtt_port").value=obj.mqtt_port;document.getElementById("mqtt_user").value=obj.mqtt_user;document.getElementById("mqtt_pass").value=obj.mqtt_pass;document.getElementById("mqtt_tx_topic").value=obj.mqtt_tx_topic;document.getElementById("mqtt_rx_topic").value=obj.mqtt_rx_topic;document.getElementById("mqtt_status_topic").value=obj.mqtt_status_topic;document.getElementById("mqtt_elm327_log").value=obj.mqtt_elm327_log;if(obj.batt_alert_time=="1"){document.getElementById("batt_alert_time").selectedIndex="0";}else if(obj.batt_alert_time=="6"){document.getElementById("batt_alert_time").selectedIndex="1";}else if(obj.batt_alert_time=="12"){document.getElementById("batt_alert_time").selectedIndex="2";}else if(obj.batt_alert_time=="24"){document.getElementById("batt_alert_time").selectedIndex="3";}if(document.getElementById("protocol").value=="savvycan"){document.getElementById("tcp_port_value").value = "23";document.getElementById("tcp_port_value").disabled=true;document.getElementById("port_type").selectedIndex="0";document.getElementById("port_type").disabled=true;}if(document.getElementById("batt_alert").value=="enable"){document.getElementById("batt_alert_div").style.display = "block";}else if(document.getElementById("batt_alert").value=="disable"){document.getElementById("batt_alert_div").style.display = "none";}if(document.getElementById("mqtt_en").value=="enable"){document.getElementById("mqtt_en_div").style.display = "block";}else if(document.getElementById("mqtt_en").value=="disable"){document.getElementById("mqtt_en_div").style.display = "none";}
-loadCANFLT();loadautoPIDCarData();
-loadautoPID();document.getElementById("car_model").addEventListener('change', function(){document.querySelector('.specific-pid-entries').innerHTML = '';const selectedModel=this.value;if(latest_car_models && Array.isArray(latest_car_models.cars)){const selectedCar=latest_car_models.cars.find(car => car.car_model === selectedModel);const specificInitElement=document.getElementById("specific_init");specificInitElement.value=selectedCar.init;if(selectedCar && selectedCar.pids){selectedCar.pids.forEach(pid => {if(pid.parameters){pid.parameters.forEach(param => {addCarParameter({...param,
-pid: pid.pid,
-pid_init: pid.pid_init});});}});}}});document.getElementById("store_canflt_button").disabled=true;document.querySelector(".store").disabled=true;document.getElementById("submit_button").disabled=true;};
-checkStatus();xhttp.open("GET", "/load_config");xhttp.send();}
-function monitor_add_line(id,type,len,data,time){var table=document.getElementById("table2");var nraw = -1;if(typeof monitor_add_line.msg_time == "undefined"){monitor_add_line.msg_time = [0];}
-for(var r=1, n=table.rows.length;r < n;r++){if(table.rows[r].cells[0].innerHTML==id) {nraw=r;break;}}if(nraw!=-1){table.rows[nraw].cells[0].innerHTML=id;table.rows[nraw].cells[1].innerHTML=type;table.rows[nraw].cells[2].innerHTML=len;table.rows[nraw].cells[3].innerHTML=data;table.rows[nraw].cells[4].innerHTML=Date.now() - monitor_add_line.msg_time[nraw];table.rows[nraw].cells[5].innerHTML = ++table.rows[nraw].cells[5].innerHTML;monitor_add_line.msg_time[nraw] = Date.now();}else{var row=table.insertRow(1);var cell1=row.insertCell(0);var cell2=row.insertCell(1);var cell3=row.insertCell(2);var cell4=row.insertCell(3);var cell5=row.insertCell(4);var cell6=row.insertCell(5);cell1.innerHTML=id;cell2.innerHTML=type;cell3.innerHTML=len;cell4.innerHTML=data;cell5.innerHTML=0;cell6.innerHTML=1;cell1.style.width = "10%"
-monitor_add_line.msg_time.push(Date.now());}}
-var ws=null;var cr=String.fromCharCode(13);function mon_control(){var dr=document.getElementById("mon_datarate").selectedIndex;var url=window.location.href;var url2 = "http://192.168.31.72/";console.log(dr);
-alert("Please reboot device after Monitor, otherwise the device may not function as expected");ws_url = "ws://" + url.substr(7, url.length) + "ws";console.log(ws_url);if(document.getElementById("mon_button").value=="Start"){ws=new WebSocket(ws_url);setTimeout(bindEvents,1000);ws.addEventListener("open", (event) => {var cmd="C" + cr + "S" + dr + cr + "O" + cr;console.log("onopen called");ws.send(cmd);
-window.mon_button_en(0);});
-ws.addEventListener("close", (event) => {window.mon_button_en(1);console.log("onclose called");});}else{ws_close();}}
-function bindEvents(){ws.onmessage=function(evt) {var received_msg=evt.data;if(received_msg[0]=="t"){var len = (received_msg[4] - "0") * 2;var data_str = "";var i;for(i=0;i < len;i+=2){data_str+=received_msg.substr(i + 5,2) + " ";}
-monitor_add_line(received_msg.substr(1,3) + "h", "Std", received_msg[4], data_str, 0);}else if(received_msg[0]=="T"){var len = (received_msg[9] - "0") * 2;var data_str = "";var i;for(i=0;i < len;i+=2){data_str+=received_msg.substr(i + 10,2) + " ";}
-monitor_add_line(received_msg.substr(1,8) + "h", "Ext", received_msg[9], data_str, 0);}else if(received_msg[0]=="r"){var len = (received_msg[4] - "0") * 2;monitor_add_line(received_msg.substr(1,3) + "h", "RTR-Std", received_msg[4], 0, 0);}else if(received_msg[0]=="R"){var len = (received_msg[9] - "0") * 2;monitor_add_line(received_msg.substr(1,8) + "h", "RTR-Ext", received_msg[9], 0, 0);}};}
-function ws_close(){ws.send("C" + cr);ws.close();}
-function mon_button_en(b){if(b==1){document.getElementById("mon_button").value = "Start";document.getElementById("mon_datarate").disabled=false;document.getElementById("mon_filter").disabled=false;document.getElementById("mon_mask").disabled=false;}else{document.getElementById("mon_button").value = "Stop";document.getElementById("mon_datarate").disabled=true;document.getElementById("mon_filter").disabled=true;document.getElementById("mon_mask").disabled=true;}}
-function isNameUnique(name){return canData.every((item) => item["Name"] !== name);}
-function addCANFLTRow(){var canId=parseInt(document.getElementById("canId").value);var startBit=parseInt(document.getElementById("startBit").value);var bitLength=parseInt(document.getElementById("bitLength").value);Length=parseInt(document.getElementById("bitLength").value);var cycle=parseInt(document.getElementById("cycle").value);var name=document.getElementById("name").value;var expression=document.getElementById("expression").value;var pid=parseInt(document.getElementById("pid").value);var pidi=parseInt(document.getElementById("pindex").value);if(isNaN(canId) || canId == "" || canId < 0 || canId > 536870912){alert("CAN ID must be a valid number between 0 and 536870912");return;}if(isNaN(startBit) || isNaN(bitLength) || startBit > 64 - bitLength || bitLength <= 0 || bitLength > 64 || startBit < 0 || startBit > 63){alert("startBit or bitLength error");return;}if(isNaN(cycle) || cycle < 100 || cycle > 10000){alert("cycle must be between 100 and 10000");return;}if(name.length < 1 || name.length > 16){alert("Name must be between 1 and 16 characters in length.");return;}if(expression.length < 1 || expression.length > 32){alert("Expression must be between 1 and 32 characters in length.");return;}if(isNaN(pid) || pid < -1 || pid > 255){alert("PID must be a number between -1 and 255");return;}if(isNaN(pidi) || pidi < 0 || pidi > 7){alert("PID must be a number between 0 and 7");return;}if(isNameUnique(name)){var table=document.getElementById("can_flt_table");var row=table.insertRow(-1);var cell1=row.insertCell(0);var cell2=row.insertCell(1);var cell3=row.insertCell(2);var cell4=row.insertCell(3);var cell5=row.insertCell(4);var cell6=row.insertCell(5);var cell7=row.insertCell(6);var cell8=row.insertCell(7);var cell9=row.insertCell(8);if(table.rows.length - 1 >= 100){alert("Maximum row limit (100) reached.");return;}
-cell1.innerHTML=canId;cell2.innerHTML=name;cell3.innerHTML=pid;cell4.innerHTML=pidi;cell5.innerHTML=startBit;cell6.innerHTML=bitLength;cell7.innerHTML=expression;cell8.innerHTML=cycle;cell9.innerHTML = '<button style="width: 70px;" onclick="deleteCANFLTRow(this) ">Delete</button>';canData.push({CANID: canId,
-Name: name,
-PID: pid,
-PIDIndex: pidi,
-StartBit: startBit,
-BitLength: bitLength,
-Expression: expression,
-Cycle: cycle});document.getElementById("canId").value = "";document.getElementById("name").value = "";document.getElementById("pid").value = "";document.getElementById("pindex").value = "";document.getElementById("startBit").value = "";document.getElementById("bitLength").value = "";document.getElementById("expression").value = "";document.getElementById("cycle").value = "";}else{alert("Name must be unique.");}
-document.getElementById("store_canflt_button").disabled=false;}
-function deleteCANFLTRow(button){var row=button.parentNode.parentNode;var canIdToDelete=row.cells[0].textContent;var indexToDelete=canData.findIndex((item) => item["CANID"] === parseInt(canIdToDelete));if(indexToDelete !== -1){canData.splice(indexToDelete,1);}
-row.parentNode.removeChild(row);document.getElementById("store_canflt_button").disabled=false;}
-function alert_elm327(){alert("If elm327 log is enabled then only CAN frames proccessed by elm327 will be sent to MQTT broker.");}
-function storeCANFLT(){postCANFLT();document.getElementById("store_canflt_button").disabled=true;}
-</script></body></html>
\ No newline at end of file
+<!doctypehtml><html lang=en><meta charset=UTF-8><meta content=width=1024 name=viewport><title>WiCAN</title><style>:root{--primary-color:#24478f;--primary-light:#c2d1f0;--primary-dark:#1a3266;--background-color:#f0f2f5;--white:#fff;--gray-100:#f7f7f7;--gray-200:#e9ecef;--gray-300:#dee2e6;--gray-400:#ced4da;--gray-500:#adb5bd;--gray-600:#6c757d;--gray-700:#495057;--shadow-sm:0 1px 3px #0000001f;--shadow-md:0 4px 6px #0000001a;--transition:all .3s ease}body{background-color:var(--background-color);color:var(--gray-700);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;display:flex;overflow-x:hidden}.sidebar{background-color:var(--white);border-right:1px solid var(--gray-200);box-shadow:var(--shadow-sm);width:240px;height:100vh;padding-top:1rem;position:fixed;overflow-y:auto}.sidebar button{cursor:pointer;text-align:left;transition:var(--transition);color:var(--gray-600);background-color:#0000;border:none;outline:none;align-items:center;gap:.75rem;width:100%;padding:1rem 1.5rem;font-size:.95rem;display:flex}.sidebar button:hover{background-color:var(--gray-100);color:var(--primary-color)}.sidebar button.active{background-color:var(--primary-color);color:var(--white);font-weight:500}.logo{width:80%;max-width:100%;height:auto;max-height:100%;margin:2.5rem auto 0;padding:0;display:block}.content{width:calc(100% - 240px);max-width:1200px;margin-left:240px;padding:2rem}.tabcontent{background-color:var(--white);box-shadow:var(--shadow-md);border-radius:8px;margin-bottom:1.5rem;padding:1.5rem;display:none}.form-table{border-collapse:separate;border-spacing:0 .5rem;width:100%;font-weight:600}.form-table td{vertical-align:middle;padding:.75rem}.form-table td:first-child{color:var(--gray-700);width:40%;font-weight:500}.slider-container{align-items:center;gap:10px;display:flex}input[type=range]{width:100%}input,input[type=number],select{border:1px solid var(--gray-300);transition:var(--transition);background-color:var(--white);border-radius:6px;width:100%;padding:.65rem;font-size:.95rem}input:focus,input[type=number]:focus,select:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 3px #24478f1a}input:disabled,input[type=number]:disabled,select:disabled{background-color:var(--gray-100);cursor:not-allowed}button,input[type=button],.store{background-color:var(--primary-color);color:var(--white);cursor:pointer;transition:var(--transition);border:none;border-radius:6px;width:auto;padding:.65rem 1.25rem;font-weight:500}button:hover,input[type=button]:hover,.store:hover{background-color:var(--primary-dark)}button:disabled,input[type=button]:disabled,.store:disabled{background-color:var(--gray-400);cursor:not-allowed}.section-title{color:var(--primary-color);border-bottom:2px solid var(--primary-light);margin:0 0 1rem;padding-bottom:.5rem;font-size:1.5rem;font-weight:600}.divider{border-bottom:1px solid var(--gray-200);margin:1.5rem 0}#table2{border-collapse:separate;border-spacing:0;width:100%;margin:1rem 0}#table2 th,#table2 td{border:1px solid var(--gray-300);padding:.75rem}#table2 th{background-color:var(--gray-100);text-align:left;font-weight:600}#table2 tr:nth-child(2n){background-color:var(--gray-50)}.status-indicator{border-radius:1rem;align-items:center;padding:.25rem .75rem;font-size:.875rem;font-weight:500;display:inline-flex}.status-connected{color:#065f46;background-color:#d1fae5}.status-disconnected{color:#991b1b;background-color:#fee2e2}input[type=file]{border:1px dashed var(--gray-400);background-color:var(--gray-50);cursor:pointer;border-radius:6px;padding:.5rem}input[type=file]:hover{border-color:var(--primary-color)}input[type=checkbox]{cursor:pointer;width:1.25rem;height:1.25rem;margin-right:.5rem}.notification-container{z-index:1000;padding:1rem;font-weight:500;transition:all .3s;display:none;position:fixed;top:0;left:240px;right:0}.notification-container.show{display:block}.form-input::placeholder{color:#888;font-size:14px}.custom-init-group{margin-bottom:1.5rem}.custom-init-group label{color:var(--gray-700);margin-bottom:.5rem;display:block}.pid-entry{background:var(--white);color:var(--gray-600);border:none;border-radius:8px;margin-bottom:.2rem;padding:0;font-size:.95rem;font-weight:500}.pid-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.pid-title{color:var(--gray-700)}.pid-content{flex-direction:column;gap:1.5rem;display:flex}.pid-field{flex-direction:column;gap:.5rem;display:flex}.pid-field label{color:var(--gray-700)}.pid-field input,.pid-field select{border:1px solid var(--gray-300);border-radius:6px;width:50%;padding:.75rem}.button-group{gap:1rem;margin-top:1rem;display:flex}@media (width<=768px){.notification-container{left:0}}@media (width<=1024px){.sidebar{width:200px}.content{width:calc(100% - 200px);margin-left:200px}}@media (width<=768px){.sidebar{width:100%;height:auto;position:relative}.content{width:100%;margin-left:0;padding:1rem}.form-table td{width:100%;display:block}.form-table td:first-child{padding-bottom:.25rem}.compact-form-table{border-collapse:collapse;width:100%}.compact-form-table td{vertical-align:middle;padding:3px;font-size:.85rem}.compact-form-table input,.compact-form-table select{border:1px solid var(--gray-300);border-radius:4px;width:95%;height:24px;padding:2px 5px;font-size:.85rem}}</style><body onload=Load();><div class=sidebar><embed class=logo src=/logo.svg><button onclick="openTab(event, 'status_view')"class=tablinks id=defaultOpen><b>Status</b></button><button onclick="openTab(event, 'wifi_settings')"class=tablinks><b>Settings</b></button><button onclick="openTab(event, 'automate')"class=tablinks><b>Automate</b></button><button onclick="openTab(event, 'monitor')"class=tablinks><b>Monitor</b></button><button onclick="openTab(event, 'power_saving_tab')"class=tablinks><b>Power Saving</b></button><button onclick="openTab(event, 'system_tab')"class=tablinks><b>System</b></button><button onclick="openTab(event, 'about_tab')"class=tablinks><b>About</b></button></div><div class=content><div class=notification-container id=notification></div><div class=tabcontent id=status_view><div class=section-title>Status</div><table class=form-table><tr><td>WiFi Mode:<td><div id=wifi_mode_current>AP </div><tr><td>AP Channel:<td><div id=ap_channel_status>6 </div><tr><td>WiFi Station:<td><div id=sta_status>Not Connected </div><tr><td>Station IP:<td><div id=sta_ip>192.168.3.1 </div><tr><td>mDNS:<td><div id=mdns> </div><tr><td>CAN Bitrate:<td><div id=can_bitrate_status>500K </div><tr><td>CAN Mode:<td><div id=can_mode_status>Silent </div><tr><td>Port Type:<td><div id=port_type_status>TCP </div><tr><td>TCP/UDP Port:<td><div id=port_status>3333 </div><tr><td>Battery Voltage:<td><div id=batt_voltage>12.8V </div><tr><td><input value="Check status"id=check_status_button name=check_status_button onclick=checkStatus() type=button><td> </table></div><div class=tabcontent id=wifi_settings><form action=/action_page id=configForm name=configForm onchange=submit_enable();><div class=section-title>AP Config</div><table class=form-table><tr><td>Mode:<td><select id=wifi_mode name=wifi_mode><option value=AP>AP<option value=APStation>AP+Station</select><tr><td>AP Channel:<td><select id=ap_ch_value name=ap_ch_value><option value=1>1<option value=2>2<option value=3>3<option value=4>4<option value=5>5<option value=6>6<option value=7>7<option value=8>8<option value=9>9<option value=10>10<option value=11>11<option value=12>12<option value=13>13<option value=14>14</select><tr><td>AP Password:<td><input id=ap_pass_value name=ap_pass_value value=Testpass></table><div class=divider></div><div class=section-title>Station Config</div><table class=form-table><tr><td>SSID:<td><input disabled id=ssid_value name=ssid_value value=MeatPi><tr><td>Password:<td><input disabled id=pass_value name=pass_value value=TomatoSauce><tr><td>Security:<td><select disabled id=sta_security name=sta_security><option value=wpa3>WPA3<option value=wpa2>WPA2</select></table><div class=divider></div><div class=section-title>CAN</div><table class=form-table><tr><td>CAN Bitrate:<td><select id=can_datarate name=can_datarate><option value=5K>5K<option value=10K>10K<option value=20K>20K<option value=25K>25K<option value=50K>50K<option value=100K>100K<option value=125K>125K<option value=250K>250K<option value=500K>500K<option value=800K>800K<option value=1000K>1000K<option value=auto>Auto</select><tr><td>CAN Mode:<td><select id=can_mode name=can_mode><option selected value=normal>Normal<option value=silent>Silent</select><tr><td>Port Type:<td><select id=port_type name=port_type><option value=tcp>TCP<option value=udp>UDP</select><tr><td>TCP/UDP Port:<td><input id=tcp_port_value max=65535 min=1 name=tcp_port_value type=number value=3333><tr><td>Protocol:<td><select id=protocol name=protocol><option value=realdash66>realdash66<option value=slcan>slcan<option value=savvycan>savvyCAN<option value=elm327>elm327<option value=auto_pid>AutoPID</select><tr><td>MQTT:<td><select id=mqtt_en name=mqtt_en><option value=enable>Enable<option value=disable>Disable</select></table><div class=divider></div><div class=section-title>BLE</div><table class=form-table><tr><td>Passkey:<td><input id=ble_pass_value max=999999 min=0 name=ble_pass_value type=number value=000000><tr><td>BLE Status:<td><select id=ble_status name=ble_status><option value=enable>Enable<option value=disable>Disable</select></table><div id=mqtt_en_div><div class=divider></div><div class=section-title>MQTT</div><table class=form-table><tr><td><label for=mqtt_url><b>MQTT URL:</b></label><td><input id=mqtt_url name=mqtt_url value=127.0.0.1><tr><td><label for=mqtt_port><b>MQTT Port:</b></label><td><input id=mqtt_port max=65535 min=1 name=mqtt_port type=number value=1883><tr><td><label for=mqtt_user><b>MQTT User:</b></label><td><input id=mqtt_user name=mqtt_user value=meatpi><tr><td><label for=mqtt_pass><b>MQTT Pass:</b></label><td><input id=mqtt_pass name=mqtt_pass value=meatpi><tr><td><label for=mqtt_tx_topic><b>TX Topic:</b></label><td><input id=mqtt_tx_topic name=mqtt_tx_topic><td><input id=mqtt_tx_en_checkbox name=mqtt_tx_en_checkbox onchange=txCheckBoxChanged() type=checkbox><tr><td><label for=mqtt_rx_topic><b>RX Topic:</b></label><td><input id=mqtt_rx_topic name=mqtt_rx_topic><td><input id=mqtt_rx_en_checkbox name=mqtt_rx_en_checkbox onchange=rxCheckBoxChanged() type=checkbox><tr><td><label for=mqtt_status_topic><b>Status Topic:</b></label><td><input id=mqtt_status_topic name=mqtt_status_topic><tr><td><label for=mqtt_elm327_log><b>MQTT elm327 log:</b></label><td><select id=mqtt_elm327_log name=mqtt_elm327_log onchange=alert_elm327() style=width:93px><option value=enable>Enable<option value=disable>Disable</select><tr><td> <td> </table><div style=overflow-x:auto><table id=can_flt_table><tr><th>CAN ID (dec)<th>Name<th>PID<th>Index<th>Start Bit<th>Bit Length<th>Expression<th>Cycle ms<th><input id=store_canflt_button name=store_canflt_button onclick=storeCANFLT() style=width:70px type=button value=Store><tr><td><input id=canId max=536870912 min=0 style=width:100px type=number><td><input id=name maxlength=16 style=width:70px><td><input id=pid style=width:40px type=number><td><input id=pindex style=width:40px type=number><td><input id=startBit max=63 min=0 style=width:40px type=number><td><input id=bitLength max=64 min=1 style=width:40px type=number><td><input id=expression maxlength=32 style=width:100px><td><input id=cycle max=1000 min=100 style=width:50px type=number><td><input value="Add ID"id=add_row_button name=add_row_button onclick=addCANFLTRow() style=width:70px type=button></table></div></div></form></div><div class=tabcontent id=automate><div class=section-title>Automate</div><table class=form-table><tr><td>MQTT HA Discovery:<td><select onchange="checkForDuplicates(); toggleDestinationAndCycle(); toggleSendToFields(); enableAutoStoreButton();submit_enable();"id=ha_discovery name=ha_discovery><option value=disable>Disable</select><tr><td>Grouping:<td><select onchange="checkForDuplicates(); toggleDestinationAndCycle(); toggleSendToFields(); enableAutoStoreButton();submit_enable();"id=grouping name=grouping><option value=disable>Disable<option value=enable>Enable</select><tr><td>Destination Type:<td><select id=group_dest_type name=group_dest_type onchange=enableAutoStoreButton();submit_enable();><option value=Default>Default<option value=MQTT_Topic>MQTT Topic</select><tr><td>Destination:<td><input disabled id=destination name=destination oninput=enableAutoStoreButton();submit_enable();><tr><td>Cycle Time(ms):<td><input disabled id=group_cycle name=group_cycle oninput=enableAutoStoreButton();submit_enable(); value=5000></table><div class=section-title>Standard PIDs</div><table class=form-table><tr><td>Standard PIDs:<td><select id=standard_pids name=standard_pids onchange=toggleStandardPIDOptions();enableAutoStoreButton();submit_enable();><option value=disable>Disable<option value=enable>Enable</select><tr><td>ECU Protocol:<td><select id=ecu_protocol name=ecu_protocol onchange=enableAutoStoreButton();submit_enable();><option value=6>6- ISO 15765-4 (CAN 11bit/500K)<option value=7>7- ISO 15765-4 (CAN 29bit/500K)<option value=8>8- ISO 15765-4 (CAN 11bit/250K)<option value=9>9- ISO 15765-4 (CAN 29bit/250K)</select><tr><td>Available PIDs:<td style=align-items:center;gap:5px;display:flex><select disabled id=available_pids name=available_pids onchange=enableAutoStoreButton();submit_enable(); style=flex:1></select> <button disabled id=add_pid_button onclick=addSelectedPID() style=margin-left:5px>Add PID</button> <button id=scan_pids_button onclick=scanAvailablePIDs() style=margin-left:5px>Scan PIDs</button></table><div id=standard_pids_table><div class=std-pid-entries></div></div><div class=section-title>Vehicle Specific</div><table class=form-table><tr><td>Vehicle Specific:<td><select onchange="toggleCarModel(); toggleDestinationAndCycle(); enableAutoStoreButton();submit_enable();"id=car_specific name=car_specific><option value=disable>Disable<option value=enable>Enable</select><tr><td>Vehicle Model:<td style=align-items:center;gap:5px;display:flex><select id=car_model name=car_model onchange=enableAutoStoreButton();submit_enable(); style=flex:1></select> <button onclick=fetchVehicleProfiles() style=margin-left:5px>Get Latest</button><tr><td>Vehicle Profiles:<td><form enctype=multipart/form-data id=car_data_form><input id=car_data_file name=car_data_file onchange=sendCARDataFile();submit_enable(); type=file></form><tr><td>Specific Initialisation:<td><input id=specific_init name=specific_init oninput=enableAutoStoreButton()></table><div id=specific_pids_table><div class=specific-pid-entries></div></div><div class=section-title>Custom PIDs</div><table class=form-table><tr><td>Custom Initialisation:<td><input id=initialisation name=initialisation oninput=enableAutoStoreButton()></table><div id=automate_table><div class=pid-entries></div></div><div class=button-group><button class=primary-button onclick=addRowAutoTable()>New</button><button class=store disabled id=custom_pid_store onclick=storeAutoTableData()>Store</button></div></div><div class=tabcontent id=monitor><div class=section-title>Monitor Settings</div><table class=form-table><tr><td>Bitrate<td>Filter<td>Mask<tr><td><select id=mon_datarate name=mon_datarate><option value=10K>10K<option value=20K>20K<option value=50K>50K<option value=100K>100K<option value=125K>125K<option value=250K>250K<option selected value=500K>500K<option value=800K>800K<option value=1000K>1Mbit</select><td><input id=mon_filter name=mon_filter value=00000000><td><input id=mon_mask name=mon_mask value=FFFFFFFF><td><input id=mon_button name=mon_button onclick=mon_control() style=font-size:100% type=button value=Start></table><div class=divider></div><table class=form-table id=table2><thead><tr><th>ID<th>Type<th>Len<th>Data<th>Time<th>Count<tbody></table></div><div class=tabcontent id=power_saving_tab><div class=section-title>Sleep Mode</div><table class=form-table><tr><td>Sleep Mode:<td><select id=sleep_status name=sleep_status onchange=submit_enable();><option value=enable>Enable<option value=disable>Disable</select><tr><td>Sleep Voltage:<td class=slider-container><input oninput="document.getElementById('sleep_volt_value').textContent = this.value;submit_enable();"id=sleep_volt max=15.0 min=12.0 name=sleep_volt step=0.1 type=range value=13.2> <span id=sleep_volt_value>13.2</span>V<tr><td>Sleep After:<td class=slider-container><input oninput="document.getElementById('sleep_time_value').textContent = this.value;submit_enable();"id=sleep_time max=30 min=1 name=sleep_time step=1 type=range value=2> <span id=sleep_time_value>2</span>min<tr><td>Battery Alert:<td><select id=batt_alert name=batt_alert onchange=submit_enable();><option value=enable>Enable<option value=disable>Disable</select></table><div id=batt_alert_div><div class=divider></div><div class=section-title>Battery Alert</div><table class=form-table><tr><td><label for=batt_alert_ssid><b>SSID:</b></label><td><input id=batt_alert_ssid name=batt_alert_ssid value=MeatPi><tr><td><label for=batt_alert_pass><b>Password:</b></label><td><input id=batt_alert_pass name=batt_alert_pass value=TomatoSauce><tr><td><label for=batt_alert_volt><b>Alert Voltage:</b></label><td><input id=batt_alert_volt max=15.0 min=9.0 name=batt_alert_volt step=0.1 type=number value=11.0><tr><td><label for=batt_alert_protocol><b>Alert Protocol:</b></label><td><select id=batt_alert_protocol name=batt_alert_protocol style=width:93px><option value=mqtt>MQTT</select><tr><td><label for=batt_alert_url><b>Alert URL:</b></label><td><input id=batt_alert_url name=batt_alert_url value=127.0.0.1><tr><td><label for=batt_alert_port><b>Alert Port:</b></label><td><input id=batt_alert_port max=65535 min=1 name=batt_alert_port type=number value=1883><tr><td><label for=batt_mqttusername><b>Alert MQTT User:</b></label><td><input id=batt_mqtt_user name=batt_mqtt_user value=meatpi><tr><td><label for=batt_mqttpass><b>Alert MQTT Pass:</b></label><td><input id=batt_mqtt_pass name=batt_mqtt_pass value=meatpi><tr><td><label for=batt_alert_topic><b>Alert Topic:</b></label><td><input id=batt_alert_topic name=batt_alert_topic value=CAR1/voltage><tr><td><b>Alert every:</b><td><select id=batt_alert_time name=batt_alert_time style=width:93px><option value=1>1hr<option value=6>6hr<option value=12>12hr<option value=24>1day</select><tr><td> <td> </table></div></div><div class=tabcontent id=system_tab><div class=section-title>System</div><table class=form-table><tr><td>Reboot WiCAN:<td><input id=reboot_button name=reboot_button onclick=reboot() type=button value=Reboot><tr><td>Download Configuration:<td><input id=download_cfg_butt name=download_cfg_butt onclick=downloadCfg() type=button value=Download><tr><td>Upload Configuration:<td><input onclick=document.getElementById('fileInput').click() type=button value=Upload> <input accept=.json id=fileInput onchange=uploadCfg() style=display:none type=file></table><div class=section-title>Firmware Update</div><form action=/upload/ota.bin enctype=multipart/form-data id=ota_form method=post><table class=form-table><tr><td><input accept=.bin id=ota_file name=ota_file type=file><td><input id=ota_submit_button onclick=otaClick() type=button value=Update></table></form></div><div class=tabcontent id=about_tab><div class=section-title>About</div><table class=form-table><tr><td>Firmware ver:<td><div id=fw_version>1.00</div><tr><td>Hardware ver:<td><div id=hw_version>v2.10</div><tr><td>Git ver:<td><div id=git_version>v2.10</div><tr><td>Designed By:<td><div id=made_by><a href=https://www.meatpi.com/><b>meatpi.com</b></a></div></table></div><input value="Submit Changes"disabled id=submit_button name=submit_button onclick=postConfig() type=button></div><script>var addCANFLTRow=(()=>{let F=64,E=0,H=1,v=`startBit`,x=`cycle`,w=`bitLength`,D=``,G=100,y=`name`,u=`canId`,I=7,A=`pid`,B=`pindex`,z=`expression`,C=isNaN,t=parseInt;var a=t(document.getElementById(u).value);var b=t(document.getElementById(v).value);var c=t(document.getElementById(w).value);Length=t(document.getElementById(w).value);var d=t(document.getElementById(x).value);var e=document.getElementById(y).value;var f=document.getElementById(z).value;var g=t(document.getElementById(A).value);var h=t(document.getElementById(B).value);if(C(a)||a==D||a<E||a>536870912){alert(`CAN ID must be a valid number between 0 and 536870912`);return};if(C(b)||C(c)||b>F- c||c<=E||c>F||b<E||b>63){alert(`startBit or bitLength error`);return};if(C(d)||d<G||d>10000){alert(`cycle must be between 100 and 10000`);return};if(e.length<H||e.length>16){alert(`Name must be between 1 and 16 characters in length.`);return};if(f.length<H||f.length>32){alert(`Expression must be between 1 and 32 characters in length.`);return};if(C(g)||g<-H||g>255){alert(`PID must be a number between -1 and 255`);return};if(C(h)||h<E||h>I){alert(`PID must be a number between 0 and 7`);return};if(isNameUnique(e)){var i=document.getElementById(`can_flt_table`);var j=i.insertRow(-H);var k=j.insertCell(E);var l=j.insertCell(H);var m=j.insertCell(2);var n=j.insertCell(3);var o=j.insertCell(4);var p=j.insertCell(5);var q=j.insertCell(6);var r=j.insertCell(I);var s=j.insertCell(8);if(i.rows.length- H>=G){alert(`Maximum row limit (100) reached.`);return};k.innerHTML=a;l.innerHTML=e;m.innerHTML=g;n.innerHTML=h;o.innerHTML=b;p.innerHTML=c;q.innerHTML=f;r.innerHTML=d;s.innerHTML=`<button style="width: 70px;" onclick="deleteCANFLTRow(this) ">Delete</button>`;canData.push({CANID:a,Name:e,PID:g,PIDIndex:h,StartBit:b,BitLength:c,Expression:f,Cycle:d});document.getElementById(u).value=D;document.getElementById(y).value=D;document.getElementById(A).value=D;document.getElementById(B).value=D;document.getElementById(v).value=D;document.getElementById(w).value=D;document.getElementById(z).value=D;document.getElementById(x).value=D}else{alert(`Name must be unique.`)};document.getElementById(`store_canflt_button`).disabled=!1});var fetchVehicleProfiles=(async()=>{let b=Error;try{if(!navigator.onLine){throw new b(`No internet connection`)};const c=await fetch(`https://raw.githubusercontent.com/meatpiHQ/wican-fw/main/vehicle_profiles.json`);if(!c.ok){throw new b(`Network response was not ok`)};const d=await c.json();console.log(d);latest_car_models=d;const e=[];e.push(`Not Selected`);if(d&&Array.isArray(d.cars)){d.cars.forEach(a=>{if(a.car_model){e.push(a.car_model)}})};console.log(e);var a={"supported":e};loadCarModels(a);enableAutoStoreButton()}catch(a){console.error(`There was a problem with the fetch operation:`,a);showNotification(`Unable to fetch vehicle_profiles.json. `+ a.message,`red`)}});var bindEvents=(()=>{let e=``,i=`h`,a=0,j=9,g=1,h=3,d=2,f=` `,k=8,c=`0`,b=4;ws.onmessage=(l=>{var m=l.data;if(m[a]==`t`){var n=(m[b]- c)*d;var o=e;var p;for(p=a;p<n;p+=d){o+=m.substr(p+ 5,d)+ f};monitor_add_line(m.substr(g,h)+ i,`Std`,m[b],o,a)}else if(m[a]==`T`){var n=(m[j]- c)*d;var o=e;var p;for(p=a;p<n;p+=d){o+=m.substr(p+ 10,d)+ f};monitor_add_line(m.substr(g,k)+ i,`Ext`,m[j],o,a)}else if(m[a]==`r`){var n=(m[b]- c)*d;monitor_add_line(m.substr(g,h)+ i,`RTR-Std`,m[b],a,a)}else if(m[a]==`R`){var n=(m[j]- c)*d;monitor_add_line(m.substr(g,k)+ i,`RTR-Ext`,m[j],a,a)}})});var toggleDiscovery=(()=>{const a=document.getElementById(`car_specific`).value;const b=document.getElementById(`ha_discovery`);b.disabled=!0;b.value=`disable`});var monitor_add_line=((a,b,c,d,e)=>{let r=0,w=5,q=1,t=3,s=2,u=4,v=Date.now;var f=document.getElementById(`table2`);var g=-q;if(typeof monitor_add_line.msg_time==`undefined`){monitor_add_line.msg_time=[r]};for(var h=q,i=f.rows.length;h<i;h++){if(f.rows[h].cells[r].innerHTML==a){g=h;break}};if(g!=-q){f.rows[g].cells[r].innerHTML=a;f.rows[g].cells[q].innerHTML=b;f.rows[g].cells[s].innerHTML=c;f.rows[g].cells[t].innerHTML=d;f.rows[g].cells[u].innerHTML=v()- monitor_add_line.msg_time[g];f.rows[g].cells[w].innerHTML=++f.rows[g].cells[w].innerHTML;monitor_add_line.msg_time[g]=v()}else{var j=f.insertRow(q);var k=j.insertCell(r);var l=j.insertCell(q);var m=j.insertCell(s);var n=j.insertCell(t);var o=j.insertCell(u);var p=j.insertCell(w);k.innerHTML=a;l.innerHTML=b;m.innerHTML=c;n.innerHTML=d;o.innerHTML=r;p.innerHTML=q;k.style.width=`10%`;monitor_add_line.msg_time.push(v())}});var otaClick=(()=>{let a=`No files selected!`;if(document.getElementById(`ota_file`).files.length==0){showNotification(a,`red`);alert(a)}else{document.getElementById(`ota_submit_button`).disabled=!0;showNotification(`Updating please wait...`,`green`);setTimeout((()=>{document.getElementById(`ota_form`).submit()}),5000)}});var loadautoPID=(()=>{console.log(`Loading auto PID data...`);const a=new XMLHttpRequest();a.onload=function(){console.log(`Server response:`,this.responseText);if(this.responseText!==`NONE`){loadAutoTable(this.responseText);document.getElementById(`custom_pid_store`).disabled=!0}else{console.log(`No PID data found on server`)}};a.onerror=(a=>{console.error(`Error loading auto PID:`,a)});a.open(`GET`,`/load_auto_pid`);a.send()});var storeAutoTableData=(async()=>{let s=`Name must not be empty and must be less than 32 characters`,d=0,g=`.name-input`,j=`.type-select`,k=`.send-to-input`,h=`.expression-input`,i=`.period-input`,a=``,m=`application/json`,r=32,q=`red`,b=`disable`,t=64,f=`.pid-input`,p=1000,c=`Default`,u=`Send_to must be less than 64 characters`,l=`POST`,e=Error,n=JSON.stringify,o=parseInt;try{const v=[];const w=[];const x=document.querySelectorAll(`.pid-entry`);const y=document.querySelectorAll(`.std-pid-entry`);const z=document.getElementById(`initialisation`)?.value||a;const A=document.getElementById(`grouping`)?.value||b;const B=document.getElementById(`group_dest_type`)?.value||c;const C=document.getElementById(`ha_discovery`)?.value||b;const D=document.getElementById(`destination`)?.value||a;const E=document.getElementById(`group_cycle`);const F=E?.value||`5000`;const G=document.getElementById(`car_specific`)?.value||b;const H=document.getElementById(`car_model`);const I=document.getElementById(`standard_pids`)?.value||b;const J=document.getElementById(`ecu_protocol`)?.value||`6`;const K=H?.value||a;if(G==`enable`&&(!K||K.length===d||K===`Not Selected`)){throw new e(`Car model must be selected`)};let L={car_model:K,init:document.getElementById(`specific_init`).value,pids:[]};const M=document.querySelectorAll(`.specific-pid-entry`);if(M.length>d){L.pids=Array.from(M).map(a=>({pid:a.querySelector(f).value,pid_init:a.querySelector(`.pid-init-input`).value,parameters:[{name:a.querySelector(g).value,expression:a.querySelector(h).value,unit:a.querySelector(`.unit-input`).value,class:a.querySelector(`.class-input`).value,period:a.querySelector(i).value,min:a.querySelector(`.min-input`).value,max:a.querySelector(`.max-input`).value,type:a.querySelector(j).value,send_to:a.querySelector(k).value}]}))};fetch(`/store_car_data`,{method:l,headers:{'Content-Type':m},body:n({cars:[L]})}).then(a=>a.text()).then(a=>console.log(`Success:`,a)).catch(a=>console.error(`Error:`,a));if(!E.disabled&&(!/^\d+$/.test(F)||o(F)<p)){showNotification(`Cycle must be a number greater than 1000`,q);return !1};if(x?.length){x.forEach((b,l)=>{const m={Name:b.querySelector(g)?.value||a,Init:b.querySelector(`.init-input`)?.value||a,PID:b.querySelector(f)?.value||a,Expression:b.querySelector(h)?.value||a,MinValue:b.querySelector(`.min-value-input`)?.value||a,MaxValue:b.querySelector(`.max-value-input`)?.value||a,Period:b.querySelector(i)?.value||a,Type:b.querySelector(j)?.value||c,Send_to:b.querySelector(k)?.value||a};if(m.Name.length===d||m.Name.length>=r){throw new e(s)};if(m.PID.length===d||m.PID.length>=10){throw new e(`PID must not be empty and must be less than 10 characters`)};if(m.Expression.length===d||m.Expression.length>=r){throw new e(`Expression must not be empty and must be less than 32 characters`)};if(!/^\d+$/.test(m.Period)||o(m.Period)<100&&o(m.Period)!=d){throw new e(`Period must be a number greater than 100`)};if(m.Send_to.length>=t){throw new e(u)};v.push(m)})};if(y?.length){y.forEach((b,f)=>{const h={Name:b.querySelector(g)?.value||a,ReceiveHeader:b.querySelector(`.receive-header-input`)?.value||a,Period:b.querySelector(i)?.value||a,Type:b.querySelector(j)?.value||c,Send_to:b.querySelector(k)?.value||a};if(h.Name.length===d||h.Name.length>=r){throw new e(s)};if(!/^\d+$/.test(h.Period)||o(h.Period)<p&&o(h.Period)!=d){throw new e(`Period must be a number greater than 1000`)};if(h.Send_to.length>=t){throw new e(u)};w.push(h)})};const N={initialisation:z,grouping:A,group_dest_type:B,destination:D,cycle:F,car_specific:G,ha_discovery:C,car_model:K,pids:v,std_pids:w,standard_pids:I,ecu_protocol:J};await fetch(`store_auto_data`,{method:l,headers:{'Content-Type':m},body:n(N)}).then(a=>a.text()).then(a=>{showNotification(`Settings saved successfully`,`green`);document.querySelector(`.store`).disabled=!0;document.getElementById(`custom_pid_store`).disabled=!0}).catch(a=>{showNotification(`Error saving settings: `+ a.message,q);return !1});return !0}catch(a){showNotification(a.message,q);return !1}});var addSelectedPID=((a={})=>{let d=``,f=`click`,g=`none`,e=`selected`;const b=document.getElementById(`available_pids`);const c=a.Name||b.value;if(c){const b=document.querySelector(`.std-pid-entries`);const h=document.createElement(`div`);h.className=`std-pid-entry`;h.innerHTML=`
+            <div class="pid-header">
+                <div class="header-left">
+                    <button type="button" class="collapse-btn">▼</button>
+                    <span class="pid-title">${c}</span>
+                </div>
+                <div class="header-right">
+                    <button type="button" class="delete-btn">Delete</button>
+                </div>
+            </div>
+            <div class="pid-content" style="display: none;">
+                <table class="compact-form-table">
+                    <tr>
+                        <td>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+                        <td><input type="text" class="name-input" value="${c}" readonly></td>
+                    </tr>
+                    <tr>
+                        <td>Receive Header:</td>
+                        <td><input type="text" class="receive-header-input" value="${a.ReceiveHeader||d}" 
+                            placeholder="Optional Receive Header" maxlength="8"></td>
+                    </tr>
+                    <tr>
+                        <td>Period(ms):</td>
+                        <td><input type="number" class="period-input" value="${a.Period||`1000`}" 
+                            min="100" max="120000"></td>
+                    </tr>
+                    <tr>
+                        <td>Destination Type:</td>
+                        <td><select class="type-select">
+                            <option value="Default" ${a.Type===`Default`?e:d}>Default</option>
+                            <option value="MQTT_Topic" ${a.Type===`MQTT_Topic`?e:d}>MQTT_Topic</option>
+                            <option value="MQTT_WallBox" ${a.Type===`MQTT_WallBox`?e:d}>MQTT_WallBox</option>
+                        </select></td>
+                    </tr>
+                    <tr>
+                        <td>Destination:</td>
+                        <td><input type="text" class="send-to-input" value="${a.Send_to||d}" 
+                            placeholder="Enter destination"></td>
+                    </tr>
+                </table>
+            </div>
+        `;const i=document.createElement(`style`);i.textContent=pidEntryStyles;document.head.appendChild(i);const j=h.querySelector(`.pid-header`);const k=h.querySelector(`.delete-btn`);const l=h.querySelector(`.collapse-btn`);const m=h.querySelector(`.pid-content`);k.addEventListener(f,()=>{h.remove();enableAutoStoreButton()});const n=a=>{a.stopPropagation();const b=m.style.display===g;m.style.display=b?`block`:g;l.textContent=b?`▲`:`▼`};j.addEventListener(f,n);l.addEventListener(f,n);h.querySelectorAll(`input, select`).forEach(a=>{a.addEventListener(`input`,enableAutoStoreButton)});b.appendChild(h);enableAutoStoreButton()}});var rxCheckBoxChanged=(()=>{let a=`mqtt_rx_topic`;if(document.getElementById(`mqtt_rx_en_checkbox`).checked){document.getElementById(a).disabled=!1}else{document.getElementById(a).disabled=!0}});var sendCARDataFile=(()=>{let d=0,f=`red`,e=`No files selected!`,g=`File size exceeds 200KB!`,c=`car_data_file`,h=JSON;const a=document.getElementById(c);const b=200*1024;if(a.files.length==d){showNotification(e,f);alert(e)}else{const e=a.files[d];if(e.size>b){showNotification(g,f);alert(g);return};const i=new FileReader();i.onload=(a=>{try{const b=h.parse(a.target.result);const d=b.car_model?{cars:[b]}:b;const e=h.stringify(d).replace(/\s+/g,``);const f=document.getElementById(`car_data_form`);const g=new FormData(f);g.set(c,new Blob([e],{type:`application/json`}));latest_car_models=null;fetch(`/upload/car_data.json`,{method:`POST`,body:g}).then(a=>a.text()).then(a=>{console.log(`Success:`,a);showNotification(a,`green`);setTimeout(()=>{window.location.reload()},1000)}).catch(a=>{console.error(`Error:`,a)})}catch(a){showNotification(`Invalid JSON file!`,f);alert(`The selected file is not a valid JSON file!`)}});i.readAsText(e)}});var checkForDuplicates=(()=>{const a=document.querySelectorAll(`.pid-entry`);const b=new Map();a.forEach(a=>{const c=a.querySelector(`.pid-input`);const d=a.querySelector(`.send-to-input`);if(c&&c.value){const a=c.value;if(b.has(a)){b.get(a).push(d)}else{b.set(a,[d])}}});b.forEach((a,b)=>{if(a.length>1){a.forEach(a=>{a.disabled=!0;a.value=``})}else{a[0].disabled=!1}})});var submit_enable=(()=>{let k=`batt_alert`,s=32,D=`port_type`,q=`submit_button`,p=`red`,j=`none`,r=1,y=`Port value, min=1 max=65535`,z=`batt_alert_port`,F=`enable`,h=`disable`,i=`mqtt_en_div`,n=8,u=`mqtt_rx_topic`,f=`0`,x=65535,E=`sleep_status`,H=`mqtt_elm327_log`,B=`sleep_volt`,t=`mqtt_tx_topic`,c=`sta_security`,A=`ble_pass_value`,C=`protocol`,m=`ap_pass_value`,a=`ssid_value`,o=63,g=`mqtt_en`,v=`mqtt_status_topic`,G=`block`,b=`pass_value`,l=`batt_alert_div`,e=`1`,d=`ble_status`,w=`tcp_port_value`;console.log(`sumbit_enable`);if(document.getElementById(`wifi_mode`).value==`AP`){document.getElementById(a).disabled=!0;document.getElementById(b).disabled=!0;document.getElementById(c).disabled=!0;document.getElementById(d).disabled=!1}else{document.getElementById(a).disabled=!1;document.getElementById(b).disabled=!1;document.getElementById(c).disabled=!1;document.getElementById(d).disabled=!0;document.getElementById(d).selectedIndex=e};if(document.getElementById(d).selectedIndex==f){alert(`Warrning!\\\\r\\\\n\\\\r\\\\nWhen BLE is connected the WiFi AP WiCAN_xxxxxx will be disabled.\\\\r\\\\nTo re-ennable the WiFi AP Turn OFF BLE on your phone or device, then power cycle WiCAN. If you connect to WiFi AP ssid WiCAN_xxxxxx, the BLE will automatically be disabled.`);document.getElementById(g).value=h;document.getElementById(i).style.display=j;document.getElementById(g).disabled=!0;document.getElementById(k).value=h;document.getElementById(l).style.display=j;document.getElementById(k).disabled=!0}else{document.getElementById(g).disabled=!1;document.getElementById(k).disabled=!1};if(document.getElementById(m).value.length<n||document.getElementById(m).value.length>o||document.getElementById(b).value.length<n||document.getElementById(b).value.length>o){showNotification(`AP/Station password len, min=0 max=64`,p);document.getElementById(q).disabled=!0}else if(document.getElementById(a).value.length<r||document.getElementById(a).value.length>s){showNotification(`AP/station ssid len, min=1 max=32`,p);document.getElementById(q).disabled=!0}else if(document.getElementById(t).value.length<r||document.getElementById(t).value.length>s){showNotification(`MQTT TX Topic length, min=1 max=64`,p);document.getElementById(q).disabled=!0}else if(document.getElementById(u).value.length<r||document.getElementById(u).value.length>s){showNotification(`MQTT RX Topic length, min=1 max=64`,p);document.getElementById(q).disabled=!0}else if(document.getElementById(v).value.length<r||document.getElementById(v).value.length>s){showNotification(`MQTT Status Topic length, min=1 max=64`,p);document.getElementById(q).disabled=!0}else if(document.getElementById(w).value>x||document.getElementById(w).value<r){showNotification(y,p);document.getElementById(q).disabled=!0}else if(document.getElementById(z).value>x||document.getElementById(z).value<r){showNotification(y,p);document.getElementById(q).disabled=!0}else if(document.getElementById(A).value.length!=6||document.getElementById(A).value.charAt(0)==f){showNotification(`Passkey length, min=6 max=6, 1st number not 0`,p);document.getElementById(q).disabled=!0}else if(document.getElementById(B).value<12||document.getElementById(B).value>15){showNotification(`Sleep Voltage Value, min=12.0 max=15.0`,p);document.getElementById(q).disabled=!0}else{document.getElementById(q).disabled=!1};if(document.getElementById(C).value==`savvycan`){document.getElementById(w).value=`23`;document.getElementById(w).disabled=!0;document.getElementById(D).selectedIndex=f;document.getElementById(D).disabled=!0}else{document.getElementById(w).disabled=!1;document.getElementById(D).selectedIndex=f;document.getElementById(D).disabled=!1};if(document.getElementById(E).value==F){if(document.getElementById(d).selectedIndex!=f){document.getElementById(k).disabled=!1}}else if(document.getElementById(E).value==h){document.getElementById(k).disabled=!0;document.getElementById(k).selectedIndex=e};if(document.getElementById(k).value==F){document.getElementById(l).style.display=G}else if(document.getElementById(k).value==h){document.getElementById(l).style.display=j};if(document.getElementById(g).value==F){document.getElementById(i).style.display=G}else if(document.getElementById(g).value==h){document.getElementById(i).style.display=j};if(document.getElementById(C).value==`elm327`){document.getElementById(H).disabled=!1}else{document.getElementById(H).disabled=!0;document.getElementById(H).value=h}});var isNameUnique=(a=>canData.every(b=>b[`Name`]!==a));var mon_button_en=(a=>{let b=`mon_button`,c=`mon_datarate`,d=`mon_filter`,e=`mon_mask`;if(a==1){document.getElementById(b).value=`Start`;document.getElementById(c).disabled=!1;document.getElementById(d).disabled=!1;document.getElementById(e).disabled=!1}else{document.getElementById(b).value=`Stop`;document.getElementById(c).disabled=!0;document.getElementById(d).disabled=!0;document.getElementById(e).disabled=!0}});var restoreCANFLTRow=((a,b,c,d,e,f,g,h)=>{let E=``,B=0,C=536870912,D=1;var i=a;if(i<B){i=B}else if(i>C){i=C};var j=b;var k=c;var l=d;var m=e;var n=f;var o=g;var p=h;var q=document.getElementById(`can_flt_table`);var r=q.insertRow(-D);var s=r.insertCell(B);var t=r.insertCell(D);var u=r.insertCell(2);var v=r.insertCell(3);var w=r.insertCell(4);var x=r.insertCell(5);var y=r.insertCell(6);var z=r.insertCell(7);var A=r.insertCell(8);s.innerHTML=i;t.innerHTML=j;u.innerHTML=k;v.innerHTML=l;w.innerHTML=m;x.innerHTML=n;y.innerHTML=o;z.innerHTML=p;A.innerHTML=`<button style="width: 70px;" onclick="deleteCANFLTRow(this)">Delete</button>`;canData.push({CANID:i,Name:j,PID:k,PIDIndex:l,StartBit:m,BitLength:n,Expression:o,Cycle:p});document.getElementById(`canId`).value=E;document.getElementById(`name`).value=E;document.getElementById(`pid`).value=E;document.getElementById(`pindex`).value=E;document.getElementById(`startBit`).value=E;document.getElementById(`bitLength`).value=E;document.getElementById(`expression`).value=E;document.getElementById(`cycle`).value=E});var postCANFLT=(()=>{var a={};a[`can_flt`]=canData;var b=JSON.stringify(a);const c=new XMLHttpRequest();c.onload=function(){showNotification(this.responseText,`green`);submit_enable()};c.open(`POST`,`/store_canflt`);c.send(b)});var Load=(()=>{let h=`can_datarate`,x=`batt_alert`,t=`mqtt_rx_en_checkbox`,D=`none`,u=`mqtt_rx_topic`,j=`3`,l=`can_mode`,q=`sleep_status`,s=`mqtt_tx_topic`,v=`protocol`,y=7,z=`mqtt_en`,C=`block`,e=`pass_value`,i=`2`,B=`batt_alert_div`,r=`mqtt_tx_en_checkbox`,m=`port_type`,n=`enable`,p=`disable`,E=`mqtt_en_div`,g=`0`,A=`batt_alert_time`,f=`sta_security`,d=`ssid_value`,c=`1`,o=`ble_status`,w=`tcp_port_value`,k=`6`,b=`wifi_mode`;const a=new XMLHttpRequest();a.onload=function(){var a=JSON.parse(this.responseText);if(a.wifi_mode==`APStation`){document.getElementById(b).selectedIndex=c;document.getElementById(d).disabled=!1;document.getElementById(e).disabled=!1;document.getElementById(f).disabled=!1}else if(a.wifi_mode==`AP`){document.getElementById(b).selectedIndex=g;document.getElementById(d).disabled=!0;document.getElementById(e).disabled=!0};var F=parseInt(a.ap_ch);F=F- 1;document.getElementById(`ap_ch_value`).selectedIndex=F.toString();document.getElementById(d).value=a.sta_ssid;document.getElementById(e).value=a.sta_pass;document.getElementById(f).value=a.sta_security||`wpa3`;if(a.can_datarate==`5K`){document.getElementById(h).selectedIndex=g}else if(a.can_datarate==`10K`){document.getElementById(h).selectedIndex=c}else if(a.can_datarate==`20K`){document.getElementById(h).selectedIndex=i}else if(a.can_datarate==`25K`){document.getElementById(h).selectedIndex=j}else if(a.can_datarate==`50K`){document.getElementById(h).selectedIndex=`4`}else if(a.can_datarate==`100K`){document.getElementById(h).selectedIndex=`5`}else if(a.can_datarate==`125K`){document.getElementById(h).selectedIndex=k}else if(a.can_datarate==`250K`){document.getElementById(h).selectedIndex=`7`}else if(a.can_datarate==`500K`){document.getElementById(h).selectedIndex=`8`}else if(a.can_datarate==`800K`){document.getElementById(h).selectedIndex=`9`}else if(a.can_datarate==`1000K`){document.getElementById(h).selectedIndex=`10`}else if(a.can_datarate==`auto`){document.getElementById(h).selectedIndex=`11`};if(a.can_mode==`normal`){document.getElementById(l).selectedIndex=g}else if(a.can_mode==`silent`){document.getElementById(l).selectedIndex=c};if(a.port_type==`tcp`){document.getElementById(m).selectedIndex=g}else if(a.port_type==`udp`){document.getElementById(m).selectedIndex=c};if(a.ble_status==n){document.getElementById(o).selectedIndex=g}else if(a.ble_status==p){document.getElementById(o).selectedIndex=c};if(a.sleep_status==n){document.getElementById(q).selectedIndex=g}else if(a.sleep_status==p){document.getElementById(q).selectedIndex=c};if(`mqtt_tx_en` in a){if(a.mqtt_tx_en===n){document.getElementById(r).checked=!0}else{document.getElementById(r).checked=!1}}else{document.getElementById(r).checked=!1;document.getElementById(s).disabled=!0};if(`mqtt_rx_en` in a){if(a.mqtt_rx_en===n){document.getElementById(t).checked=!0}else{document.getElementById(t).checked=!1}}else{document.getElementById(t).checked=!1;document.getElementById(u).disabled=!0};txCheckBoxChanged();rxCheckBoxChanged();document.getElementById(v).value=a.protocol;document.getElementById(w).value=a.port;document.getElementById(`ap_pass_value`).value=a.ap_pass;document.getElementById(`ble_pass_value`).value=a.ble_pass;document.getElementById(`sleep_volt`).value=a.sleep_volt;document.getElementById(`sleep_volt_value`).textContent=a.sleep_volt;document.getElementById(`sleep_time`).value=a.sleep_time;document.getElementById(`sleep_time_value`).textContent=a.sleep_time;document.getElementById(x).value=a.batt_alert;document.getElementById(`batt_alert_ssid`).value=a.batt_alert_ssid;document.getElementById(`batt_alert_pass`).value=a.batt_alert_pass;document.getElementById(`batt_alert_volt`).value=a.batt_alert_volt;document.getElementById(`batt_alert_protocol`).value=a.batt_alert_protocol;document.getElementById(`batt_alert_url`).value=a.batt_alert_url.slice(y);document.getElementById(`batt_alert_port`).value=a.batt_alert_port;document.getElementById(`batt_alert_topic`).value=a.batt_alert_topic;document.getElementById(`batt_mqtt_user`).value=a.batt_mqtt_user;document.getElementById(`batt_mqtt_pass`).value=a.batt_mqtt_pass;document.getElementById(z).value=a.mqtt_en;document.getElementById(`mqtt_url`).value=a.mqtt_url.slice(y);document.getElementById(`mqtt_port`).value=a.mqtt_port;document.getElementById(`mqtt_user`).value=a.mqtt_user;document.getElementById(`mqtt_pass`).value=a.mqtt_pass;document.getElementById(s).value=a.mqtt_tx_topic;document.getElementById(u).value=a.mqtt_rx_topic;document.getElementById(`mqtt_status_topic`).value=a.mqtt_status_topic;document.getElementById(`mqtt_elm327_log`).value=a.mqtt_elm327_log;if(a.batt_alert_time==c){document.getElementById(A).selectedIndex=g}else if(a.batt_alert_time==k){document.getElementById(A).selectedIndex=c}else if(a.batt_alert_time==`12`){document.getElementById(A).selectedIndex=i}else if(a.batt_alert_time==`24`){document.getElementById(A).selectedIndex=j};if(document.getElementById(v).value==`savvycan`){document.getElementById(w).value=`23`;document.getElementById(w).disabled=!0;document.getElementById(m).selectedIndex=g;document.getElementById(m).disabled=!0};if(document.getElementById(x).value==n){document.getElementById(B).style.display=C}else if(document.getElementById(x).value==p){document.getElementById(B).style.display=D};if(document.getElementById(z).value==n){document.getElementById(E).style.display=C}else if(document.getElementById(z).value==p){document.getElementById(E).style.display=D};loadCANFLT();loadautoPIDCarData();loadautoPID();document.getElementById(`car_model`).addEventListener(`change`,function(){document.querySelector(`.specific-pid-entries`).innerHTML=``;const a=this.value;if(latest_car_models&&Array.isArray(latest_car_models.cars)){const b=latest_car_models.cars.find(b=>b.car_model===a);const c=document.getElementById(`specific_init`);c.value=b.init;if(b&&b.pids){b.pids.forEach(a=>{if(a.parameters){a.parameters.forEach(b=>{addCarParameter({...b,pid:a.pid,pid_init:a.pid_init})})}})}}});document.getElementById(`store_canflt_button`).disabled=!0;document.querySelector(`.store`).disabled=!0;document.getElementById(`submit_button`).disabled=!0};checkStatus();a.open(`GET`,`/load_config`);a.send()});var sta_enable=(()=>{});var openTab=((a,b)=>{let f=0,g=` active`;var c,d,e;d=document.getElementsByClassName(`tabcontent`);for(c=f;c<d.length;c++){d[c].style.display=`none`};e=document.getElementsByClassName(`tablinks`);for(c=f;c<e.length;c++){e[c].className=e[c].className.replace(g,``)};document.getElementById(b).style.display=`block`;a.currentTarget.className+=g});var toggleStandardPIDOptions=(()=>{const a=document.getElementById(`standard_pids`);const b=document.getElementById(`ecu_protocol`);const c=document.getElementById(`available_pids`);const d=document.getElementById(`scan_pids_button`);const e=a.value===`enable`;b.disabled=!e;c.disabled=!e;d.disabled=!e});var toggleSendToFields=(()=>{const a=document.getElementById(`grouping`)?.value||`disable`;const b=document.getElementById(`automate_table`);if(!b)return;const c=b.getElementsByClassName(`pid-entry`);if(!c.length)return;Array.from(c).forEach(b=>{const c=b.querySelector(`.send-to-input`);if(c){c.disabled=a===`Group ALL`}})});var addCarParameter=((a={})=>{let b=``,d=`click`,e=`none`,c=`selected`;if(a.name){const f=document.querySelector(`.specific-pid-entries`);const g=document.createElement(`div`);g.className=`specific-pid-entry`;g.innerHTML=`
+            <div class="pid-header">
+                <div class="header-left">
+                    <button type="button" class="collapse-btn">▼</button>
+                    <span class="pid-title">${a.name}</span>
+                </div>
+                <div class="header-right">
+                    <button type="button" class="delete-btn">Delete</button>
+                </div>
+            </div>
+            <div class="pid-content" style="display: none;">
+                <table class="compact-form-table">
+                    <tr>
+                        <td>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+                        <td><input type="text" class="name-input" value="${a.name}"></td>
+                    </tr>
+                    <tr>
+                        <td>PID:</td>
+                        <td><input type="text" class="pid-input" value="${a.pid||b}" placeholder="PID"></td>
+                    </tr>
+                    <tr>
+                        <td>PID Init:</td>
+                        <td><input type="text" class="pid-init-input" value="${a.pid_init||b}" placeholder="Init"></td>
+                    </tr>
+                    <tr>
+                        <td>Expression:</td>
+                        <td><input type="text" class="expression-input" value="${a.expression||b}" placeholder="Expression"></td>
+                    </tr>
+                    <tr>
+                        <td>Unit:</td>
+                        <td><input type="text" class="unit-input" value="${a.unit||b}" placeholder="Unit"></td>
+                    </tr>
+                    <tr>
+                        <td>Class:</td>
+                        <td><input type="text" class="class-input" value="${a.class||b}" placeholder="Class"></td>
+                    </tr>
+
+                    <tr>
+                        <td>Min Value:</td>
+                        <td><input type="number" class="min-input" value="${a.min||b}" step="0.01" placeholder="Min"></td>
+                    </tr>
+                    <tr>
+                        <td>Max Value:</td>
+                        <td><input type="number" class="max-input" value="${a.max||b}" step="0.01" placeholder="Max"></td>
+                    </tr>
+                    <tr>
+                        <td>Period(ms):</td>
+                        <td><input type="number" class="period-input" value="${a.period||`5000`}" min="100" max="60000"></td>
+                    </tr>
+                    <tr>
+                        <td>Destination Type:</td>
+                        <td><select class="type-select">
+                            <option value="Default" ${a.type===`Default`?c:b}>Default</option>
+                            <option value="MQTT_Topic" ${a.type===`MQTT_Topic`?c:b}>MQTT_Topic</option>
+                            <option value="MQTT_WallBox" ${a.type===`MQTT_WallBox`?c:b}>MQTT_WallBox</option>
+                        </select></td>
+                    </tr>
+                    <tr>
+                        <td>Destination:</td>
+                        <td><input type="text" class="send-to-input" value="${a.send_to||b}" 
+                            placeholder="Destination"></td>
+                    </tr>
+                </table>
+            </div>
+        `;const h=document.createElement(`style`);h.textContent=pidEntryStyles;document.head.appendChild(h);const i=g.querySelector(`.pid-header`);const j=g.querySelector(`.delete-btn`);const k=g.querySelector(`.collapse-btn`);const l=g.querySelector(`.pid-content`);j.addEventListener(d,()=>{g.remove();enableAutoStoreButton()});const m=a=>{a.stopPropagation();const b=l.style.display===e;l.style.display=b?`block`:e;k.textContent=b?`▲`:`▼`};i.addEventListener(d,m);k.addEventListener(d,m);g.querySelectorAll(`input, select`).forEach(a=>{a.addEventListener(`input`,enableAutoStoreButton)});f.appendChild(g);enableAutoStoreButton()}});var addCollapsibleRow=((a={})=>{let n=``,p=`click`,q=`none`,r=`input`,o=`selected`;const b=document.querySelector(`.pid-entries`);const c=document.createElement(`div`);c.className=`pid-entry`;c.innerHTML=`
+        <div class="pid-header">
+            <div class="header-left">
+                <button type="button" class="collapse-btn">▼</button>
+                <span class="pid-title">New PID</span>
+            </div>
+            <div class="header-right">
+                <button type="button" class="delete-btn">Delete</button>
+            </div>
+        </div>
+        <div class="pid-content hidden">
+            <table class="compact-form-table">
+                <tr>
+                    <td>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
+                    <td><input type="text" class="name-input" value="${a.Name||n}" 
+                        placeholder="Parameter Name"></td>
+                </tr>
+                <tr>
+                    <td>Init:</td>
+                    <td><input type="text" class="init-input" value="${a.Init||n}" 
+                        placeholder="PID Init"></td>
+                </tr>
+                <tr>
+                    <td>PID:</td>
+                    <td><input type="text" class="pid-input" value="${a.PID||n}" 
+                        placeholder="PID"></td>
+                </tr>
+                <tr>
+                    <td>Expression:</td>
+                    <td><input type="text" class="expression-input" value="${a.Expression||n}" 
+                        placeholder="Enter expression"></td>
+                </tr>
+                <tr>
+                    <td>Min Value:</td>
+                    <td><input type="number" class="min-value-input" value="${a.MinValue||n}" 
+                        step="0.01" placeholder="Minimum value"></td>
+                </tr>
+                <tr>
+                    <td>Max Value:</td>
+                    <td><input type="number" class="max-value-input" value="${a.MaxValue||n}" 
+                        step="0.01" placeholder="Maximum value"></td>
+                </tr>
+                <tr>
+                    <td>Period(ms):</td>
+                    <td><input type="number" class="period-input" value="${a.Period||n}" 
+                        placeholder="ms"></td>
+                </tr>
+                <tr>
+                    <td>Destination Type:</td>
+                    <td><select class="type-select">
+                        <option value="Default" ${a.Type===`Default`?o:n}>Default</option>
+                        <option value="MQTT_Topic" ${a.Type===`MQTT_Topic`?o:n}>MQTT_Topic</option>
+                        <option value="MQTT_WallBox" ${a.Type===`MQTT_WallBox`?o:n}>MQTT_WallBox</option>
+                    </select></td>
+                </tr>
+                <tr>
+                    <td>Send_to:</td>
+                    <td><input type="text" class="send-to-input" value="${a.Send_to||n}" 
+                        placeholder="Enter destination"></td>
+                </tr>
+            </table>
+        </div>
+    `;const d=document.createElement(`style`);d.textContent=pidEntryStyles;document.head.appendChild(d);const e=c.querySelector(`.pid-header`);const f=c.querySelector(`.delete-btn`);const g=c.querySelector(`.collapse-btn`);const h=c.querySelector(`.pid-content`);const i=c.querySelector(`.pid-title`);const j=c.querySelector(`.name-input`);const k=c.querySelector(`.pid-input`);f.addEventListener(p,()=>{c.remove();enableAutoStoreButton()});const l=a=>{a.stopPropagation();const b=h.style.display===q;h.style.display=b?`block`:q;g.textContent=b?`▲`:`▼`};e.addEventListener(p,l);g.addEventListener(p,l);i.textContent=a.Name?a.Name:`New PID`;const m=()=>{i.textContent=`${j.value||`New Parameter`}`};j.addEventListener(r,m);k.addEventListener(r,m);c.querySelectorAll(`input, select`).forEach(a=>{a.addEventListener(r,enableAutoStoreButton)});b.appendChild(c)});var loadautoPIDCarData=(()=>{const a=new XMLHttpRequest();a.onload=function(){console.log(`Car models:`,this.responseText);if(this.responseText!=`NONE`){var a=JSON.parse(this.responseText);const c=[];if(a&&Array.isArray(a.cars)){a.cars.forEach(a=>{if(a.car_model){c.push(a.car_model)};if(a.pids){document.getElementById(`specific_init`).value=a.init;a.pids.forEach(a=>{if(a.parameters){a.parameters.forEach(b=>{addCarParameter({name:b.name,expression:b.expression,unit:b.unit,class:b.class,period:b.period,type:b.type,min:b.min,max:b.max,send_to:b.send_to,pid:a.pid,pid_init:a.pid_init})})}})}})};var b={"supported":c};loadCarModels(b)}else{toggleCarModel();toggleDestinationAndCycle();toggleSendToFields();toggleStandardPIDOptions()}};a.open(`GET`,`/load_auto_pid_car_data`);a.send()});var mon_control=(()=>{var a=document.getElementById(`mon_datarate`).selectedIndex;var b=window.location.href;var c=`http://192.168.31.72/`;console.log(a);alert(`Please reboot device after Monitor, otherwise the device may not function as expected`);ws_url=`ws://`+ b.substr(7,b.length)+ `ws`;console.log(ws_url);if(document.getElementById(`mon_button`).value==`Start`){ws=new WebSocket(ws_url);setTimeout(bindEvents,1000);ws.addEventListener(`open`,b=>{var c=`C`+ cr+ `S`+ a+ cr+ `O`+ cr;console.log(`onopen called`);ws.send(c);window.mon_button_en(0)});ws.addEventListener(`close`,a=>{window.mon_button_en(1);console.log(`onclose called`)})}else{ws_close()}});var reboot=(()=>{const a=new XMLHttpRequest();document.getElementById(`reboot_button`).disabled=!0;showNotification(`Rebooting please reconnect...`,`yellow`);a.open(`POST`,`/system_reboot`);a.send(`reboot`)});var showNotification=((a,b=e,c=5000)=>{let e=`red`,f=`#fee2e2`,i=`show`,g=`#ef4444`,h=`#991b1b`;const d=document.getElementById(`notification`);switch(b){case e:d.style.backgroundColor=f;d.style.borderColor=g;d.style.color=h;break;case `green`:d.style.backgroundColor=`#dcfce7`;d.style.borderColor=`#22c55e`;d.style.color=`#166534`;break;case `blue`:d.style.backgroundColor=`#dbeafe`;d.style.borderColor=`#3b82f6`;d.style.color=`#1e40af`;break;case `yellow`:d.style.backgroundColor=`#fef9c3`;d.style.borderColor=`#eab308`;d.style.color=`#854d0e`;break;default:d.style.backgroundColor=f;d.style.borderColor=g;d.style.color=h}d.innerHTML=a;d.classList.add(i);if(window.notificationTimeout){clearTimeout(window.notificationTimeout)};window.notificationTimeout=setTimeout(()=>{d.classList.remove(i)},c)});var scanAvailablePIDs=(async()=>{let c=`red`;const a=document.querySelector(`#scan_pids_button`);const b=document.querySelector(`#add_pid_button`);try{a.disabled=!0;a.textContent=`Scanning...`;b.disabled=!0;const d=document.getElementById(`ecu_protocol`).value;const e=await fetch(`/scan_available_pids?protocol=${d}`);if(!e.ok){throw new Error(`HTTP error! status: ${e.status}`)};const f=await e.json();const g=document.getElementById(`available_pids`);g.innerHTML=``;if(f.text){showNotification(f.text,c)}else if(f.std_pids&&Array.isArray(f.std_pids)&&f.std_pids.length>0){f.std_pids.forEach(a=>{const b=document.createElement(`option`);b.value=a;b.textContent=a;g.appendChild(b)});b.disabled=!1;showNotification(`PID scan complete`,`green`)}else{showNotification(`No PIDs found. Try a different protocol or check if ignition is ON`,`orange`)}}catch(a){console.error(`Error:`,a);showNotification(`PID scan failed: `+ a.message,c)}finally{a.disabled=!1;a.textContent=`Scan PIDs`}});var addRowAutoTable=(()=>{addCollapsibleRow();enableAutoStoreButton()});var send_system_command=(a=>{const b=new XMLHttpRequest();const c={"command":a};b.open(`POST`,`/system_commands`);b.send(JSON.stringify(c))});var txCheckBoxChanged=(()=>{let a=`mqtt_tx_topic`;if(document.getElementById(`mqtt_tx_en_checkbox`).checked){document.getElementById(a).disabled=!1}else{document.getElementById(a).disabled=!0}});var loadCANFLT=(()=>{let b=`NONE`;const a=new XMLHttpRequest();a.onload=function(){if(this.responseText===b){return};var a=JSON.parse(this.responseText);if(this.responseText!=b){if(Array.isArray(a.can_flt)){a.can_flt.forEach(a=>{restoreCANFLTRow(a[`CANID`],a[`Name`],a[`PID`],a[`PIDIndex`],a[`StartBit`],a[`BitLength`],a[`Expression`],a[`Cycle`])})}}};a.open(`GET`,`/load_canflt`);a.send()});var toggleDestinationField=(()=>{const a=document.getElementById(`grouping`).value;toggleDestinationAndCycle()});var ws_close=(()=>{ws.send(`C`+ cr);ws.close()});var storeCANFLT=(()=>{postCANFLT();document.getElementById(`store_canflt_button`).disabled=!0});var loadAutoTable=(a=>{let f=`standard_pids`,k=`change`,h=`group_dest_type`,d=`disable`,g=`ecu_protocol`,b=``,l=`function`,c=`car_specific`,e=`grouping`,i=`Default`,j=Array.isArray;try{console.log(`Raw jsonData:`,a);const m=JSON.parse(a);console.log(`Parsed data:`,m);const n=document.getElementById(`initialisation`);if(n){n.value=m.initialisation||b};const o=document.getElementById(`automate_table`);if(!o){console.error(`Automate table not found`);return};const p=(a,c,d=b)=>{const e=document.getElementById(a);if(e){e.value=c||d}};p(c,m.car_specific,d);p(`ha_discovery`,d);p(e,m.grouping,d);p(`group_cycle`,m.cycle,`5000`);p(`destination`,m.destination,b);p(`car_model`,m.car_model,b);p(f,m.standard_pids,d);p(g,m.ecu_protocol,`6`);p(h,m.group_dest_type,i);if(m.pids&&j(m.pids)){m.pids.forEach((a,c)=>{console.log(`Loading PID ${c}:`,a);addCollapsibleRow({Name:a.Name||b,Init:a.Init||b,PID:a.PID||b,Expression:a.Expression||b,MinValue:a.MinValue||b,MaxValue:a.MaxValue||b,Period:a.Period||b,Type:a.Type||i,Send_to:a.Send_to||b})})};if(m.std_pids&&j(m.std_pids)){m.std_pids.forEach((a,c)=>{console.log(`Loading Standard PID ${c}:`,a);addSelectedPID({Name:a.Name||b,ReceiveHeader:a.ReceiveHeader||b,Period:a.Period||b,Type:a.Type||i,Send_to:a.Send_to||b})})};requestAnimationFrame(()=>{try{const a=document.getElementById(c);if(a){a.dispatchEvent(new Event(k))};const b=document.getElementById(e);if(b){b.dispatchEvent(new Event(k))};const d=document.getElementById(h);if(d){d.dispatchEvent(new Event(k))};const i=document.getElementById(g);if(i){i.dispatchEvent(new Event(k))};const j=document.getElementById(f);if(j){j.dispatchEvent(new Event(k))};if(typeof toggleCarModel===l)toggleCarModel();if(typeof toggleDestinationAndCycle===l)toggleDestinationAndCycle();if(typeof toggleSendToFields===l)toggleSendToFields();if(typeof toggleStandardPIDOptions===l)toggleStandardPIDOptions()}catch(a){console.error(`Error in UI updates:`,a)}});console.log(`loadAutoTable completed successfully`)}catch(a){console.error(`Error in loadAutoTable:`,a);showNotification(`Error loading table data: `+ a.message,`red`)}});var alert_elm327=(()=>{alert(`If elm327 log is enabled then only CAN frames proccessed by elm327 will be sent to MQTT broker.`)});var deleteCANFLTRow=(a=>{let e=1;var b=a.parentNode.parentNode;var c=b.cells[0].textContent;var d=canData.findIndex(a=>a[`CANID`]===parseInt(c));if(d!==-e){canData.splice(d,e)};b.parentNode.removeChild(b);document.getElementById(`store_canflt_button`).disabled=!1});var uploadCfg=(async()=>{let e=JSON;const a=document.getElementById(`fileInput`);const b=a.files[0];if(!b)return;const c={'config':`/store_config`,'auto_pid':`/store_auto_data`,'auto_pid_car_data':`/store_car_data`,'canflt':`/store_canflt`};const d=200;try{const f=new FileReader();f.onload=(async(b)=>{try{const f=e.parse(b.target.result);let g=!1;for(const [a,b] of Object.entries(c)){if(f[a]){try{const c=await fetch(b,{method:`POST`,headers:{'Content-Type':`application/json`},body:e.stringify(f[a])});if(!c.ok){g=!0;throw new Error(`HTTP error! status: ${c.status}`)};await new Promise(a=>setTimeout(a,d))}catch(a){g=!0}}};if(g){alert(`Some configurations failed to upload`)}else{alert(`Configuration uploaded successfully, Rebooting...`)};a.value=``}catch(a){alert(`Failed to parse configuration file`)}});f.onerror=(()=>{alert(`Error reading file`)});f.readAsText(b)}catch(a){alert(`Upload failed`)}});var enableAutoStoreButton=(()=>{const a=document.querySelector(`button.store`);if(a){a.disabled=!1};document.getElementById(`custom_pid_store`).disabled=!1});var loadCarModels=(a=>{const b=document.getElementById(`car_model`);if(a&&Array.isArray(a.supported)){b.innerHTML=``;a.supported.forEach(a=>{const c=document.createElement(`option`);c.value=a;c.text=a;b.appendChild(c)})}else{console.error(`Invalid data format or missing 'supported' property.`)};toggleCarModel();toggleDestinationAndCycle();toggleSendToFields();toggleStandardPIDOptions()});var postConfig=(async()=>{let k=`can_datarate`,s=`batt_alert`,G=`mqtt_port`,z=`batt_alert_port`,y=`batt_alert_url`,F=`mqtt_url`,N=`mqtt_rx_topic`,l=`can_mode`,p=`sleep_status`,J=`mqtt_tx_topic`,n=`protocol`,E=`mqtt_en`,D=`batt_mqtt_pass`,m=`port_type`,L=`enable`,r=`sleep_time`,u=`batt_alert_pass`,M=`disable`,O=`mqtt_rx_en`,H=`mqtt_user`,w=`batt_alert_protocol`,Q=`mqtt_elm327_log`,q=`sleep_volt`,x=`mqtt://`,B=`batt_alert_time`,I=`mqtt_pass`,t=`batt_alert_ssid`,v=`batt_alert_volt`,j=`sta_security`,P=`mqtt_status_topic`,A=`batt_alert_topic`,C=`batt_mqtt_user`,K=`mqtt_tx_en`,o=`ble_status`,i=`wifi_mode`;var a={};await new Promise(a=>setTimeout(a,1000));const b=await storeAutoTableData();if(!b){return};a[i]=document.getElementById(i).value;a[`ap_ch`]=document.getElementById(`ap_ch_value`).value;a[`sta_ssid`]=document.getElementById(`ssid_value`).value;a[`sta_pass`]=document.getElementById(`pass_value`).value;a[j]=document.getElementById(j).value;a[k]=document.getElementById(k).value;a[l]=document.getElementById(l).value;a[m]=document.getElementById(m).value;a[`port`]=document.getElementById(`tcp_port_value`).value;a[`ap_pass`]=document.getElementById(`ap_pass_value`).value;a[n]=document.getElementById(n).value;a[`ble_pass`]=document.getElementById(`ble_pass_value`).value;a[o]=document.getElementById(o).value;a[p]=document.getElementById(p).value;a[q]=document.getElementById(q).value;a[r]=document.getElementById(r).value;a[s]=document.getElementById(s).value;a[t]=document.getElementById(t).value;a[u]=document.getElementById(u).value;a[v]=document.getElementById(v).value;a[w]=document.getElementById(w).value;let c=x;let d=c.concat(document.getElementById(y).value);a[y]=d;a[z]=document.getElementById(z).value;a[A]=document.getElementById(A).value;a[B]=document.getElementById(B).value;a[C]=document.getElementById(C).value;a[D]=document.getElementById(D).value;a[E]=document.getElementById(E).value;let e=x;let f=c.concat(document.getElementById(F).value);a[F]=f;a[G]=document.getElementById(G).value;a[H]=document.getElementById(H).value;a[I]=document.getElementById(I).value;a[J]=document.getElementById(J).value;if(document.getElementById(`mqtt_tx_en_checkbox`).checked){a[K]=L}else{a[K]=M};a[N]=document.getElementById(N).value;if(document.getElementById(`mqtt_rx_en_checkbox`).checked){a[O]=L}else{a[O]=M};a[P]=document.getElementById(P).value;a[Q]=document.getElementById(Q).value;var g=JSON.stringify(a);const h=new XMLHttpRequest();h.onload=function(){showNotification(this.responseText,`green`);document.getElementById(`submit_button`).disabled=!0};h.onerror=(()=>{showNotification(`Failed to save configuration`,`red`)});h.open(`POST`,`/store_config`);h.send(g)});var downloadCfg=(async()=>{let e=0,f=Error;const a=[`/load_config`,`/load_auto_pid_car_data`,`/load_auto_pid`,`/load_canflt`];const b=500;let c={};let d=!1;try{for(let g=e;g<a.length;g++){const e=a[g];try{const a=await fetch(e);if(!a.ok){throw new f(`HTTP error! status: ${a.status}`)};const b=await a.json();const d=e.replace(`/load_`,``);c[d]=b}catch(a){d=!0}if(g<a.length- 1){await new Promise(a=>setTimeout(a,b))}};if(Object.keys(c).length===e){throw new f(`No data was successfully fetched from any endpoint`)};const g=JSON.stringify(c,null,2);const h=new Blob([g],{type:`application/json`});const i=window.URL.createObjectURL(h);const j=document.createElement(`a`);j.href=i;j.download=`config_${new Date().toISOString().split(`T`)[e]}.json`;document.body.appendChild(j);j.click();document.body.removeChild(j);window.URL.revokeObjectURL(i);return !0}catch(a){alert(`Failed to download configuration`);return !1}});var toggleDestinationAndCycle=(()=>{const a=document.getElementById(`grouping`).value;const b=document.getElementById(`destination`);const c=document.getElementById(`group_cycle`);const d=document.getElementById(`group_dest_type`);if(a===`enable`){b.disabled=!1;c.disabled=!1;d.disabled=!1}else{b.disabled=!0;c.disabled=!0;d.disabled=!0}});var toggleCarModel=(()=>{const a=document.getElementById(`car_specific`).value;const b=document.getElementById(`car_model`);if(a===`disable`){b.disabled=!0}else{b.disabled=!1};toggleDiscovery()});var checkStatus=(()=>{let f=`batt_alert`,g=`enable`,k=`none`,e=`port_type_status`,j=`disable`,m=`mqtt_en_div`,c=`AP`,d=`can_mode_status`,i=`block`,l=`mqtt_en`,h=`batt_alert_div`,b=`wifi_mode_current`;const a=new XMLHttpRequest();a.onload=function(){var a=JSON.parse(this.responseText);if(a.wifi_mode==`APStation`){document.getElementById(b).innerHTML=`AP+Station`}else if(a.wifi_mode==c){document.getElementById(b).innerHTML=c};document.getElementById(`sta_status`).innerHTML=a.sta_status;document.getElementById(`ap_channel_status`).innerHTML=a.ap_ch;document.getElementById(`sta_ip`).innerHTML=a.sta_ip;document.getElementById(`mdns`).innerHTML=a.mdns;document.getElementById(`can_bitrate_status`).innerHTML=a.can_datarate;if(a.can_mode==`normal`){document.getElementById(d).innerHTML=`Normal`}else if(a.can_mode==`silent`){document.getElementById(d).innerHTML=`Silent`};if(a.port_type==`tcp`){document.getElementById(e).innerHTML=`TCP`}else if(a.port_type==`udp`){document.getElementById(e).innerHTML=`UDP`};document.getElementById(`port_status`).innerHTML=a.port;document.getElementById(`fw_version`).innerHTML=a.fw_version;document.getElementById(`hw_version`).innerHTML=a.hw_version;document.getElementById(`git_version`).innerHTML=a.git_version;document.getElementById(`protocol`).value=a.protocol;document.getElementById(`batt_voltage`).innerHTML=a.batt_voltage;if(document.getElementById(f).value==g){document.getElementById(h).style.display=i}else if(document.getElementById(f).value==j){document.getElementById(h).style.display=k};if(document.getElementById(l).value==g){document.getElementById(m).style.display=i}else if(document.getElementById(l).value==j){document.getElementById(m).style.display=k}};a.open(`GET`,`/check_status`);a.send()});document.addEventListener(`DOMContentLoaded`,a=>{document.getElementById(`submit_button`).disabled=!0});let latest_car_models=null;const pidEntryStyles=`
+    .pid-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.5rem;
+        margin-top: 0.5rem;
+        border: 2px solid var(--gray-300);
+        border-radius: 8px;
+    }
+    
+    .header-right {
+        display: flex;
+        gap: 0.5rem;
+    }
+    
+    .collapse-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 1.2rem;
+        padding: 0.25rem 0.5rem;
+        color: var(--gray-700);
+    }
+    
+    .pid-content {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        transition: height 0.3s ease;
+    }
+    
+    .pid-content.hidden {
+        display: none;
+    }
+`;var canData=[];document.getElementById(`defaultOpen`).click();var ws=null;var cr=String.fromCharCode(13)</script>
\ No newline at end of file
diff --git a/main/homepage_full.html b/main/homepage_full.html
index 89b8c12..951af88 100644
--- a/main/homepage_full.html
+++ b/main/homepage_full.html
@@ -128,7 +128,7 @@
             width: 100%;
         }
 
-        input[type="text"],
+        input,
         input[type="number"],
         select {
             width: 100%;
@@ -140,7 +140,7 @@
             background-color: var(--white);
         }
 
-        input[type="text"]:focus,
+        input:focus,
         input[type="number"]:focus,
         select:focus {
             border-color: var(--primary-color);
@@ -148,7 +148,7 @@
             outline: none;
         }
 
-        input[type="text"]:disabled,
+        input:disabled,
         input[type="number"]:disabled,
         select:disabled {
             background-color: var(--gray-100);
@@ -166,6 +166,7 @@
             font-weight: 500;
             cursor: pointer;
             transition: var(--transition);
+            width: auto;
         }
 
         button:hover,
@@ -1032,16 +1033,16 @@
             <table class="form-table">
                 <tr>
                     <td>Reboot WiCAN:</td>
-                    <td><input id="reboot_button" name="reboot_button" type="button" onclick="reboot()" value="Reboot" style="width: 15%;" /></td>
+                    <td><input id="reboot_button" name="reboot_button" type="button" onclick="reboot()" value="Reboot" /></td>
                 </tr>
                 <tr>
                     <td>Download Configuration:</td>
-                    <td><input id="download_cfg_butt" name="download_cfg_butt" type="button" onclick="downloadCfg()" value="Download" style="width: 15%;" /></td>
+                    <td><input id="download_cfg_butt" name="download_cfg_butt" type="button" onclick="downloadCfg()" value="Download" /></td>
                 </tr>
                 <tr>
                     <td>Upload Configuration:</td>
                     <td>
-                        <input type="button" onclick="document.getElementById('fileInput').click()" value="Upload" style="width: 15%;" />
+                        <input type="button" onclick="document.getElementById('fileInput').click()" value="Upload" />
                         <input type="file" id="fileInput" accept=".json" onchange="uploadCfg()" style="display: none;" />
                     </td>
                 </tr>
@@ -1049,45 +1050,45 @@
             </table>
 
             <div class="section-title">Firmware Update</div>
-            <table class="form-table">
-                <tr>
-                    <td><input id="ota_file" name="ota_file" type="file" accept=".bin" /></td>
-                    <td><input id="ota_submit_button" type="button" value="Update" onclick="otaClick()" style="width: 15%;" /></td>
-                </tr>
-            </table>
-        </div>
-        
-        <div id="about_tab" class="tabcontent">
-            <div class="section-title">About</div>
             <form id="ota_form" action="/upload/ota.bin" method="post" enctype="multipart/form-data">
                 <table class="form-table">
                     <tr>
-                        <td>Firmware ver:</td>
-                        <td>
-                            <div id="fw_version">1.00</div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Hardware ver:</td>
-                        <td>
-                            <div id="hw_version">v2.10</div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Git ver:</td>
-                        <td>
-                            <div id="git_version">v2.10</div>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>Designed By:</td>
-                        <td>
-                            <div id="made_by"><a href="https://www.meatpi.com/"><b>meatpi.com</b></a></div>
-                        </td>
+                        <td><input id="ota_file" name="ota_file" type="file" accept=".bin" /></td>
+                        <td><input id="ota_submit_button" type="button" value="Update" onclick="otaClick()" /></td>
                     </tr>
                 </table>
             </form>
         </div>
+        
+        <div id="about_tab" class="tabcontent">
+            <div class="section-title">About</div>
+            <table class="form-table">
+                <tr>
+                    <td>Firmware ver:</td>
+                    <td>
+                        <div id="fw_version">1.00</div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Hardware ver:</td>
+                    <td>
+                        <div id="hw_version">v2.10</div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Git ver:</td>
+                    <td>
+                        <div id="git_version">v2.10</div>
+                    </td>
+                </tr>
+                <tr>
+                    <td>Designed By:</td>
+                    <td>
+                        <div id="made_by"><a href="https://www.meatpi.com/"><b>meatpi.com</b></a></div>
+                    </td>
+                </tr>
+            </table>
+        </div>
         <input id="submit_button" name="submit_button" type="button" onclick="postConfig()" value="Submit Changes" disabled />
     </div>
     

WiFi Mode:	AP
AP Channel:	6
WiFi Station:	Not Connected
Station IP:	192.168.3.1
mDNS:
CAN Bitrate:	500K
CAN Mode:	Silent
Port Type:	TCP
TCP/UDP Port:	3333
Battery Voltage:	12.8V
MQTT URL:
MQTT Port:
MQTT User:
MQTT Pass:
TX Topic:
RX Topic:
Status Topic:
MQTT elm327 log:
MQTT HA Discovery:
Grouping:
Destination Type:
Destination:
Cycle Time(ms):
Vehicle Specific:
Vehicle Model:
Vehicle Profiles:
Specific Initialisation:
Sleep Mode:
Sleep Voltage:	13.2V -
Sleep After:	2min -
Battery Alert:
SSID:
Password:
Alert Voltage:
Alert Protocol:
Alert URL:
Alert Port:
Alert MQTT User:
Alert MQTT Pass:
Alert Topic:
Alert every:
Firmware ver:	1.00
Hardware ver:	v2.10
Git ver:	v2.10
Designed By:	meatpi.com
Sleep Mode:
Sleep Voltage:	13.2V
Sleep After:	2min
Battery Alert:
Reboot WiCAN:
Download Configuration:
Upload Configuration:	- +
Firmware ver:	- 1.00 -
Hardware ver:	- v2.10 -
Git ver:	- v2.10 -
Designed By:	- meatpi.com -