[FIX] Javascript vernünftig "gestyled" - wenn da schon ein paar tausend Zeilen Code bei herauskommen dann sollen die auch gut ausschauen...

This commit is contained in:
CasparA 2016-05-12 10:16:01 +02:00
parent b3ba905afc
commit 0e20132eaa

161
index.php
View File

@ -36,20 +36,20 @@ EOT;
echo <<<EOT echo <<<EOT
<script> <script>
function populateA(s1,s2){ function populateA(){
var s1 = document.getElementById(s1); var s1 = document.getElementById("fw-dl-1");
var s2 = document.getElementById(s2); var s2 = document.getElementById("fw-dl-2");
var s3 = document.getElementById("slct3"); var s3 = document.getElementById("fw-dl-3");
var s4 = document.getElementById("slct4"); var s4 = document.getElementById("fw-dl-4");
var s5 = document.getElementById("slct5"); var s5 = document.getElementById("fw-dl-5");
var s6 = document.getElementById("slct6"); var s6 = document.getElementById("fw-dl-6");
var img_router_front = document.getElementById("img_router_front"); var img_router_front = document.getElementById("img_router_front");
var img_router_back = document.getElementById("img_router_back"); var img_router_back = document.getElementById("img_router_back");
s2.innerHTML = ""; s2.innerHTML = "";
EOT; EOT;
for( $i=0; $i<count($hersteller); $i++) { for( $i=0; $i<count($hersteller); $i++) {
echo("\nif(s1.value == \"".$hersteller[$i]."\"){\n"); echo("\n if(s1.value == \"".$hersteller[$i]."\"){\n");
echo("var optionArray = [\"|Modell auswählen\""); echo(" var optionArray = [\"|Modell auswählen\"");
$j=0; $j=0;
while( $j<count($router) ) { while( $j<count($router) ) {
if($router[$j]->hersteller == $hersteller[$i]) { if($router[$j]->hersteller == $hersteller[$i]) {
@ -67,7 +67,7 @@ EOT;
$j++; $j++;
} }
echo("];\n"); echo("];\n");
echo("}\n"); echo(" }\n");
} }
echo <<<EOT echo <<<EOT
for(var option in optionArray){ for(var option in optionArray){
@ -97,20 +97,20 @@ EOT;
img_router_front.src = "router_images/keinbild.jpg"; img_router_front.src = "router_images/keinbild.jpg";
img_router_back.src = "router_images/keinbild.jpg"; img_router_back.src = "router_images/keinbild.jpg";
} }
function populateB(s1,s2){ function populateB(){
var s1 = document.getElementById(s1); var s1 = document.getElementById("fw-dl-2");
var s2 = document.getElementById(s2); var s2 = document.getElementById("fw-dl-3");
var s4 = document.getElementById("slct4"); var s4 = document.getElementById("fw-dl-4");
var s5 = document.getElementById("slct5"); var s5 = document.getElementById("fw-dl-5");
var s6 = document.getElementById("slct6"); var s6 = document.getElementById("fw-dl-6");
var img_router_front = document.getElementById("img_router_front"); var img_router_front = document.getElementById("img_router_front");
var img_router_back = document.getElementById("img_router_back"); var img_router_back = document.getElementById("img_router_back");
s2.innerHTML = ""; s2.innerHTML = "";
EOT; EOT;
$i=0; $i=0;
while( $i<count($router) ) { while( $i<count($router) ) {
echo("\nif(s1.value == \"".$router[$i]->modell."\"){\n"); echo("\n if(s1.value == \"".$router[$i]->modell."\"){\n");
echo("var optionArray = [\"|Version auswählen\""); echo(" var optionArray = [\"|Version auswählen\"");
echo(",\"".$i."|".$router[$i]->version."\""); echo(",\"".$i."|".$router[$i]->version."\"");
if( $i<count($router)-1 ) { if( $i<count($router)-1 ) {
while($router[$i]->modell == $router[$i+1]->modell) { while($router[$i]->modell == $router[$i+1]->modell) {
@ -123,7 +123,7 @@ EOT;
} }
} }
echo("];\n"); echo("];\n");
echo("}\n"); echo(" }\n");
$i++; $i++;
} }
echo <<<EOT echo <<<EOT
@ -151,21 +151,21 @@ EOT;
img_router_front.src = "router_images/keinbild.jpg"; img_router_front.src = "router_images/keinbild.jpg";
img_router_back.src = "router_images/keinbild.jpg"; img_router_back.src = "router_images/keinbild.jpg";
} }
function populateC(s1,s2){ function populateC(){
var s1 = document.getElementById(s1); var s1 = document.getElementById("fw-dl-3");
var s2 = document.getElementById(s2); var s2 = document.getElementById("fw-dl-4");
var s5 = document.getElementById("slct5"); var s5 = document.getElementById("fw-dl-5");
var s6 = document.getElementById("slct6"); var s6 = document.getElementById("fw-dl-6");
var img_router_front = document.getElementById("img_router_front"); var img_router_front = document.getElementById("img_router_front");
var img_router_back = document.getElementById("img_router_back"); var img_router_back = document.getElementById("img_router_back");
s2.innerHTML = ""; s2.innerHTML = "";
EOT; EOT;
$i=0; $i=0;
while( $i<count($router) ) { while( $i<count($router) ) {
echo("\nif(s1.value == \"".$i."\"){\n"); echo("\n if(s1.value == \"".$i."\"){\n");
echo("var newImageFront = \"".$router[$i]->imagefront."\";\n"); echo(" var newImageFront = \"".$router[$i]->imagefront."\";\n");
echo("var newImageBack = \"".$router[$i]->imageback."\";\n"); echo(" var newImageBack = \"".$router[$i]->imageback."\";\n");
echo("var optionArray = [\"|Erstinstallation?\""); echo(" var optionArray = [\"|Erstinstallation?\"");
if( ($router[$i]->betafactory == 1) || ($router[$i]->brokenfactory == 1) || ($router[$i]->experimentalfactory == 1) || ($router[$i]->stablefactory == 1) ) { if( ($router[$i]->betafactory == 1) || ($router[$i]->brokenfactory == 1) || ($router[$i]->experimentalfactory == 1) || ($router[$i]->stablefactory == 1) ) {
echo(",\"".$i."J|Ja\""); echo(",\"".$i."J|Ja\"");
} }
@ -173,7 +173,7 @@ EOT;
echo(",\"".$i."N|Nein\""); echo(",\"".$i."N|Nein\"");
} }
echo("];\n"); echo("];\n");
echo("}\n"); echo(" }\n");
$i++; $i++;
} }
echo <<<EOT echo <<<EOT
@ -198,16 +198,16 @@ EOT;
img_router_front.src = newImageFront; img_router_front.src = newImageFront;
img_router_back.src = newImageBack; img_router_back.src = newImageBack;
} }
function populateD(s1,s2){ function populateD(){
var s1 = document.getElementById(s1); var s1 = document.getElementById("fw-dl-4");
var s2 = document.getElementById(s2); var s2 = document.getElementById("fw-dl-5");
var s6 = document.getElementById("slct6"); var s6 = document.getElementById("fw-dl-6");
s2.innerHTML = ""; s2.innerHTML = "";
EOT; EOT;
$i=0; $i=0;
while( $i<count($router) ) { while( $i<count($router) ) {
echo("\nif(s1.value == \"".$i."J\"){\n"); echo("\n if(s1.value == \"".$i."J\"){\n");
echo("var optionArray = [\"|Entwicklungsstadium?\""); echo(" var optionArray = [\"|Entwicklungsstadium?\"");
if( ($router[$i]->betafactory == 1) ) { if( ($router[$i]->betafactory == 1) ) {
echo(",\"".$i."Jbeta|Beta\""); echo(",\"".$i."Jbeta|Beta\"");
} }
@ -221,9 +221,9 @@ EOT;
echo(",\"".$i."Jstable|Stable\""); echo(",\"".$i."Jstable|Stable\"");
} }
echo("];\n"); echo("];\n");
echo("}\n"); echo(" }\n");
echo("\nif(s1.value == \"".$i."N\"){\n"); echo("\n if(s1.value == \"".$i."N\"){\n");
echo("var optionArray = [\"|Entwicklungsstadium?\""); echo(" var optionArray = [\"|Entwicklungsstadium?\"");
if( ($router[$i]->betasysupgrade == 1) ) { if( ($router[$i]->betasysupgrade == 1) ) {
echo(",\"".$i."Nbeta|Beta\""); echo(",\"".$i."Nbeta|Beta\"");
} }
@ -237,7 +237,7 @@ EOT;
echo(",\"".$i."Nstable|Stable\""); echo(",\"".$i."Nstable|Stable\"");
} }
echo("];\n"); echo("];\n");
echo("}\n"); echo(" }\n");
$i++; $i++;
} }
echo <<<EOT echo <<<EOT
@ -257,60 +257,60 @@ EOT;
s6.className += " btn-primary disabled"; s6.className += " btn-primary disabled";
s6.innerHTML = "Download Firmware"; s6.innerHTML = "Download Firmware";
} }
function populateE(s1,s2){ function populateE(){
var s1 = document.getElementById(s1); var s1 = document.getElementById("fw-dl-5");
var s2 = document.getElementById(s2); var s2 = document.getElementById("fw-dl-6");
s2.innerHTML = ""; s2.innerHTML = "";
EOT; EOT;
$i=0; $i=0;
while( $i<count($router) ) { while( $i<count($router) ) {
if( ($router[$i]->betafactory == 1) ) { if( ($router[$i]->betafactory == 1) ) {
echo("\nif(s1.value == \"".$i."Jbeta\"){\n"); echo("\n if(s1.value == \"".$i."Jbeta\"){\n");
echo("var link = \"".$router[$i]->betafactorylink."\";\n"); echo(" var link = \"".$router[$i]->betafactorylink."\";\n");
echo("var linkclass = \" btn-warning\";\n"); echo(" var linkclass = \" btn-warning\";\n");
echo("}\n"); echo(" }\n");
} }
if( ($router[$i]->brokenfactory == 1) ) { if( ($router[$i]->brokenfactory == 1) ) {
echo("\nif(s1.value == \"".$i."Jbroken\"){\n"); echo("\n if(s1.value == \"".$i."Jbroken\"){\n");
echo("var link = \"".$router[$i]->brokenfactorylink."\";\n"); echo(" var link = \"".$router[$i]->brokenfactorylink."\";\n");
echo("var linkclass = \" btn-danger\";\n"); echo(" var linkclass = \" btn-danger\";\n");
echo("}\n"); echo(" }\n");
} }
if( ($router[$i]->experimentalfactory == 1) ) { if( ($router[$i]->experimentalfactory == 1) ) {
echo("\nif(s1.value == \"".$i."Jexp\"){\n"); echo("\n if(s1.value == \"".$i."Jexp\"){\n");
echo("var link = \"".$router[$i]->experimentalfactorylink."\";\n"); echo(" var link = \"".$router[$i]->experimentalfactorylink."\";\n");
echo("var linkclass = \" btn-warning\";\n"); echo(" var linkclass = \" btn-warning\";\n");
echo("}\n"); echo(" }\n");
} }
if( ($router[$i]->stablefactory == 1) ) { if( ($router[$i]->stablefactory == 1) ) {
echo("\nif(s1.value == \"".$i."Jstable\"){\n"); echo("\n if(s1.value == \"".$i."Jstable\"){\n");
echo("var link = \"".$router[$i]->stablefactorylink."\";\n"); echo(" var link = \"".$router[$i]->stablefactorylink."\";\n");
echo("var linkclass = \" btn-success\";\n"); echo(" var linkclass = \" btn-success\";\n");
echo("}\n"); echo(" }\n");
} }
if( ($router[$i]->betasysupgrade == 1) ) { if( ($router[$i]->betasysupgrade == 1) ) {
echo("\nif(s1.value == \"".$i."Nbeta\"){\n"); echo("\n if(s1.value == \"".$i."Nbeta\"){\n");
echo("var link = \"".$router[$i]->betasysupgradelink."\";\n"); echo(" var link = \"".$router[$i]->betasysupgradelink."\";\n");
echo("var linkclass = \" btn-warning\";\n"); echo(" var linkclass = \" btn-warning\";\n");
echo("}\n"); echo(" }\n");
} }
if( ($router[$i]->brokensysupgrade == 1) ) { if( ($router[$i]->brokensysupgrade == 1) ) {
echo("\nif(s1.value == \"".$i."Nbroken\"){\n"); echo("\n if(s1.value == \"".$i."Nbroken\"){\n");
echo("var link = \"".$router[$i]->brokensysupgradelink."\";\n"); echo(" var link = \"".$router[$i]->brokensysupgradelink."\";\n");
echo("var linkclass = \" btn-danger\";\n"); echo(" var linkclass = \" btn-danger\";\n");
echo("}\n"); echo(" }\n");
} }
if( ($router[$i]->experimentalsysupgrade == 1) ) { if( ($router[$i]->experimentalsysupgrade == 1) ) {
echo("\nif(s1.value == \"".$i."Nexp\"){\n"); echo("\n if(s1.value == \"".$i."Nexp\"){\n");
echo("var link = \"".$router[$i]->experimentalsysupgradelink."\";\n"); echo(" var link = \"".$router[$i]->experimentalsysupgradelink."\";\n");
echo("var linkclass = \" btn-warning\";\n"); echo(" var linkclass = \" btn-warning\";\n");
echo("}\n"); echo(" }\n");
} }
if( ($router[$i]->stablesysupgrade == 1) ) { if( ($router[$i]->stablesysupgrade == 1) ) {
echo("\nif(s1.value == \"".$i."Nstable\"){\n"); echo("\n if(s1.value == \"".$i."Nstable\"){\n");
echo("var link = \"".$router[$i]->stablesysupgradelink."\";\n"); echo(" var link = \"".$router[$i]->stablesysupgradelink."\";\n");
echo("var linkclass = \" btn-success\";\n"); echo(" var linkclass = \" btn-success\";\n");
echo("}\n"); echo(" }\n");
} }
$i++; $i++;
} }
@ -371,7 +371,7 @@ EOT;
</h3> </h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<select id="slct1" name="slct1" onchange="populateA(this.id,'slct2')"> <select id="fw-dl-1" name="fw-dl-1" onchange="populateA()">
<option value="">Hersteller auswählen</option> <option value="">Hersteller auswählen</option>
EOT; EOT;
for( $i=0; $i<count($hersteller); $i++) { for( $i=0; $i<count($hersteller); $i++) {
@ -392,7 +392,7 @@ EOT;
</h3> </h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<select id="slct2" name="slct2" onchange="populateB(this.id,'slct3')"></select> <select id="fw-dl-2" name="fw-dl-2" onchange="populateB()"></select>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
</div> </div>
@ -406,7 +406,7 @@ EOT;
</h3> </h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<select id="slct3" name="slct3" onchange="populateC(this.id,'slct4')"></select> <select id="fw-dl-3" name="fw-dl-3" onchange="populateC()"></select>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
</div> </div>
@ -422,7 +422,7 @@ EOT;
</h3> </h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<select id="slct4" name="slct4" onchange="populateD(this.id,'slct5')"></select> <select id="fw-dl-4" name="fw-dl-4" onchange="populateD()"></select>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
</div> </div>
@ -436,7 +436,7 @@ EOT;
</h3> </h3>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<select id="slct5" name="slct5" onchange="populateE(this.id,'slct6')"></select> <select id="fw-dl-5" name="fw-dl-5" onchange="populateE()"></select>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
</div> </div>
@ -452,7 +452,7 @@ EOT;
<div class="panel-body"> <div class="panel-body">
<img src="router_images/keinbild.jpg" id="img_router_back" alt="Router Rückseite" width=200px" style="float:right;"> <img src="router_images/keinbild.jpg" id="img_router_back" alt="Router Rückseite" width=200px" style="float:right;">
<img src="router_images/keinbild.jpg" id="img_router_front" alt="Router Vorderseite" width=200px" style="float:right;"> <img src="router_images/keinbild.jpg" id="img_router_front" alt="Router Vorderseite" width=200px" style="float:right;">
<a href="#" id="slct6" name="slct6" role="button" class="btn btn-primary disabled">Download Firmware</a> <a href="#" id="fw-dl-6" name="fw-dl-6" role="button" class="btn btn-primary disabled">Download Firmware</a>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<img src="images/ccbyncsa.png" alt="CC BY-NC-SA" width="60px"> Die Router Bilder sind von Daniel Krah und sind lizensiert unter einer <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target:"_blank">Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz</a> <img src="images/ccbyncsa.png" alt="CC BY-NC-SA" width="60px"> Die Router Bilder sind von Daniel Krah und sind lizensiert unter einer <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target:"_blank">Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 4.0 International Lizenz</a>
@ -461,7 +461,6 @@ EOT;
</div> </div>
</div> </div>
</div> </div>
<script src="js/jquery-2.2.3.min.js"></script> <script src="js/jquery-2.2.3.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="js/bootstrap.min.js"></script>
<script src="js/validator.min.js"></script> <script src="js/validator.min.js"></script>