var letters = 100; var savings = 50; var co2 = 0.2;
var s; var dia;
var input; var output;
var rmg; var lmg;
function calcSavings() { return s.value; }
function init() { var cs = getContainerSize();
lmg = new lm(createContainerLayout(), document.getElementById("main")); lmg.init();
rmg = new rm(lmg.layout, lmg);
var sli = document.getElementById("sli"); var rsli = sli.getBoundingClientRect(); s = new slider(letters, 30, rsli.width - 50, sli, getLetterRange());
var ani = document.getElementById("ani"); var cs = getContainerSize(); ani.style.width = cs[0] + "px"; ani.style.height = cs[1] + "px"; ani.style.left = "0px"; ani.style.top = "0px"; dia = new bd(createBarDiagramJson(), ani); dia.init();
render();
initDataInputAndOutput(); }
function onResize() { rmg.checkLayout(lmg.layout); s.onConResize(); }
function getLetterRange() { return [20,3000]; }
function getContainerSize() { // [width, height] return [300, 300]; }
function render() { var actSavings = calcSavings(); var html = "";
s.init();
// console.log(html);
//main.style.position = "absolute";
/*var labels = document.getElementById("labels") labels.style.transform="rotate(90deg)"; var rect = labels.getBoundingClientRect(); console.log(labels.style.left + " " + rect.width); labels.style.left = (s.width/2 - rect.height / 2) + "px"; */ s.initMouseListeners(); }
function renderAni() { var html = "";
html += s.render(); html += mab.render(); html += yab.render(); html += fyab.render(); html += co2b.render();
// console.log(html);
var main = document.getElementById("ani"); main.innerHTML = html; }
function slider(value, height, width, con, range) { this.value = value; this.maxValue = 100; this.height = height; this.width = width - 10; this.pos = 0; this.html = ""; this.isDragged = false; this.mouseMoved = false; this.mousePos = 0; this.lastMousePos = 0; this.con = con; this.range = range; // [0]: lower range; [1]: upper range this.leftOffset = 0; this.setWidth = function(width) { this.width = width; this.calcOffset(); this.render(); } this.calcOffset = function() { var r = this.con.getBoundingClientRect(); this.leftOffset = (r.width - this.width) / 2; } this.onConResize = function() { var r = this.con.getBoundingClientRect(); this.setWidth(r.width - 50); } this.changePos = function(pos) { if(pos < 0) {pos = 0;} if(pos > 100) {pos = 100;} this.pos = pos; } this.calcPos = function() { s.pos = s.value / (s.range[1] - s.range[0]) * 100; if(s.pos < 0) {s.pos = 0;} if(s.pos > 100) {s.pos = 100;} } this.setValue = function(v) { // check range if (v < this.range[0]) {v = this.range[0];} if (v > this.range[1]) {v = this.range[1];} this.vaule = v; } this.calcValueFromPos = function() { s.value = s.range[0] + (s.range[1] - s.range[0]) * s.pos / 100; } this.init = function() { this.calcOffset(); s.render(); return s.html; } this.initMouseListeners = function(){ var bg = document.getElementById("main"); var bt = document.getElementById("sbt");
bt.onmousedown=s.mouseDown; bg.onmouseup=s.mouseUp; bg.onmousemove=s.mouseMove; } this.render = function() {
s.calcPos(); console.log(s.pos);
s.html = ''; s.html += this.renderBackground(); s.html += this.renderBar(); s.html += this.renderButton(); //s.html += this.renderValue(); //s.html += this.renderSubtitle(); s.con.innerHTML = s.html; } this.renderBackground = function() { var bgHtml = '
'; return bgHtml; } this.renderBar = function() { var barHtml = '
'; return barHtml; } this.renderButton = function() { var btHtml = '
'; return btHtml; } /* this.renderValue = function() { var vHtml = '
'; return vHtml; }*/ this.renderSubtitle = function() { var stHtml = '
'; return stHtml; }
this.calcMousePos = function(mousePos) { var r = s.con.getBoundingClientRect(); s.mousePos = mousePos - r.left; } this.calcSliderposByMousePos = function(mousePos) { console.log(mousePos/s.width * 100); var pos = mousePos/s.width * 100; if (pos < 0) {pos = 0;} if (pos > 100) {pos = 100;} return pos; } this.mouseDown = function() { console.log("down"); s.isDragged = true; } this.mouseUp = function() { console.log("up"); s.isDragged = false; if (!s.mouseMoved) { s.mouseClicked(); } s.mouseMoved = false; } this.onmouseleave = function() { s.isDragged = false; } this.mouseMove = function(e) { s.calcMousePos(e.clientX); if (s.isDragged) { s.mouseMoved = true; s.pos = s.calcSliderposByMousePos(s.mousePos); s.calcValueFromPos(); s.bonding(); console.log(s.value); } //console.log(s.isDragged + " " + s.mousePos + " " + s.value); } this.mouseClicked = function() { console.log("mouse: " + s.mousePos); s.pos = s.calcSliderposByMousePos(s.mousePos); s.calcValueFromPos(); s.bonding(); } this.bonding=function() { console.log(s.value); //input.data.data[0].v = round(s.value); //input.setValuesToTfs(true); input.tfvec[0].value = round(s.value); console.log(input.tfvec[0] + " " + input.tfvec[0].value); input.apply(); } }
var aniCount = 0; aniStep = [1,1,1]; aniLoop = function() { setTimeout(function() { if (aniCount < 50) { console.log(aniCount); aniCount++; var values = []; for (var i = 0; i < dia.bars.length; i++) { var bar = dia.bars[i]; //console.log(aniStep[i]); bar.value += aniStep[i]; values[i] = bar.value; //console.log(bar.value); } dia.checkScale(values); dia.render(); aniLoop(); } }, 20); } changeValueAnimated = function(values) { aniCount = 0; for (var i = 0; i < dia.bars.length; i++) { var bar = dia.bars[i]; var diff = values[i] - bar.value; console.log(values[i]); console.log(bar.value); aniStep[i] = diff / 50; } aniLoop(); } function showBar(value, height, width, left, subtext, name, color, colors) { this.value = value; // this.maxValue = 100; this.height = height; this.width = width; this.pos = 0; this.html = ""; this.left = left; this.subtext = subtext; this.name = name; this.scale = [0, 100]; this.color = color; this.colors = colors; this.calcPos = function() { this.pos = this.value / this.scale[1] * 100; } this.init = function() { this.render(); return this.html; } this.changeScale = function(s) { this.scale = s; this.calcPos(); this.render(); } this.changeValue = function(v) { this.value = v; this.calcPos(); this.render(); } this.render = function() { this.calcPos(); this.html = ""; //this.html += this.renderBackground(); this.html += this.renderBar(); this.html += this.renderValue(); //this.html += this.renderSubtitle(); return this.html; } this.renderBackground = function() { var bgHtml = '
'; return bgHtml; } this.renderBar = function() { var barHtml = '
'; return barHtml; } this.renderValue = function() { var vHtml = '
'; return vHtml; } this.renderSubtitle = function() { var stHtml = '
'; return stHtml; } this.rotateLabel = function() { var label = document.getElementById("label" + this.name); var labelleft = label.style.left; var rect = label.getBoundingClientRect(); label.style.left = round(rect.left - rect.width / 2) + "px"; console.log(round(rect.left - rect.width / 2) + "px"); label.style.transform="rotate(90deg)"; console.log(label.style.left + " " + rect.width); //label.style.left = (rect.left + this.width / 2) + "px"; console.log("left" + label.style.left); } this.valeuCurFormat = function(v) { var stringV = round(this.value) + ""; if(v) {stringV = round(v) + "";} var formattedString = ""; if (stringV.length > 3) { var count = 0; for (var i = 0; i < stringV.length - 3; i++) { formattedString += stringV.charAt(i); count++; } formattedString += "."; for(var i = count; i < stringV.length; i++) { formattedString += stringV.charAt(i); } } else { formattedString = stringV; } return formattedString; } } function createBarDiagramJson() { return {t: "Ersparnis", e:[{l: "pro Monat", c: "#88dd88", cs: "#449944", v: 2},{l: "pro Jahr", c: "#66aa66", cs: "#227722", v: 20},{l: "in 5 Jahren", c: "#449944", cs: "#005500", v: 100}]}; } // bar diagram function bd(data, con) { this.data = data; this.con = con; this.scale = [0, 100]; this.width = 100; this.height = 100; this.bars = []; this.init = function() { this.getBounds(); this.initBars(); this.checkScale(); this.render(); } this.initBars = function() { for(var i = 0; i < this.data.e.length; i++) { var e = this.data.e[i]; var numberOfBars = this.data.e.length; this.bars[i] = new showBar(e.v, this.height - 60, (this.width -100) / (numberOfBars) - 15, (this.width - 100) / numberOfBars * i, e.l, "mb", e.c, e.cs); this.bars[i].init(); } } this.getBounds = function() { var r = con.getBoundingClientRect(); this.width = r.width; this.height = r.height; } this.onSizeChanged = function() { this.getBounds(); this.render(); } this.render = function() { var html = ""; html += this.renderBars(); html += this.renderLegend(); html += this.renderTitle(); //console.log(html); this.con.innerHTML = html; } this.renderBars = function() { var html = ""; for(var i = 0; i < this.bars.length; i++) { html += this.bars[i].render(); } return html; } this.renderLegend = function() { var html = '
'; } html += '
'; return html; } this.renderTitle = function() { return '
'; } this.onDataChange = function() { var newValues = []; for(var i = 0; i < this.data.e.length; i++){ newValues[i] = this.data.e[i].v; } changeValueAnimated(newValues); } this.checkScale = function(values) { var maxv = this.scale[0]; if(values) { for(var i = 0; i < values.length; i++) { var v = values[i]; if(maxv < v) { maxv = v;} } } else { for(var i = 0; i < this.data.e.length; i++) { var v = this.data.e[i].v; if(maxv < v) { maxv = v;} } } if (maxv > this.scale[1]) { this.scale[1] = 2 * this.scale[1]; for(var i = 0; i < this.data.e.length; i++){ var e = this.data.e[i]; this.bars[i].changeScale(this.scale); } this.checkScale(); } if (maxv < this.scale[1] / 2) { this.scale[1] = this.scale[1] / 2; for(var i = 0; i < this.data.e.length; i++){ var e = this.data.e[i]; this.bars[i].changeScale(this.scale); } this.checkScale(); } } } function round(value) { return Math.ceil(value); } function createDataModel() { return {type:"dif", name: "sv", b: 50, data: [{l:"Briefe pro Monat", f: "int", p:20, v: -1},{l:"Stundenlohn in €", f:"cur", p: 12.00, v: -1},{l:"Minuten pro Brief", f:"int", p: 2, v: -1},{l:"Nebenkosten pro Brief in €", f:"cur", p: 0.10, v: -1},{l: "Porto in €", f:"cur", p: 0.85, v: -1}]}; } function createOutputRawModell() { return {d:"design", data:[{l: "Ersparnis", f: "cur", v: 5.00, tt: "Ihre monatliche Ersparnis"},{l:"Zeitersparnis in Minuten", f: "int", v:60, tt: "Arbeitszeitersparnis im Monat"},{l:"Ersparnis CO2 in kg", f: "int", v:20, tt: " Die CO²-Ersparnis ergibt sich aus der Emissionseinsparung der Siecom GmbH durch den Erwerb von Umweltschutzzertifikaten nach CDM Gold-Standard - dem Gütesiegel des strengsten existierenden Standards für Klimaschutzprojekte. "}]}; } // Verarbeitungslogik function applyInputData(data) { console.log("transfer"); var time = round(data.data[0].v * data.data[2].v); var co2 = round(data.data[0].v * 0.2); console.log(data.data[0].v + " " + data.data[3].v + " " + data.data[4].v + " " + data.data[1].v); // caculate savings per month var nebenkosten = data.data[3].v; // schon inklusive Steuern wenn erforderlich var arbeitskosten = data.data[1].v * 1.3 * data.data[2].v / 60; var preis = 0.65; if (input.withTax) {preis = preis * 1.19;} var transaktionskosten = 0.05; if (input.withTax) {transaktionskosten = transaktionskosten * 1.19;} var portoersparnis = data.data[4].v - preis - transaktionskosten; console.log(parseFloat(nebenkosten) + " " + arbeitskosten + " " + portoersparnis); var ersparnisProBrief = parseFloat(nebenkosten) + arbeitskosten + portoersparnis; console.log(ersparnisProBrief); var ersparnis = ersparnisProBrief * data.data[0].v console.log(ersparnis); var outputData = createOutputRawModell(); outputData.data[0].v = round(ersparnis); outputData.data[1].v = time; outputData.data[2].v = co2; dia.data.e[0].v = round(ersparnis); dia.data.e[1].v = round(ersparnis) * 12; dia.data.e[2].v = round(ersparnis) * 60; dia.onDataChange(); output.data = outputData; output.render(); } function initDataInputAndOutput() { console.log("initIO"); var data = createDataModel(); var outputData = createOutputRawModell(); input = new dif(data, applyInputData, document.getElementById("inp"), "input"); output = new ddo(outputData, "output", document.getElementById("out")); input.init(); input.setValuesToTfs(); output.init(); } //DatadrivenInputForm dif function dif(data, func, con, name) {//datenmodell as JSON, function to be run when applied, html-contianer-element, name - has to match varialble name in js this.data = data; this.func = func; this.con = con; this.name = name; this.tfvec = []; this.validationVec = []; this.isValid = false; this.withTax = true; this.init = function() { console.log("init input"); this.render(); this.buildTfvec(); } this.buildTfvec= function(){ for (var i = 0; i < this.data.data.length; i++) { var id = this.name + i; this.tfvec[i] = document.getElementById(id); } } this.render = function() { var html = ""; html += this.renderTfs(); //html += this.renderBt(); html += this.renderCheckBox(); console.log(html); this.con.innerHTML = html; } this.renderTfs = function() { var html = "
' + data.l + ' | |
Vorsteuerabzugsberechtigt |
'; } this.checkBoxChanged = function() { var cb = document.getElementById(this.name + "cb"); this.withTax = !cb.checked; console.log(cb.value); var nebenkosten = this.tfvec[3].value; if(this.withTax) { var nebenkostenwt = nebenkosten *1.19; this.tfvec[3].value = nebenkostenwt; } else { var nebenkostenot = nebenkosten / 1.19; this.tfvec[3].value = nebenkostenot; } this.apply(); } this.apply = function() { console.log("apply"); //this.validateTfs(); this.validateForm(); if(this.isValid) { this.transfer(); this.func(data); } } this.transfer = function() { for (var i = 0; i < this.data.data.length; i++) { this.data.data[i].v = this.tfvec[i].value; } this.bonding(); } this.setValuesToTfs = function(bonding) { console.log("input setValuesToTfs" + this.validationVec[0]); if(bonding) { this.tfvec[0].value = data.data[0].v; } else { for (var i = 0; i < this.data.data.length; i++) { var value; if (this.validationVec[i]) { value = this.data.data[i].v; } else { value = this.data.data[i].p; } this.tfvec[i].value = value; } } } this.validateForm = function() { this.validateTfs(); for(var i = 0; i < this.tfvec.length; i++) { if (!this.validationVec[i]) { this.isValid = false; return; } this.isValid = true; } } this.validateTfs = function() { for(var i = 0; i < this.tfvec.length; i++) { this.validationVec[i]=this.validateTf(this.tfvec[i],i); } } this.validateTf = function(tf,i) { if(this.data.data[i].f == "tex") { if(tf.value.length > 0) { return true; } else { return false; } } else { return true; } } this.keypressed = function(e) { console.log(e.code); if (e.code == "Enter") { this.apply(); } } this.bonding=function() { s.value = this.data.data[0].v; render(); } } //DesingerDataOutput function ddo(data, name, con) { this.data = data; this.name = name; this.con = con; this.init = function() { this.render(); } this.render = function() { var html = '
'; for(var i = 0; i < this.data.data.length; i++) { var v = this.data.data[i].v; console.log(v); if(i==0) { v=dia.bars[0].valeuCurFormat(v) + "€"; console.log(v); } var id = this.name + i; html+= this.renderElement(this.data.data[i], id, v); html+= ' | ' } html += ' |
'; console.log(document.getElementById("out")); this.con.innerHTML = html; } this.renderElement = function(data, id, v) { return '
' + data.l + '
|
' + v + '' + data.tt + '
|
'; } }
function createContainerLayout() { return {t: "a", a: "v", e: [ {t: "a", a: "h", e: [ {t: "e", id: "inp", cl: "gcl", pw: 300}, {t: "e", id: "ani", cl: "gcl", pw: 300} ] }, {t: "e", id: "sli", cl: "gcl", pw: 300}, {t: "e", id: "out", cl: "gcl", pw: 300} ] }; }
// containermanagment
// Layoutmanager lm function lm(layout, con){ // gets a layout-json and container this.layout = layout; this.con = con; this.conCache = []; // cache for container this.conIndex = 0; this.init = function() { this.render(); } this.render = function() { this.conIndex = 0; var html = ""; if (this.layout.t == "a") { html += this.renderAlignment(this.layout); } else { html += this.renderElement(this.layout); } console.log(html); this.con.innerHTML = html; this.addContainerFromCache(); } this.renderElement = function(el) { var e = document.getElementById(el.id); if (e) { this.conIndex++; this.conCache[this.conIndex] = e; var eclId = this.getEnclosureId(); var html = '
'; return html; } else { return '
'; } } this.renderAlignment = function(al) { var html = ""; if (al.a == "h") { html += '
'; if (al.e[i].t == "a") { html += this.renderAlignment(al.e[i]); } else { html += this.renderElement(al.e[i]); } html += ' |
'; } else { for (var i = 0; i < al.e.length; i++) { if (al.e[i].t == "a") { html += this.renderAlignment(al.e[i]); } else { html += this.renderElement(al.e[i]); } } } return html; } this.addContainerFromCache = function(){ var lastConIntex = this.conIndex; this.conIndex = 0; for (var i = 1; i < lastConIntex + 1; i++) { this.conIndex++; var eclId = this.getEnclosureId(); var ecl = document.getElementById(eclId); ecl.appendChild(this.conCache[this.conIndex]); } } this.getEnclosureId = function() { return "ecl" + this.conIndex; } } // Resizemanager rm function rm(layout, lm) { this.layout = layout; this.lm = lm; this.cslf = false; this.init = function() { } this.render = function() { this.adjustLayout(); this.lm.layout = this.layout; this.lm.render(); render(); } this.checkLayout = function(l) { if (this.cslf) { this.checkStandardLayout(); } var ww = this.getWindowWidth(); var lw = 0; if (this.layout.t == "a") { lw = this.checkAlignment(l); } else { lw = this.checkElement(l); } console.log(ww + " " + lw); if(lw > ww) { this.adjustLayout(); this.cslf = true; } } this.checkAlignment = function(al) { if (al.a == "h") { var sumPw = 0; for(var i = 0; i < al.e.length; i++) { if(al.e[i].t=="a") { sumPw += this.checkAlignment(al.e[i]); } else { sumPw += this.checkElement(al.e[i]); } } return sumPw; } else { var maxPw = 0; for(var i = 0; i < al.e.length; i++) { if(al.e[i].t=="a") { var pw = this.checkAlignment(al.e[i]); if (pw > maxPw) {maxPw = pw;} } else { var pw = this.checkElement(al.e[i]); if (pw > maxPw) {maxPw = pw;} } } return maxPw; } } this.checkElement = function(el) { return el.pw; } this.adjustLayout = function() { var fhal = this.searchFirstHorAlignment(this.lm.layout); console.log(fhal); if(fhal.t=="a") { if(fhal.a == "h") { fhal.a = "v"; this.render(); } } } this.checkStandardLayout = function() { var l = createContainerLayout(); var lw = 0; if (this.layout.t == "a") { lw = this.checkAlignment(l); } else { lw = this.checkElement(l); } if(lw < this.getWindowWidth()) { console.log(l); this.lm.layout = l; lm.render(); render(); this.cslf = false; } } this.searchFirstHorAlignment = function(al) { if(al.t=="a") { if (al.a == "v") { var fhal = al; for (var i = 0; i < al.e.length; i++) { fhal = this.searchFirstHorAlignment(al.e[i]); if (fhal.t == "a") { if(fhal.a == "h") {return fhal;} } } return fhal; } else { return al; } } return al; } this.getWindowWidth = function() { var e = document.getElementById("main"); var r = e.getBoundingClientRect(); return r.width; } } init();