simplekolecalc/kole.html
vv01f 535520e2e0 add footnote
detail on time range for entropy fee
2023-09-27 21:29:14 +02:00

193 lines
5.7 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<title>Rechner zwischen Brutto-Netto-KoLe</title>
<link rel="stylesheet" href="https://wtf-eg.de/css/style.css"/>
<style>
<!--
@media only screen {
}
-->
@media only screen and (max-width: 600px){
body #wrap { font-size: 2.1em; }
input[type='number'],input+label { display: block;}
}
@media only screen and (min-width: 768px){
label {
display:inline-block;
width: 12ex;
}
body #wrap {
font-size: 1.2em;
}
}
#wrap {
display: inline-block;
}
div fieldset{
margin: 0 auto;
max-width: 50ex;
padding: 2ex;
}
legend{
margin-bottom: 0px;
}
.radiogroup > legend{
min-width: 20ex;
display: inline-block;
float: left;
}
.radiogroup > label{
display: inline;
}
label{ min-width: 20ex; }
input[type='number']{text-align:right;}
input[readonly='readonly']{background-color:#eee;}
h1{
font-size: 2em;
text-align: center;
margin: 1ex auto 2ex auto;
}
#center_footer {
display: flex;
align-items: center;
justify-content: center;
}
.footnotes {
margin-top: 1em;
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="#wrap">
<h1>Rechner zwischen Brutto-Netto-KoLe</h1>
<noscript>
Dieser Rechner ist auf JavaScript angewiesen!
</noscript>
<fieldset>
<legend></legend>
<section class="radiogroup">
<legend>Eingangsgr&ouml;&szlig;e</legend><!--
--><input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/>&nbsp;<label for="bb"><u>B</u>rutto</label><!--
--><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/>&nbsp;<label for="bn"><u>N</u>etto</label><!--
--><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/>&nbsp;<label for="bk"><u>K</u>oLe</label>
</section>
<section>
<div>
<label for="e">Br<u>u</u>tto</label>
<input accesskey="u" type="number" step="0.01" id="e" value="100.00"/>&thinsp;&euro;
</div>
<div>
<label for="u">Umsatzsteuersatz</label>
<input type="number" step="0.01" id="u" value="19.00"/>&thinsp;%
</div>
<div>
<label for="us">Umsatzsteuer</label>
<input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/>&thinsp;&euro;
</div>
<div>
<label for="n">N<u>e</u>tto</label>
<input accesskey="e" type="number" step="0.01" id="n" value="0.00"/>&thinsp;&euro;
</div>
<div>
<label for="ec">Entropie-Tarif¹</label><!-- ggf. k&uuml;nftig Grundlage wie Handbuch/Dokumentation verlinken -->
<select id="ec">
<option value="l" accesskey="l" name="low">Umsatz &leq; 1.000&nbsp;&euro;</option><!-- low: <=1 TEUR -->
<option value="h" accesskey="h" name="high">Umsatz &gt; 1.000&nbsp;&euro;</option><!-- high: >1 TEUR -->
<option value="c" accesskey="c" name="custom">nach&nbsp;Vereinbarung</option><!-- custom: separate agreement -->
</select>
</div>
<div>
<label for="z">Entropieumlagesatz</label>
<input type="number" step="0.01" id="z" value="23.00"/>&thinsp;%
</div>
<div>
<label for="eu">Entropieumlage</label>
<input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/>&thinsp;&euro;
</div>
<div>
<label for="k">K<u>o</u>Le</label>
<input accesskey="o" type="number" step="0.01" id="k" value="0.00"/>&thinsp;&euro;
</div>
</section>
<section>
<button accesskey="r" id="b" type="button">Be<u>r</u>echnen</button>
</section>
<div class="footnotes">
¹Es wird der monatliche Umsatz zugrunde gelegt.
</div>
</fieldset>
<script>
var e=document.getElementById('e');
var u=document.getElementById('u');
var us=document.getElementById('us');
var n=document.getElementById('n');
var z=document.getElementById('z');
var eu=document.getElementById('eu');
var k=document.getElementById('k');
var bb=document.getElementById('bb');
var bn=document.getElementById('bn');
var bk=document.getElementById('bk');
var s = document.getElementById('b');
var c = document.getElementById('ec');
function getFormFloat(f){
return parseFloat(f.value);
}
function roundCents(f){
return f.toFixed(2);
}
s.addEventListener('click', function(){
if(bk.checked){
e.value = roundCents( getFormFloat(k) * ( 1 + getFormFloat(u) / 100 ) / ( 1 - getFormFloat(z) / 100 ) );
n.value = roundCents( getFormFloat(k) / ( 1 - getFormFloat(z) / 100 ) );
}else if(bb.checked){
k.value = roundCents( getFormFloat(e) / ( 1 + getFormFloat(u) / 100 ) * ( 1 - getFormFloat(z) / 100 ) );
n.value = roundCents( getFormFloat(e) / ( 1 + getFormFloat(u) / 100 ) );
}else if(bn.checked){
e.value = roundCents( getFormFloat(n) * ( 1 + getFormFloat(u) / 100 ) );
k.value = roundCents( getFormFloat(n) * ( 1 - getFormFloat(z) / 100 ) );
}
us.value = roundCents(e.value * getFormFloat(u) / 100 );
eu.value = roundCents(n.value * getFormFloat(z) / 100 );
});
e.addEventListener('change', function(){bb.checked = true;});
n.addEventListener('change', function(){bn.checked = true;});
c.addEventListener('change', function(){
var selInd=this.selectedIndex;
console.log('Entropie-Tarif: '+selInd+'('+z.disabled+': '+z.value+')');
switch(selInd){
case 0: //low: <1.000 EUR revenue
//23.0 %
z.value='23.00';
z.disabled=true;
break;;
case 1: //high: >1.000 EUR revenue
//11.5 %
z.disabled=true;
z.value='11.50';
break;;
case 2: //custom: according toseparate agreement
z.disabled=false;
//~ z.focus();
break;;
}
});
// set entropy tax to standard value
c.selectedIndex=0;
z.value='23.00';
z.disabled=true;
// calc
s.click();
</script>
<div id="center_footer">
<p>Der Quellcode befindet sich unter <a href="https://git.wtf-eg.de/wtf-eg/simplekolecalc">https://git.wtf-eg.de/wtf-eg/simplekolecalc</a>. </p>
</div>
</div>
</body>
</html>