forked from gnibeil/simplekolecalc
193 lines
5.7 KiB
HTML
193 lines
5.7 KiB
HTML
<!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öße</legend><!--
|
||
--><input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/> <label for="bb"><u>B</u>rutto</label><!--
|
||
--><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/> <label for="bn"><u>N</u>etto</label><!--
|
||
--><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/> <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"/> €
|
||
</div>
|
||
<div>
|
||
<label for="u">Umsatzsteuersatz</label>
|
||
<input type="number" step="0.01" id="u" value="19.00"/> %
|
||
</div>
|
||
<div>
|
||
<label for="us">Umsatzsteuer</label>
|
||
<input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/> €
|
||
</div>
|
||
<div>
|
||
<label for="n">N<u>e</u>tto</label>
|
||
<input accesskey="e" type="number" step="0.01" id="n" value="0.00"/> €
|
||
</div>
|
||
<div>
|
||
<label for="ec">Entropie-Tarif ¹</label><!-- ggf. künftig Grundlage wie Handbuch/Dokumentation verlinken -->
|
||
<select id="ec">
|
||
<option value="l" accesskey="l" name="low">Umsatz ≤ 1.000 €</option><!-- low: <=1 TEUR -->
|
||
<option value="h" accesskey="h" name="high">Umsatz > 1.000 €</option><!-- high: >1 TEUR -->
|
||
<option value="c" accesskey="c" name="custom">nach Vereinbarung</option><!-- custom: separate agreement -->
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="z">Entropieumlagesatz</label>
|
||
<input type="number" step="0.01" id="z" value="23.00"/> %
|
||
</div>
|
||
<div>
|
||
<label for="eu">Entropieumlage</label>
|
||
<input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/> €
|
||
</div>
|
||
<div>
|
||
<label for="k">K<u>o</u>Le</label>
|
||
<input accesskey="o" type="number" step="0.01" id="k" value="0.00"/> €
|
||
</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>
|