+ The day-ahead optimization button will run once, based on the values entered into the configuration page. - After a few seconds, the charts and table below should be updated to reflect the optimization plan for the next 24 hours. + After a few seconds, the charts and table below should be updated to reflect the optimization plan for the next + 24 hours.
-${parameter_definition_object["Description"]}
+✓
`; + } else if (status === 200) { + //if status is 201, then show a tick + loading.innerHTML = ""; + loading.classList.remove("loading"); + } else { + //then show a cross + loading.classList.remove("loading"); + loading.innerHTML = `⤬
`; //show cross icon to indicate an error + if (logJson.length != 0) { + document.getElementById("alert-text").textContent = + "\r\n\u2022 " + logJson.join("\r\n\u2022 "); //show received log data in alert box + document.getElementById("alert").style.display = "block"; + document.getElementById("alert").style.textAlign = "left"; + } + } +} + +//simple function to write text to the alert box +async function errorAlert(text) { + document.getElementById("alert-text").textContent = "\r\n" + text + "\r\n"; + document.getElementById("alert").style.display = "block"; + document.getElementById("alert").style.textAlign = "left"; + return 0; +} + +//check config works +//remove logging +//loading +//tick and cross sizing +//add config to .gitignore +//remove old objects +//clean up css +//array values (refine pv peak) +//error in send or retrive (alert box) +//config path in data folder +//cli paths +//add redudency? diff --git a/src/emhass/static/data/param_definitions.json b/src/emhass/static/data/param_definitions.json new file mode 100644 index 00000000..43cfb64b --- /dev/null +++ b/src/emhass/static/data/param_definitions.json @@ -0,0 +1,407 @@ +{ + "Local": { + "sensor_power_photovoltaics": { + "friendly_name": "Sensor power sensor", + "Description": "This is the name of the photovoltaic power-produced sensor in Watts from Home Assistant. For example: ‘sensor.power_photovoltaics’.", + "input": "string", + "default_value": "sensor.power_photovoltaics" + }, + "sensor_power_load_no_var_loads": { + "friendly_name": "Sensor power loads with no variable loads", + "Description": "The name of the household power consumption sensor in Watts from Home Assistant. The deferrable loads that we will want to include in the optimization problem should be subtracted from this sensor in HASS. For example: ‘sensor.power_load_no_var_loads’", + "input": "string", + "default_value": "sensor.power_load_no_var_loads" + }, + "sensor_replace_zero": { + "friendly_name": "Sensor Nan values with 0s", + "Description": "The list of retrieved variables that we would want to replace nans (if they exist) with zeros.", + "input": "array.string", + "default_value": "sensor.power_photovoltaics" + }, + "sensor_linear_interp": { + "friendly_name": "Sensor NAN values with linear interpolation", + "Description": "The list of retrieved variables that we would want to interpolate nans values using linear interpolation", + "input": "array.string", + "default_value": "sensor.power_photovoltaics" + }, + "continual_publish": { + "friendly_name": "Continually publish optimization results", + "Description": "set to True to save entities to .json after an optimization run. Then automatically republish the saved entities (with updated current state value) every freq minutes. entity data saved to data_path/entities.", + "input": "boolean", + "default_value": false + } + }, + "System": { + "optimization_time_step": { + "friendly_name": "Optimization steps per minute (timesteps)", + "Description": "The time step to resample retrieved data from hass. This parameter is given in minutes. It should not be defined too low or you will run into memory problems when defining the Linear Programming optimization. Defaults to 30", + "input": "int", + "default_value": 30 + }, + "historic_days_to_retrieve": { + "friendly_name": "historic days to retrieve", + "Description": "We will retrieve data from now to days_to_retrieve days. Defaults to 2", + "input": "int", + "default_value": 2 + }, + "load_negative": { + "friendly_name": "Load negative values", + "Description": "Set this parameter to True if the retrieved load variable is negative by convention. Defaults to False", + "input": "boolean", + "default_value": false + }, + "set_zero_min": { + "friendly_name": "Remove Negatives", + "Description": "Set this parameter to True to give a special treatment for a minimum value saturation to zero for power consumption data. Values below zero are replaced by nans. Defaults to True.", + "input": "boolean", + "default_value": true + }, + "method_ts_round": { + "friendly_name": "Timestamp rounding method", + "Description": "Set the method for timestamp rounding, options are: first, last and nearest.", + "input": "select", + "select_options": [ + "nearest", + "first", + "last" + ], + "default_value": "nearest" + }, + "delta_forecast_daily": { + "friendly_name": "Number of forecasted days", + "Description": "The number of days for forecasted data. Defaults to 1.", + "input": "int", + "default_value": 1 + }, + "load_forecast_method": { + "friendly_name": "Load forecast method", + "Description": "The load forecast method that will be used. The options are ‘csv’ to load a CSV file or ‘naive’ for a simple 1-day persistence model.", + "input": "select", + "select_options": [ + "naive", + "csv" + ], + "default_value": "naive" + }, + "set_total_pv_sell": { + "friendly_name": "PV straight to grid", + "Description": "Set this parameter to true to consider that all the PV power produced is injected to the grid. No direct self-consumption. The default is false, for a system with direct self-consumption.", + "input": "boolean", + "default_value": false + }, + "lp_solver": { + "friendly_name": "Linear programming solver", + "Description": "Set the name of the linear programming solver that will be used. Defaults to ‘COIN_CMD’. The options are ‘PULP_CBC_CMD’, ‘GLPK_CMD’ and ‘COIN_CMD’.", + "input": "select", + "select_options": [ + "COIN_CMD", + "PULP_CBC_CMD", + "GLPK_CMD" + ], + "default_value": "COIN_CMD" + }, + "lp_solver_path": { + "friendly_name": "Linear programming solver program path", + "Description": "Set the path to the LP solver. Defaults to ‘/usr/bin/cbc’.", + "input": "text", + "default_value": "/usr/bin/cbc" + }, + "weather_forecast_method": { + "friendly_name": "Weather forecast method", + "Description": "This will define the weather forecast method that will be used. options are 'scrapper' (ClearOutside), 'Solcast', 'solar.forecast' (forecast.solar) and 'csv' to load a CSV file. When loading a CSV file this will be directly considered as the PV power forecast in Watts.", + "input": "select", + "select_options": [ + "scrapper", + "solcast", + "solar.forecast", + "csv" + ], + "default_value": "scrapper" + }, + "maximum_power_from_grid": { + "friendly_name": "Max power from grid", + "Description": "The maximum power that can be supplied by the utility grid in Watts (consumption). Defaults to 9000.", + "input": "int", + "default_value": 9000 + }, + "maximum_power_to_grid": { + "friendly_name": "Max export power to grid", + "Description": "The maximum power that can be supplied to the utility grid in Watts (injection). Defaults to 9000.", + "input": "int", + "default_value": 9000 + }, + "inverter_is_hybrid": { + "friendly_name": "Inverter is a hybrid", + "Description": "Set to True to consider that the installation inverter is hybrid for PV and batteries (Default False)", + "input": "boolean", + "default_value": false + }, + "compute_curtailment": { + "friendly_name": "Set compute curtailment (grid export limit)", + "Description": "Set to True to compute a special PV curtailment variable (Default False)", + "input": "boolean", + "default_value": false + } + }, + "Tariff": { + "load_cost_forecast_method": { + "friendly_name": "Load cost method", + "Description": "Define the method that will be used for load cost forecast. The options are ‘hp_hc_periods’ for peak and non-peak hours contracts, and ‘csv’ to load custom cost from CSV file.", + "input": "select", + "select_options": [ + "hp_hc_periods", + "csv" + ], + "default_value": "hp_hc_periods" + }, + "load_peak_hour_periods": { + "friendly_name": "List peak hour periods", + "Description": "A list of peak hour periods for load consumption from the grid. This is useful if you have a contract with peak and non-peak hours.", + "input": "array.time", + "default_value": { + "period_hp_1": { + "start": "02:54", + "end": "15:24" + }, + "period_hp_2": { + "start": "02:54", + "end": "15:24" + } + }, + "requires": { + "load_cost_forecast_method": "hp_hc_periods" + } + }, + "load_peak_hours_cost": { + "friendly_name": "Peak hours electrical energy cost", + "Description": "The cost of the electrical energy during peak hours", + "input": "float", + "requires": { + "load_cost_forecast_method": "hp_hc_periods" + }, + "default_value": 0.1907 + }, + "load_offpeak_hours_cost": { + "friendly_name": "Off-peak hours electrical energy cost", + "Description": "The cost of the electrical energy during off-peak hours", + "input": "float", + "requires": { + "load_cost_forecast_method": "hp_hc_periods" + }, + "default_value": 0.1419 + }, + "production_price_forecast_method": { + "friendly_name": "PV power production price forecast method", + "Description": "Define the method that will be used for PV power production price forecast. This is the price that is paid by the utility for energy injected into the grid. The options are ‘constant’ for a constant fixed value or ‘csv’ to load custom price forecasts from a CSV file.", + "input": "select", + "select_options": [ + "constant", + "csv" + ], + "default_value": "constant" + }, + "photovoltaic_production_sell_price": { + "friendly_name": "Constant PV power production price", + "Description": "The paid price for energy injected to the grid from excess PV production in €/kWh.", + "input": "float", + "default_value": 0.1419, + "requires": { + "production_price_forecast_method": "constant" + } + } + }, + "Solar System (PV)": { + "pv_module_model": { + "friendly_name": "PV module model name", + "Description": "The PV module model. This parameter can be a list of items to enable the simulation of mixed orientation systems.", + "input": "array.string", + "input_attributes": "_'s", + "default_value": "CSUN_Eurasia_Energy_Systems_Industry_and_Trade_CSUN295_60M" + }, + "pv_inverter_model": { + "friendly_name": "The PV inverter model name", + "Description": "The PV inverter model. This parameter can be a list of items to enable the simulation of mixed orientation systems.", + "input": "array.string", + "input_attributes": "_'s", + "default_value": "Fronius_International_GmbH__Fronius_Primo_5_0_1_208_240__240V_" + }, + "surface_tilt": { + "friendly_name": "The PV panel tilt", + "Description": "The tilt angle of your solar panels. Defaults to 30. This parameter can be a list of items to enable the simulation of mixed orientation systems.", + "input": "array.int", + "default_value": 30 + }, + "surface_azimuth": { + "friendly_name": "The PV azimuth (direction)", + "Description": "The azimuth of your PV installation. Defaults to 205. This parameter can be a list of items to enable the simulation of mixed orientation systems.", + "input": "array.int", + "default_value": 205 + }, + "modules_per_string": { + "friendly_name": "Number of modules per string", + "Description": "The number of modules per string. Defaults to 16. This parameter can be a list of items to enable the simulation of mixed orientation systems.", + "input": "array.int", + "default_value": 16 + }, + "strings_per_inverter": { + "friendly_name": "Number of strings per inverter", + "Description": "The number of used strings per inverter. Defaults to 1. This parameter can be a list of items to enable the simulation of mixed orientation systems.", + "input": "array.int", + "default_value": 1 + } + }, + "Deferrable Loads": { + "number_of_deferrable_loads": { + "friendly_name": "Number of deferrable loads", + "Description": "Define the number of deferrable loads (appliances to shift) to consider. Defaults to 2.", + "input": "int", + "default_value": 2 + }, + "nominal_power_of_deferrable_loads": { + "friendly_name": "Deferrable load nominal power", + "Description": "The nominal (calculated max) power for each deferrable load in Watts.", + "input": "array.float", + "default_value": 3000.0 + }, + "operating_hours_of_each_deferrable_load": { + "friendly_name": "Deferrable load operating hours", + "Description": "The total number of hours that each deferrable load should operate", + "input": "array.int", + "default_value": 0 + }, + "treat_deferrable_load_as_semi_cont": { + "friendly_name": "Deferrable load as semi-continuous (on/off) variable", + "Description": "Semi-continuous variables (True) are variables that must take a value that can be either their maximum or minimum/zero (for example On = Maximum load, Off = 0 W). Non semi-continuous (which means continuous) variables (False) can take any values between their maximum and minimum", + "input": "array.boolean", + "default_value": true + }, + "set_deferrable_load_single_constant": { + "friendly_name": "Deferrable load run single constant per optimization", + "Description": "Define if we should set each deferrable load as a constant fixed value variable with just one startup for each optimization task", + "input": "array.boolean", + "default_value": false + }, + "set_deferrable_startup_penalty": { + "friendly_name": "Set deferrable startup penalty", + "Description": "For penalty P, each time the deferrable load turns on will incur an additional cost of P * number_of_deferrable_loads * cost_of_electricity at that time", + "input": "array.float", + "default_value": 0.0 + }, + "start_timesteps_of_each_deferrable_load": { + "friendly_name": "Deferrable start timestamp", + "Description": "The timestep as from which each deferrable load is allowed to operate (if you don’t want the deferrable load to use the whole optimization time window). If you specify a value of 0 (or negative), the deferrable load will be optimized as from the beginning of the complete prediction horizon window.", + "input": "array.int", + "default_value": 0 + }, + "end_timesteps_of_each_deferrable_load": { + "friendly_name": "Deferrable end timestamp", + "Description": "The timestep before which each deferrable load should operate. The deferrable load is not allowed to operate after the specified time step. If a value of 0 (or negative) is provided, the deferrable load is allowed to operate in the complete optimization window)", + "input": "array.int", + "default_value": 0 + } + }, + "Battery": { + "set_use_battery": { + "friendly_name": "Enable Battery", + "Description": "Set to True if we should consider an energy storage device such as a Li-Ion battery. Defaults to False", + "input": "boolean", + "default_value": false + }, + "set_nocharge_from_grid": { + "friendly_name": "forbid charging battery from grid", + "Description": "Set this to true if you want to forbid charging the battery from the grid. The battery will only be charged from excess PV", + "input": "boolean", + "default_value": false + }, + "set_nodischarge_to_grid": { + "friendly_name": "forbid battery discharge to the grid", + "Description": "Set this to true if you want to forbid discharging battery power to the grid.", + "input": "boolean", + "default_value": true + }, + "set_battery_dynamic": { + "friendly_name": "Set Battery dynamic (dis)charge power limiting", + "Description": "Set a power dynamic limiting condition to the battery power. This is an additional constraint on the battery dynamic in power per unit of time (timestep), which allows you to set a percentage of the battery’s nominal full power as the maximum power allowed for (dis)charge.", + "input": "boolean", + "default_value": false + }, + "battery_dynamic_max": { + "friendly_name": "maximum percentage of battery discharge per timestep", + "Description": "The maximum positive (for discharge) battery power dynamic. This is the allowed power variation (in percentage) of battery maximum power per unit of timestep", + "input": "float", + "default_value": 0.9, + "requires": { + "set_battery_dynamic": true + } + }, + "battery_dynamic_min": { + "friendly_name": "maximum percentage of battery charge per timestep", + "Description": "The maximum negative (for charge) battery power dynamic. This is the allowed power variation (in percentage) of battery maximum power per timestep.", + "input": "float", + "default_value": -0.9, + "requires": { + "set_battery_dynamic": true + } + }, + "weight_battery_discharge": { + "friendly_name": "Add cost weight for battery discharge", + "Description": "An additional weight (currency/ kWh) applied in the cost function to battery usage for discharging", + "input": "float", + "default_value": 1.0 + }, + "weight_battery_charge": { + "friendly_name": "Add cost weight for battery charge", + "Description": "An additional weight (currency/ kWh) applied in the cost function to battery usage for charging", + "input": "float", + "default_value": 1.0 + }, + "battery_discharge_power_max": { + "friendly_name": "Max battery discharge power", + "Description": "The maximum discharge power in Watts", + "input": "int", + "default_value": 1000 + }, + "battery_charge_power_max": { + "friendly_name": "Max battery charge power", + "Description": "The maximum charge power in Watts", + "input": "int", + "default_value": 1000 + }, + "battery_discharge_efficiency": { + "friendly_name": "Battery discharge efficiency", + "Description": "The discharge efficiency. (percentage/100)", + "input": "float", + "default_value": 0.95 + }, + "battery_charge_efficiency": { + "friendly_name": "Battery charge efficiency", + "Description": "The charge efficiency. (percentage/100)", + "input": "float", + "default_value": 0.95 + }, + "battery_nominal_energy_capacity": { + "friendly_name": "Battery total capacity", + "Description": "The total capacity of the battery stack in Wh", + "input": "int", + "default_value": 5000 + }, + "battery_minimum_state_of_charge": { + "friendly_name": "Minimum Battery charge percentage", + "Description": "The minimum allowable battery state of charge. (percentage/100)", + "input": "float", + "default_value": 0.3 + }, + "battery_maximum_state_of_charge": { + "friendly_name": "Maximum Battery charge percentage", + "Description": "The maximum allowable battery state of charge. (percentage/100)", + "input": "float", + "default_value": 0.9 + }, + "battery_target_state_of_charge": { + "friendly_name": "Battery desired percentage after optimization", + "Description": "The desired battery state of charge at the end of each optimization cycle. (percentage/100)", + "input": "float", + "default_value": 0.6 + } + } +} \ No newline at end of file diff --git a/src/emhass/static/script.js b/src/emhass/static/script.js index ad02b578..78f8b336 100644 --- a/src/emhass/static/script.js +++ b/src/emhass/static/script.js @@ -1,419 +1,442 @@ +//configuration for processing index page + //on page reload get saved data window.onload = async function () { + pageSelected = await loadBasicOrAdvanced(); - pageSelected = await loadBasicOrAdvanced(); + //add listener for basic and advanced html switch + document + .getElementById("basicOrAdvanced") + .addEventListener("click", () => SwitchBasicOrAdvanced()); - //add listener for basic and advanced html switch - document.getElementById("basicOrAdvanced").addEventListener("click", () => SwitchBasicOrAdvanced()); + //add listerner for configuration page toggle + document + .getElementById("paramConfig") + .addEventListener("click", () => SwitchBasicOrAdvanced()); }; //add listeners to buttons (based on page) function loadButtons(page) { - switch (page) { - case "advanced": - [ - "dayahead-optim", - "forecast-model-fit", - "forecast-model-predict", - "forecast-model-tune", - "regressor-model-fit", - "regressor-model-predict", - "perfect-optim", - "publish-data", - "naive-mpc-optim" - ].forEach((id) => - document.getElementById(id).addEventListener("click", () => formAction(id, "advanced")) - ); - ["input-plus", "input-minus"].forEach((id) => - document.getElementById(id).addEventListener("click", () => dictInputs(id)) - ); - document.getElementById("input-select").addEventListener("change", () => getSavedData()); - document.getElementById("input-clear").addEventListener("click", () => ClearInputData()); - break; - case "basic": - document.getElementById("dayahead-optim-basic").addEventListener("click", () => formAction("dayahead-optim", "basic")); - break; - } + switch (page) { + case "advanced": + [ + "dayahead-optim", + "forecast-model-fit", + "forecast-model-predict", + "forecast-model-tune", + "regressor-model-fit", + "regressor-model-predict", + "perfect-optim", + "publish-data", + "naive-mpc-optim", + ].forEach((id) => + document + .getElementById(id) + .addEventListener("click", () => formAction(id, "advanced")) + ); + ["input-plus", "input-minus"].forEach((id) => + document + .getElementById(id) + .addEventListener("click", () => dictInputs(id)) + ); + document + .getElementById("input-select") + .addEventListener("change", () => getSavedData()); + document + .getElementById("input-clear") + .addEventListener("click", () => ClearInputData()); + break; + case "basic": + document + .getElementById("dayahead-optim-basic") + .addEventListener("click", () => formAction("dayahead-optim", "basic")); + break; + } } //on check present basic or advanced html inside form element async function loadBasicOrAdvanced(RequestedPage) { - let basicFile = "basic.html"; - let advencedFile = "advanced.html"; - var formContainer = document.getElementById("TabSelection"); //container element to house basic or advanced data - //first check any function arg - if (arguments.length == 1) { - switch (RequestedPage) { - case "basic": - htmlData = await getHTMLData(basicFile); - formContainer.innerHTML = htmlData; - loadButtons("basic"); //load buttons based on basic or advanced - if (testStorage()) { localStorage.setItem("TabSelection", "basic") } //remember mode (save to localStorage) - return "basic"; //return basic to get saved data - case "advanced": - htmlData = await getHTMLData(advencedFile); - formContainer.innerHTML = htmlData; - loadButtons("advanced"); - if (testStorage()) { localStorage.setItem("TabSelection", "advanced") } - getSavedData(); - return "advanced"; - default: - htmlData = await getHTMLData(advencedFile); - formContainer.innerHTML = htmlData; - loadButtons("advanced"); - getSavedData(); - return "advanced"; - } - } - //then check localStorage - if (testStorage()) { - if (localStorage.getItem("TabSelection") !== null && localStorage.getItem("TabSelection") === "advanced") { //if advance - htmlData = await getHTMLData(advencedFile); - formContainer.innerHTML = htmlData; - loadButtons("advanced"); - getSavedData(); - return "advanced"; - } - else { //else run basic (first time) - htmlData = await getHTMLData(basicFile); - formContainer.innerHTML = htmlData; - loadButtons("basic"); - return "basic"; + let basicFile = "basic.html"; + let advencedFile = "advanced.html"; + var formContainer = document.getElementById("TabSelection"); //container element to house basic or advanced data + //first check any function arg + if (arguments.length == 1) { + switch (RequestedPage) { + case "basic": + htmlData = await getHTMLData(basicFile); + formContainer.innerHTML = htmlData; + loadButtons("basic"); //load buttons based on basic or advanced + if (testStorage()) { + localStorage.setItem("TabSelection", "basic"); + } //remember mode (save to localStorage) + return "basic"; //return basic to get saved data + case "advanced": + htmlData = await getHTMLData(advencedFile); + formContainer.innerHTML = htmlData; + loadButtons("advanced"); + if (testStorage()) { + localStorage.setItem("TabSelection", "advanced"); } - } else { - //if localStorage not supported, set to advanced page + getSavedData(); + return "advanced"; + default: htmlData = await getHTMLData(advencedFile); formContainer.innerHTML = htmlData; loadButtons("advanced"); + getSavedData(); return "advanced"; } + } + //then check localStorage + if (testStorage()) { + if ( + localStorage.getItem("TabSelection") !== null && + localStorage.getItem("TabSelection") === "advanced" + ) { + //if advance + htmlData = await getHTMLData(advencedFile); + formContainer.innerHTML = htmlData; + loadButtons("advanced"); + getSavedData(); + return "advanced"; + } else { + //else run basic (first time) + htmlData = await getHTMLData(basicFile); + formContainer.innerHTML = htmlData; + loadButtons("basic"); + return "basic"; + } + } else { + //if localStorage not supported, set to advanced page + htmlData = await getHTMLData(advencedFile); + formContainer.innerHTML = htmlData; + loadButtons("advanced"); + return "advanced"; + } } //on button press, check current displayed page data and switch function SwitchBasicOrAdvanced() { - var formContainerChildID = document.getElementById("TabSelection").firstElementChild.id - if (formContainerChildID === 'basic') { - loadBasicOrAdvanced("advanced") - } - else { - loadBasicOrAdvanced("basic") - } + var formContainerChildID = + document.getElementById("TabSelection").firstElementChild.id; + if (formContainerChildID === "basic") { + loadBasicOrAdvanced("advanced"); + } else { + loadBasicOrAdvanced("basic"); + } } - //get html data from basic.html or advanced.html async function getHTMLData(htmlFile) { - const response = await fetch(`static/` + htmlFile); - blob = await response.blob(); //get data blob - htmlTemplateData = await new Response(blob).text(); //obtain html from blob - return await htmlTemplateData; + const response = await fetch(`static/` + htmlFile); + blob = await response.blob(); //get data blob + htmlTemplateData = await new Response(blob).text(); //obtain html from blob + return await htmlTemplateData; } //function pushing data via post, triggered by button action async function formAction(action, page) { + if (page !== "basic") { + //dont try to get input data in basic mode + var data = inputToJson(page); + } else { + var data = {}; + } //send no data - if (page !== "basic") { //dont try to get input data in basic mode - var data = inputToJson(page); - } - else { var data = {} } //send no data - - if (data !== 0) { //don't run if there is an error in the input (box/list) Json data - showChangeStatus("loading", {}); // show loading div for status - const response = await fetch(`action/` + action, { - //fetch data from webserver.py - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(data), //note that post can only send data via strings - }); - if (response.status == 201) { - showChangeStatus(response.status, {}); - if (page !== "basic") { - saveStorage(); //save to storage if successful - } - return true - } //if successful - else { - showChangeStatus(response.status, await response.json()); - return false - } // else get Log data from response - } else { - showChangeStatus("remove"); //replace loading, show tick or cross with none - return false - } + if (data !== 0) { + //don't run if there is an error in the input (box/list) Json data + showChangeStatus("loading", {}); // show loading div for status + const response = await fetch(`action/` + action, { + //fetch data from webserver.py + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data), //note that post can only send data via strings + }); + if (response.status == 201) { + showChangeStatus(response.status, {}); + if (page !== "basic") { + saveStorage(); //save to storage if successful + } + return true; + } //if successful + else { + showChangeStatus(response.status, await response.json()); + return false; + } // else get Log data from response + } else { + showChangeStatus("remove"); //replace loading, show tick or cross with none + return false; + } } //function in control of status icons of post above async function showChangeStatus(status, logJson) { - var loading = document.getElementById("loader"); //element showing statuses - if (status === "remove") { - //remove all - loading.innerHTML = ""; - loading.classList.remove("loading"); - } else if (status === "loading") { - //show loading logo - loading.innerHTML = ""; - loading.classList.add("loading"); //append class with loading animation styling - } else if (status === 201) { - //if status is 201, then show a tick - loading.classList.remove("loading"); - loading.innerHTML = `✓
`; - getTemplate(); //get updated templates - } else { - //then show a cross - loading.classList.remove("loading"); - loading.innerHTML = `⤬
`; //show cross icon to indicate an error - if (logJson.length != 0) { - document.getElementById("alert-text").textContent = - "\r\n\u2022 " + logJson.join("\r\n\u2022 "); //show received log data in alert box - document.getElementById("alert").style.display = "block"; - document.getElementById("alert").style.textAlign = "left"; - } + var loading = document.getElementById("loader"); //element showing statuses + if (status === "remove") { + //remove all + loading.innerHTML = ""; + loading.classList.remove("loading"); + } else if (status === "loading") { + //show loading logo + loading.innerHTML = ""; + loading.classList.add("loading"); //append class with loading animation styling + } else if (status === 201) { + //if status is 201, then show a tick + loading.classList.remove("loading"); + loading.innerHTML = `✓
`; + getTemplate(); //get updated templates + } else { + //then show a cross + loading.classList.remove("loading"); + loading.innerHTML = `⤬
`; //show cross icon to indicate an error + if (logJson.length != 0) { + document.getElementById("alert-text").textContent = + "\r\n\u2022 " + logJson.join("\r\n\u2022 "); //show received log data in alert box + document.getElementById("alert").style.display = "block"; + document.getElementById("alert").style.textAlign = "left"; } + } } //get rendered html template with containing new table data async function getTemplate() { - //fetch data from webserver.py - let htmlTemplateData = ""; - response = await fetch(`template/table-template`, { - method: "GET", - }); - blob = await response.blob(); //get data blob - htmlTemplateData = await new Response(blob).text(); //obtain html from blob - templateDiv = document.getElementById("template"); //get template container element to override - templateDiv.innerHTML = htmlTemplateData; //override container inner html with new data - var scripts = Array.from(templateDiv.getElementsByTagName("script")); //replace script tags manually - for (const script of scripts) { - var TempScript = document.createElement("script"); - TempScript.innerHTML = script.innerHTML; - script.parentElement.appendChild(TempScript); - } + //fetch data from webserver.py + let htmlTemplateData = ""; + response = await fetch(`template/table-template`, { + method: "GET", + }); + blob = await response.blob(); //get data blob + htmlTemplateData = await new Response(blob).text(); //obtain html from blob + templateDiv = document.getElementById("template"); //get template container element to override + templateDiv.innerHTML = htmlTemplateData; //override container inner html with new data + var scripts = Array.from(templateDiv.getElementsByTagName("script")); //replace script tags manually + for (const script of scripts) { + var TempScript = document.createElement("script"); + TempScript.innerHTML = script.innerHTML; + script.parentElement.appendChild(TempScript); + } } //test localStorage support function testStorage() { - try { - localStorage.setItem("test", { test: "123" }); - localStorage.removeItem("test"); - return true; - } catch (error) { - return false; - } + try { + localStorage.setItem("test", { test: "123" }); + localStorage.removeItem("test"); + return true; + } catch (error) { return false; + } + return false; } //function gets saved data (if any) function getSavedData() { - dictInputs(); //check selected current (List or Box) is correct - if (testStorage()) { - //if local storage exists and works - let selectElement = document.getElementById("input-select"); // select button element - var input_container = document.getElementById("input-container"); // container div containing all dynamic input elements (Box/List) - if ( - localStorage.getItem("input_container_content") && - localStorage.getItem("input_container_content") !== "{}" - ) { - //If items already stored in local storage, then override default - if (selectElement.value == "Box") { - //if Box is selected, show saved json data into box - document.getElementById("text-area").value = localStorage.getItem( - "input_container_content" - ); - } - if (selectElement.value == "List") { - //if List is selected, show saved json data into box - storedJson = JSON.parse( - localStorage.getItem("input_container_content") - ); - if (Object.keys(storedJson).length > 0) { - input_container.innerHTML = ""; - i = 1; - for (const ikey in storedJson) { - input_container.appendChild( - createInputListDiv(ikey, JSON.stringify(storedJson[ikey])) - ); //call function to present each key as an list div element (with saved values) - } - } - } + dictInputs(); //check selected current (List or Box) is correct + if (testStorage()) { + //if local storage exists and works + let selectElement = document.getElementById("input-select"); // select button element + var input_container = document.getElementById("input-container"); // container div containing all dynamic input elements (Box/List) + if ( + localStorage.getItem("input_container_content") && + localStorage.getItem("input_container_content") !== "{}" + ) { + //If items already stored in local storage, then override default + if (selectElement.value == "Box") { + //if Box is selected, show saved json data into box + document.getElementById("text-area").value = localStorage.getItem( + "input_container_content" + ); + } + if (selectElement.value == "List") { + //if List is selected, show saved json data into box + storedJson = JSON.parse( + localStorage.getItem("input_container_content") + ); + if (Object.keys(storedJson).length > 0) { + input_container.innerHTML = ""; + i = 1; + for (const ikey in storedJson) { + input_container.appendChild( + createInputListDiv(ikey, JSON.stringify(storedJson[ikey])) + ); //call function to present each key as an list div element (with saved values) + } } + } } + } } //using localStorage, store json data from input-list(List)/text-area(from input-box) elements for saved state save on page refresh (will save state on successful post) function saveStorage() { - var data = JSON.stringify(inputToJson()); - if (testStorage() && data != "{}") { - //don't bother saving if empty and/or storage don't exist - localStorage.setItem("input_container_content", data); - } + var data = JSON.stringify(inputToJson()); + if (testStorage() && data != "{}") { + //don't bother saving if empty and/or storage don't exist + localStorage.setItem("input_container_content", data); + } } //function gets values from input-list/text-area(from input-box) elements and return json dict object function inputToJson() { - var input_container = document.getElementById("input-container"); //container - let inputListArr = document.getElementsByClassName("input-list"); //list - let inputTextArea = document.getElementById("text-area"); //box - let input_container_child = null; - input_container_child = input_container.firstElementChild; //work out which element is first inside container div - var jsonReturnData = {}; + var input_container = document.getElementById("input-container"); //container + let inputListArr = document.getElementsByClassName("input-list"); //list + let inputTextArea = document.getElementById("text-area"); //box + let input_container_child = null; + input_container_child = input_container.firstElementChild; //work out which element is first inside container div + var jsonReturnData = {}; - if (input_container_child == null) { - //if no elements in container then return empty - return jsonReturnData; - } - //if List return box json - if ( - input_container_child.className == "input-list" && - inputListArr.length > 0 - ) { - //if list is first and if list is greater then 0, otherwise give empty dict + if (input_container_child == null) { + //if no elements in container then return empty + return jsonReturnData; + } + //if List return box json + if ( + input_container_child.className == "input-list" && + inputListArr.length > 0 + ) { + //if list is first and if list is greater then 0, otherwise give empty dict - let jsonTempData = "{"; - for (let i = 0; i < inputListArr.length; i++) { - let key = inputListArr[i].getElementsByClassName("input-key")[0].value; - var value = - inputListArr[i].getElementsByClassName("input-value")[0].value; - //curate a string with list elements to parse into json later - if (key !== "") { - //key must not be empty - if (i !== 0) { - jsonTempData = jsonTempData.concat(","); - } //add comma before every parameter, exuding the first - jsonTempData = jsonTempData.concat('"' + key + '":' + value); - } - } - jsonTempData = jsonTempData.concat("}"); - try { - jsonReturnData = JSON.parse(jsonTempData); - } catch (error) { - //if json error, show in alert box - document.getElementById("alert-text").textContent = - "\r\n" + - error + - "\r\n" + - "JSON Error: String values may not be wrapped in quotes"; - document.getElementById("alert").style.display = "block"; - document.getElementById("alert").style.textAlign = "center"; - return 0; - } + let jsonTempData = "{"; + for (let i = 0; i < inputListArr.length; i++) { + let key = inputListArr[i].getElementsByClassName("input-key")[0].value; + var value = + inputListArr[i].getElementsByClassName("input-value")[0].value; + //curate a string with list elements to parse into json later + if (key !== "") { + //key must not be empty + if (i !== 0) { + jsonTempData = jsonTempData.concat(","); + } //add comma before every parameter, exuding the first + jsonTempData = jsonTempData.concat('"' + key + '":' + value); + } } - //if Box return box json - if ( - input_container_child.className == "input-box" && - inputTextArea.value != "" - ) { - //if Box is first and text is not empty, otherwise give empty dict - try { - jsonReturnData = JSON.parse(inputTextArea.value); - } catch (error) { - //if json error, show in alert box - document.getElementById("alert-text").textContent = "\r\n" + error; - document.getElementById("alert").style.display = "block"; - return 0; - } + jsonTempData = jsonTempData.concat("}"); + try { + jsonReturnData = JSON.parse(jsonTempData); + } catch (error) { + //if json error, show in alert box + document.getElementById("alert-text").textContent = + "\r\n" + + error + + "\r\n" + + "JSON Error: String values may not be wrapped in quotes"; + document.getElementById("alert").style.display = "block"; + document.getElementById("alert").style.textAlign = "center"; + return 0; } - return jsonReturnData; + } + //if Box return box json + if ( + input_container_child.className == "input-box" && + inputTextArea.value != "" + ) { + //if Box is first and text is not empty, otherwise give empty dict + try { + jsonReturnData = JSON.parse(inputTextArea.value); + } catch (error) { + //if json error, show in alert box + document.getElementById("alert-text").textContent = "\r\n" + error; + document.getElementById("alert").style.display = "block"; + return 0; + } + } + return jsonReturnData; } //function creates input list div element (and pass it values if given) function createInputListDiv(ikey, ivalue) { - let div = document.createElement("div"); - div.className = "input-list"; - div.innerHTML = ` + let div = document.createElement("div"); + div.className = "input-list"; + div.innerHTML = `:
`; - if (ikey && ivalue) { - //if value and key is provided (from local storage) then add as elements values - div.getElementsByClassName("input-key")[0].value = String(ikey); - div.getElementsByClassName("input-value")[0].value = String(ivalue); - } + if (ikey && ivalue) { + //if value and key is provided (from local storage) then add as elements values + div.getElementsByClassName("input-key")[0].value = String(ikey); + div.getElementsByClassName("input-value")[0].value = String(ivalue); + } - return div; + return div; } //function assigned to control (add and remove) input (Box and List) elements function dictInputs(action) { - var input_container = document.getElementById("input-container"); // container div containing all dynamic input elements - let selectElement = document.getElementById("input-select"); // select button - let input_container_child = null; - let input_container_child_name = null; - if (input_container.children.length > 0) { - input_container_child = input_container.firstElementChild; // figure out what is the first element inside of container (ie: "text-area" (input-box) or "input-list" (list)) - input_container_child_name = input_container.firstElementChild.className; + var input_container = document.getElementById("input-container"); // container div containing all dynamic input elements + let selectElement = document.getElementById("input-select"); // select button + let input_container_child = null; + let input_container_child_name = null; + if (input_container.children.length > 0) { + input_container_child = input_container.firstElementChild; // figure out what is the first element inside of container (ie: "text-area" (input-box) or "input-list" (list)) + input_container_child_name = input_container.firstElementChild.className; + } + //if list is selected, remove text-area (from Box) element and replace (with input-list) + if (selectElement.value == "List") { + if (action == "input-plus" || input_container_child_name == "input-box") { + //if plus button pressed, or Box element exists + if (input_container_child_name == "input-box") { + input_container_child.remove(); + } + input_container.appendChild(createInputListDiv(false, false)); //call to createInputListDiv function to craft input-list element (with no values) and append inside container element } - //if list is selected, remove text-area (from Box) element and replace (with input-list) - if (selectElement.value == "List") { - if (action == "input-plus" || input_container_child_name == "input-box") { - //if plus button pressed, or Box element exists - if (input_container_child_name == "input-box") { - input_container_child.remove(); - } - input_container.appendChild(createInputListDiv(false, false)); //call to createInputListDiv function to craft input-list element (with no values) and append inside container element - } - if (action == "input-minus") { - //minus button pressed, remove input-list element - if (input_container.children.length > 0) { - let inputListArr = document.getElementsByClassName("input-list"); - let obj = inputListArr.item(inputListArr.length - 1); - obj.innerHTML = ""; - obj.remove(); - } - } + if (action == "input-minus") { + //minus button pressed, remove input-list element + if (input_container.children.length > 0) { + let inputListArr = document.getElementsByClassName("input-list"); + let obj = inputListArr.item(inputListArr.length - 1); + obj.innerHTML = ""; + obj.remove(); + } } - //if box is selected, remove input-list elements and replace (with text-area) - if (selectElement.value == "Box") { - if ( - input_container_child_name == "input-list" || - input_container_child === null - ) { - // if input list exists or no Box element - input_container.innerHTML = ""; //remove input-list list elements via erasing container innerHTML - let div = document.createElement("div"); //add input-box element - div.className = "input-box"; - div.innerHTML = ` + } + //if box is selected, remove input-list elements and replace (with text-area) + if (selectElement.value == "Box") { + if ( + input_container_child_name == "input-list" || + input_container_child === null + ) { + // if input list exists or no Box element + input_container.innerHTML = ""; //remove input-list list elements via erasing container innerHTML + let div = document.createElement("div"); //add input-box element + div.className = "input-box"; + div.innerHTML = ` `; - input_container.appendChild(div); //append inside of container element - } + input_container.appendChild(div); //append inside of container element } + } } //clear stored input data from localStorage (if any), clear input elements async function ClearInputData(id) { - if ( - testStorage() && - localStorage.getItem("input_container_content") !== null - ) { - localStorage.setItem("input_container_content", "{}"); - } - ClearInputElements(); + if ( + testStorage() && + localStorage.getItem("input_container_content") !== null + ) { + localStorage.setItem("input_container_content", "{}"); + } + ClearInputElements(); } //clear input elements async function ClearInputElements() { - let selectElement = document.getElementById("input-select"); - var input_container = document.getElementById("input-container"); - if (selectElement.value == "Box") { - document.getElementById("text-area").value = "{}"; - } - if (selectElement.value == "List") { - input_container.innerHTML = ""; - } + let selectElement = document.getElementById("input-select"); + var input_container = document.getElementById("input-container"); + if (selectElement.value == "Box") { + document.getElementById("text-area").value = "{}"; + } + if (selectElement.value == "List") { + input_container.innerHTML = ""; + } } // //Run day ahead, then publish actions // async function DayheadOptimPublish() { // response = await formAction("dayahead-optim", "basic") -// if (response) { //if successful publish data +// if (response) { //if successful publish data // formAction("publish-data", "basic") // } //} - - - - diff --git a/src/emhass/static/style.css b/src/emhass/static/style.css index fd87ba06..eaf4834f 100644 --- a/src/emhass/static/style.css +++ b/src/emhass/static/style.css @@ -570,6 +570,8 @@ button, .mystyle, .alert, .info, +.section-card, +select, table { border-radius: 7px; /* overflow: visible; */ @@ -578,6 +580,7 @@ table { button, .alert, .info, +.section-card, select { text-transform: none; border-width: 1px; @@ -599,6 +602,8 @@ select { h2 { margin-bottom: .3em; + margin-right: .3em; + margin-left: .3em; } .table_div h4 { @@ -787,7 +792,7 @@ tr:hover td:last-child { .tick { /* tick symbol */ - color: #158b00; + color: #bfebbc; vertical-align: text-top; font-size: 4.0em; animation-name: fadeInOpacity; @@ -798,7 +803,7 @@ tr:hover td:last-child { .cross { /* cross symbol */ - color: #a71515; + color: #e3b7b7; vertical-align: text-top; font-size: 4.0em; animation-name: fadeInOpacity; @@ -941,7 +946,8 @@ select, .input-list input, -.input-box textarea { +.input-box textarea, +#config-box { border-collapse: collapse; border-radius: 7px; border-style: solid; @@ -970,7 +976,223 @@ select, margin: 0; } -/* */ +/* config page */ +#configurationContainer { + border: 1px solid; + border-width: 1px 0px; +} + +#configurationContainer, +.header-footer { + margin-bottom: 5px; + padding: 20px 0px; + border-radius: 7px; + max-width: 90%; + margin: auto; +} + + +.header-footer { + background-color: #0000; + display: flex; + justify-content: space-between; +} + +.header-footer h4, +.header-footer div, +.header-footer a { + line-height: 0; + margin: auto 0; + +} + +/* loading icons */ +.header-footer p { + margin: 20px 0; +} + +.header-footer h4 { + color: darkblue; +} + +.header-footer .feather { + height: 3em !important; + stroke-width: 3 !important; +} + +#save, +#json { + min-width: 15%; + height: auto; + display: block; + min-height: fit-content; + margin-left: auto; + margin-right: 2%; +} + +/* configuration list page */ + +.section-card { + max-width: 95%; + margin-left: auto; + margin-right: auto; + margin-bottom: 1vh; +} + +.section-card h4 { + margin-top: 5px; + background-color: #0000 !important; +} + +.section-card-header { + background-color: #e1e1e15e; + display: flex; + align-items: center; + padding: 0px 10px; + border-bottom: 1px solid rgba(0, 0, 0, 0.355); + /* justify-content: center; */ +} + +.switch, +.section-card-header input { + position: relative; + display: inline-block; + width: 52px; + height: 27px; + margin-left: auto; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: calc(27px - 7px); + width: calc(27px - 7px); + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked+.slider { + background-color: darkblue; +} + +input:checked+.slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +.slider, +.slider:before { + border-radius: 7px +} + +/* param container and content styling */ +.param { + text-align: left; + padding: 5px; + border-bottom: 1px solid rgba(0, 0, 0, 0.355); + transition: 1s; +} + +.param input, +.section-card-header input { + background-color: #ffffff11; + border-radius: 7px; + border: solid 1px; + color: #181818; + min-width: 40%; + max-width: 70%; +} + +.section-card-header input { + min-width: calc(27px - 7px); +} + +.param p, +.param i { + font-size: .7em; + margin-top: 4px; +} + +.param i { + font-size: .7em; + margin-bottom: 5px; +} + +.param p { + padding-right: 5px; + max-width: 777px; +} + +.param h5 { + font-size: 1em; +} + +.param h5, +p { + margin: 5px; + margin-left: 0px; + margin-bottom: 0px; +} + +.param button { + width: 20px; + height: 20px; + line-height: 0; + padding: 1px; + box-shadow: none; + margin-bottom: 5px; +} + +.param-input { + display: block; + float: left; + min-width: 100%; +} + +.param-input input { + min-width: 70%; +} + +.param-input input[type="time"] { + min-width: 35%; +} + +/* when requirement param is not met */ +.requirement-disable { + pointer-events: none; + filter: opacity(25%); +} + +/* configuration box page */ + +#config-box { + min-width: 100%; + min-height: 85vh; +} + + /* mobile only changes */ @@ -989,6 +1211,9 @@ select, } } + + + /* Dark Theme Support */ @media (prefers-color-scheme: dark) { html.adaptive { @@ -1031,6 +1256,9 @@ select, } h2, + h3, + h4, + .header-footer h4, kbd, a { background-color: #111111; @@ -1094,7 +1322,8 @@ select, } .input-list input, - .input-box textarea { + .input-box textarea, + #config-box { background-color: #282928; border-color: #e1e1e1; color: #e1e1e1 @@ -1110,5 +1339,28 @@ select, border-top: 16px solid #ccf3ff; } + input:checked+.slider { + background-color: #ccf3ff; + } -} + .param { + border-color: rgba(255, 255, 255, 0.355); + } + + .param input, + .section-card-header input { + color: #e1e1e1; + } + + .section-card-header { + background-color: #ffffff11; + } + + + #configurationContainer { + background-color: #ffffff07; + border: 0; + } + + +} \ No newline at end of file diff --git a/src/emhass/templates/configuration.html b/src/emhass/templates/configuration.html new file mode 100644 index 00000000..4c406e50 --- /dev/null +++ b/src/emhass/templates/configuration.html @@ -0,0 +1,77 @@ + + + + +