if(window.enbw === undefined) window.enbw = {};
window.enbw.ags = "08327054";
window.enbw.baseUrl = "https:\/\/dabib.netze-bw.de\/";
if(window.enbw.netzlive === undefined) window.enbw.netzlive = {};
window.enbw.netzlive.einspeisungProzent = "14";
let initialEinspeisungProzent = 0;;
document.addEventListener('readystatechange', () => {
if(document.readyState === 'complete') {
const liveDatenButton = document.getElementById('live-button');
if(liveDatenButton) {
liveDatenButton.addEventListener('click', toggleLiveData);
}
const einspeisungPieElement = document.getElementById('aktuelle-einspeisung-pie');
initialEinspeisungProzent = einspeisungPieElement.style.getPropertyValue('--akutelle-erzeugung-p');
startLiveData();
updateEinspeisungVerbrauchTextElement();
const elementsWithValues = document.querySelectorAll('[id$="-wert"]');
elementsWithValues.forEach(element => {
if(element.innerHTML.includes('.')) {
element.innerHTML = element.innerHTML.replace('.', ',');
}
});
window.parent.postMessage('resize');
}
})
function setCurrentTime(startTime, endTime) {
const elements = document.getElementsByClassName('strom-monitoring-live-time');
const startTimeDate = new Date(startTime);
const startTimeHours = startTimeDate.getHours();
const startTimeHour = startTimeHours < 10 ? '0' + startTimeHours : startTimeHours;
const startTimeMinutes = startTimeDate.getMinutes();
const startTimeMinute = startTimeMinutes < 10 ? '0' + startTimeMinutes : startTimeMinutes;
const startTimeString = startTimeHour + ':' + startTimeMinute;
const endTimeDate = new Date(endTime);
const endTimeHours = endTimeDate.getHours();
const endTimeHour = endTimeHours < 10 ? '0' + endTimeHours : endTimeHours;
const endTimeMinutes = endTimeDate.getMinutes();
const endTimeMinute = endTimeMinutes < 10 ? '0' + endTimeMinutes : endTimeMinutes;
const endTimeString = endTimeHour + ':' + endTimeMinute;
Array.from(elements).forEach(element => {
element.innerHTML = startTimeString + " - " + endTimeString;
});
}
function toggleElementVisibility(elementId) {
const element = document.getElementById(elementId);
const elementLive = document.getElementById(elementId + '-live');
if(element) {
element.classList.toggle('tw-hidden');
}
if(elementLive) {
elementLive.classList.toggle('tw-hidden');
}
}
function updateEinspeisungProzent() {
const einspeisungProzentWertElement = document.getElementById('einspeisung-prozent-wert');
einspeisungProzentWertElement.innerHTML = window.enbw.netzlive.einspeisungProzent;
}
window.isLive = true
async function toggleLiveData() {
window.isLive = !window.isLive;
toggleElementVisibility('strom-monitoring');
toggleElementVisibility('details-stromverbrauch');
toggleElementVisibility('details-stromerzeugung');
toggleElementVisibility('hint-text-netzlive');
toggleElementVisibility('intro-text-netzlive');
const aktuelleErzeugungBorderElement = document.getElementById('aktuelle-erzeugung-pie-border');
if(window.isLive) {
aktuelleErzeugungBorderElement.classList.add('rotate');
} else {
aktuelleErzeugungBorderElement.classList.remove('rotate');
const aktuelleErzeugungPieElement = document.getElementById('aktuelle-einspeisung-pie');
aktuelleErzeugungPieElement.style.setProperty("--akutelle-erzeugung-p", initialEinspeisungProzent);
}
const liveButton = document.getElementById('live-button-label');
liveButton.innerHTML = window.isLive ? "Energiedaten 2023 anzeigen" : 'Live Daten anzeigen';
if(window.isLive) {
await startLiveData();
} else {
await stopLiveData();
}
window.parent.postMessage('resize');
}
let liveDataInterval = null;
async function startLiveData() {
updateLiveData();
const aktuelleErzeugungBorderElement = document.getElementById('aktuelle-erzeugung-pie-border');
aktuelleErzeugungBorderElement.classList.add('rotate');
const now = new Date();
const minutes = now.getMinutes();
const minutesToNextQuarter = 15 - (minutes % 15);
// run function after minutesToNextQuarter minutes
setTimeout(() => {
updateLiveData();
// as soon as the next update has passed, update every 15min
liveDataInterval = setInterval(() => {
updateLiveData()
}, 1000 * 60 * 15);
}, minutesToNextQuarter * 60000);
}
function extractData(data, whitelist) {
let defaultObj = {
summe: 0,
startTime: 0,
endTime: 0,
};
if(!data) return defaultObj;
defaultObj.startTime = data.at(0).startzeitpunkt;
defaultObj.endTime = data.at(0).endzeitpunkt;
const map = genericyDataToMap(data, whitelist);
defaultObj = {
...defaultObj,
...map
}
const valueSum = Object.values(map).reduce((acc, item) => {
if(!whitelist.includes(item.energietraeger)) {
return acc;
}
return acc + item[einheitWerKey];
}, 0);
defaultObj.summe = valueSum;
const sum = Math.round(valueSum * 100) / 100;
defaultObj.roundedSumme = sum;
return defaultObj;
}
function updateEinspeisungVerbrauchProzentElements(einspeisung, verbrauch) {
const einspeiseProzentWert = Math.round(einspeisung.roundedSumme / verbrauch.roundedSumme * 100);
const einspeisungProzentWertElement = document.getElementById('einspeisung-prozent-wert');
einspeisungProzentWertElement.classList.add('loaded');
if(!isNaN(einspeiseProzentWert)) {
einspeisungProzentWertElement.innerHTML = einspeiseProzentWert;
const erzeugungPieElement = document.getElementById('aktuelle-einspeisung-pie');
erzeugungPieElement.style.setProperty("--akutelle-erzeugung-p", einspeiseProzentWert);
}
const deltaStromLabel = document.getElementById('zusaetzlich-benoetigter-strom-chart-label-live');
if(einspeisung.roundedSumme >= verbrauch.roundedSumme) {
deltaStromLabel.innerHTML = 'Zusätzlich eingespeist';
} else {
deltaStromLabel.innerHTML = 'Zusätzlich benötigter Strom';
}
}
function getLiveEinspeisungVerbrauchText(prozent) {
if(prozent < 100) return 'aktuell weniger lokale Stromeinspeisung als Stromverbrauch';
if(prozent === 100) return 'aktuell gleichviel lokale Stromeinspeisung wie Stromverbrauch';
if(prozent > 100) return 'aktuell mehr lokale Stromeinspeisung als Stromverbrauch';
}
function getPastEinspeisungVerbrauchText(prozent) {
if(prozent < 100) return "weniger lokale Stromeinspeisung als Stromverbrauch in 2023";
if(prozent === 100) return "gleichviel lokale Stromeinspeisung wie Stromverbrauch in 2023";
if(prozent > 100) return "mehr lokale Stromeinspeisung als Stromverbrauch in 2023";
}
function getEinspeisungVerbrauchText(prozent, isLive = false) {
return isLive ? getLiveEinspeisungVerbrauchText(prozent) : getPastEinspeisungVerbrauchText(prozent);
}
function updateEinspeisungVerbrauchTextElement() {
const prozentElement = document.getElementById('einspeisung-prozent-wert');
const prozentValue = Number.parseInt(prozentElement.innerHTML);
if(Number.isNaN(prozentValue)) return;
const text = getEinspeisungVerbrauchText(prozentValue, window.isLive);
const textElement = document.getElementById('header-plot-text-netzlive-live');
textElement.innerHTML = text;
}
function updateMonitoringElements(einspeisung, verbrauch) {
setValueToElement('wert-eingespeiste-energie-live', einspeisung.roundedSumme);
setValueToElement('wert-verbrauchte-energie-live', verbrauch.roundedSumme);
const zusaetzlicherStrom = Math.round(Math.abs(einspeisung.roundedSumme - verbrauch.roundedSumme) * 100) / 100;
setValueToElement('wert-zusaetzliche-energie-live', zusaetzlicherStrom < 0 ? 0 : zusaetzlicherStrom);
const r = document.querySelector(':root');
let maxValue = Math.max(einspeisung.roundedSumme, verbrauch.roundedSumme, zusaetzlicherStrom);
if(maxValue === 0) maxValue = 1;
r.style.setProperty('--uebersicht-max-hoehe-live', maxValue);
updateMonitoringCssVariables('stromerzeugung-kommune-chart-live', '--uebersicht-stromerzeugung-kommune-percent-live', einspeisung.roundedSumme / maxValue * 100);
updateMonitoringCssVariables('stromverbrauch-kommune-chart-live', '--uebersicht-stromverbrauch-kommune-percent-live', verbrauch.roundedSumme / maxValue * 100);
updateMonitoringCssVariables('zusaetzliche-benoetigter-strom-chart-live', '--uebersicht-zusaetzlicher-strom-percent-live', zusaetzlicherStrom / maxValue * 100);
}
function updateMonitoringCssVariables(elementClass, property, value) {
const elements = document.getElementsByClassName(elementClass);
Array.from(elements).forEach(element => {
element.style.setProperty(property, value);
});
}
async function updateLiveData() {
try {
const [ fetrchedEinspeisungData, fetchedVerbrauchData ] = await Promise.all([
fetchLiveData(window.enbw.ags, 'Einspeisung'),
fetchLiveData(window.enbw.ags, 'Verbrauch')
]);
const einspeisungWhitelist = ['PV', 'Wind', 'Biomasse', 'Wasser', 'Kraftwärmekopplung'];
const einspeisungData = extractData(fetrchedEinspeisungData, einspeisungWhitelist);
const verbrauchWhitelist = ['Gewerbe', 'Haushalt', 'Landwirtschaft', 'Elektrowärme', 'Wärmepumpen', 'klein Gewerbe', 'Straßenbeleuchtung', 'E-Mobilität Ladesäulen'];
const verbrauchData = extractData(fetchedVerbrauchData, verbrauchWhitelist);
updateStromverbrauchElements(verbrauchData, einheitWerKey);
updateStromerzeugungElements(einspeisungData, einheitWerKey);
updateEinspeisungVerbrauchProzentElements(einspeisungData, verbrauchData);
updateEinspeisungVerbrauchTextElement();
updateMonitoringElements(einspeisungData, verbrauchData);
setCurrentTime(einspeisungData.startTime, einspeisungData.endTime);
window.parent.postMessage('resize');
} catch (error) {
console.log(error)
}
}
function stopLiveData() {
liveDataInterval && clearInterval(liveDataInterval);
const einspeisungProzentWertElement = document.getElementById('einspeisung-prozent-wert');
einspeisungProzentWertElement.innerHTML = window.enbw.netzlive.einspeisungProzent;
updateEinspeisungVerbrauchTextElement();
}
function updateStromerzeugungElements(data, einheit) {
setValueToElement('details-stromerzeugung-gesamt-wert-live', data.roundedSumme);
setValueToElement('details-stromerzeugung-photovoltaik-wert-live', data['PV'][einheit]);
setValueToElement('details-stromerzeugung-wasser-wert-live', data['Wasser'][einheit]);
setValueToElement('details-stromerzeugung-biomasse-wert-live', data['Biomasse'][einheit]);
setValueToElement('details-stromerzeugung-wind-wert-live', data['Wind'][einheit]);
setValueToElement('details-stromerzeugung-kwk-wert-live', data['Kraftwärmekopplung'][einheit]);
const gesamtWert = 100 / data.summe;
const photovoltaikWert = gesamtWert * data['PV'][einheit];
const wasserWert = photovoltaikWert + (gesamtWert * data['Wasser'][einheit]);
const biomasseWert = wasserWert + (gesamtWert * data['Biomasse'][einheit]);
const windWert = biomasseWert + (gesamtWert * data['Wind'][einheit]);
const kwkWert = windWert + (gesamtWert * data['Kraftwärmekopplung'][einheit]);
updateStromerzeugungCssVariable('details-stromerzeugung-gesamt-wert-live', 100);
updateStromerzeugungCssVariable('details-stromerzeugung-photovoltaik-wert-live', photovoltaikWert);
updateStromerzeugungCssVariable('details-stromerzeugung-wasser-wert-live', wasserWert);
updateStromerzeugungCssVariable('details-stromerzeugung-biomasse-wert-live', biomasseWert);
updateStromerzeugungCssVariable('details-stromerzeugung-wind-wert-live', windWert);
updateStromerzeugungCssVariable('details-stromerzeugung-kwk-wert-live', kwkWert);
}
function updateStromverbrauchElements(data, einheit) {
setValueToElement('details-stromverbrauch-gesamt-wert-live', data.roundedSumme);
setValueToElement('details-stromverbrauch-gewerbe-wert-live', data['Gewerbe'][einheit]);
setValueToElement('details-stromverbrauch-haushalt-wert-live', data['Haushalt'][einheit]);
setValueToElement('details-stromverbrauch-landwirtschaft-wert-live', data['Landwirtschaft'][einheit]);
setValueToElement('details-stromverbrauch-elektrowaerme-wert-live', data['Elektrowärme'][einheit]);
setValueToElement('details-stromverbrauch-waermepumpe-wert-live', data['Wärmepumpen'][einheit]);
setValueToElement('details-stromverbrauch-kleingewerbe-wert-live', data['klein Gewerbe'][einheit]);
setValueToElement('details-stromverbrauch-strassenbeleuchtung-wert-live', data['Straßenbeleuchtung'][einheit]);
setValueToElement('details-stromverbrauch-elektromobilitaet-wert-live', data['E-Mobilität Ladesäulen'][einheit]);
const gesamtWert = 100 / data.summe;
const gewerbeWert = gesamtWert * data['Gewerbe'][einheit];
const haushaltWert = gewerbeWert + (gesamtWert * data['Haushalt'][einheit]);
const landwirtschaftWert = haushaltWert + (gesamtWert * data['Landwirtschaft'][einheit]);
const elektrowaermeWert = landwirtschaftWert + (gesamtWert * data['Elektrowärme'][einheit]);
const waermepumpeWert = elektrowaermeWert + (gesamtWert * data['Wärmepumpen'][einheit]);
const kleingewerbeWert = waermepumpeWert + (gesamtWert * data['klein Gewerbe'][einheit]);
const strassenbeleuchtungWert = kleingewerbeWert + (gesamtWert * data['Straßenbeleuchtung'][einheit]);
const elektromobilitaetWert = strassenbeleuchtungWert + (gesamtWert * data['E-Mobilität Ladesäulen'][einheit]);
updateStromverbrauchCssVariable('details-stromverbrauch-gesamt-wert-live', 100);
updateStromverbrauchCssVariable('details-stromverbrauch-gewerbe-wert-live', gewerbeWert);
updateStromverbrauchCssVariable('details-stromverbrauch-haushalt-wert-live', haushaltWert);
updateStromverbrauchCssVariable('details-stromverbrauch-landwirtschaft-wert-live', landwirtschaftWert);
updateStromverbrauchCssVariable('details-stromverbrauch-elektrowaerme-wert-live', elektrowaermeWert);
updateStromverbrauchCssVariable('details-stromverbrauch-waermepumpe-wert-live', waermepumpeWert);
updateStromverbrauchCssVariable('details-stromverbrauch-kleingewerbe-wert-live', kleingewerbeWert);
updateStromverbrauchCssVariable('details-stromverbrauch-strassenbeleuchtung-wert-live', strassenbeleuchtungWert);
updateStromverbrauchCssVariable('details-stromverbrauch-elektromobilitaet-wert-live', elektromobilitaetWert);
}
async function fetchLiveData(ags, bilanzTyp) {
try {
let localAgs = ags + '';
const url = window.enbw.baseUrl + 'netzlive/' + bilanzTyp.toLowerCase() + '/' + localAgs;
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data', error);
}
}
const einheitWerKey = 'mengeKwh';
function genericyDataToMap(data, keys) {
const obj = keys.reduce((acc, energietraeger) => {
acc[energietraeger] = {
energietraeger,
mengeKwh: 0
};
return acc;
}, {});
return data.reduce((acc, item) => {
item[einheitWerKey] = Math.round(item[einheitWerKey] * 100) / 100;
acc[item.energietraeger] = item;
return acc;
}, obj);
}
function updateStromerzeugungCssVariable(id, value) {
const r = document.getElementById('details-stromerzeugung-live')
r.style.setProperty('--' + id, value);
}
function updateStromverbrauchCssVariable(id, value) {
const r = document.getElementById('details-stromverbrauch-live')
r.style.setProperty('--' + id, value);
}
function setValueToElement(id, value) {
const element = document.getElementById(id);
if(element) {
let v = (value + '').replace('.', ',');
element.innerHTML = v;
}
}