Browse Source

Layout Assistent Formulare #5

makro_datasrc
Daniel Quathamer 2 years ago
parent
commit
3a2fd9b2f8
  1. 147
      superx/xml/js/viz/viz_functions.js
  2. 314
      superx/xml/viz_html_chart.xsl

147
superx/xml/js/viz/viz_functions.js

@ -160,7 +160,8 @@ function prepareChartProperties(chartType)
return false; return false;
break; break;
} }
renderForm("chartPropertiesFormDetails",chartProperties,commonChartProperties); renderForm("chartPropertiesForm",chartProperties);
renderFormDetails("chartPropertiesFormDetails",commonChartProperties);
return true; return true;
@ -365,27 +366,26 @@ function fillSelectionResult(selectionRsMetaData)
} }
function renderForm(formDiv,chartProperties,myCommonChartProperties) function renderForm(formDiv,myChartProperties)
{ {
//first empty form: //first empty form:
var myForm=document.getElementById(formDiv); var myForm=document.getElementById(formDiv);
while (myForm.firstChild) { while (myForm.firstChild) {
myForm.removeChild(myForm.firstChild); myForm.removeChild(myForm.firstChild);
} }
/*
const tabElem = document.createElement("table"); const tabElem = document.createElement("table");
//tabElem.caption="Eigenschaften"; for(var k=0;k < myChartProperties.length;k++)
myForm.appendChild(tabElem);
for(var k=0;k < chartProperties.length;k++)
{ {
const rowElem = document.createElement("tr"); const rowElem = document.createElement("tr");
const tdCap = document.createElement("td"); const tdCap = document.createElement("td");
const textnode = document.createTextNode(chartProperties[k].caption); const textnode = document.createTextNode(myChartProperties[k].caption);
tdCap.appendChild(textnode); tdCap.appendChild(textnode);
const tdSelElem = document.createElement("td"); const tdSelElem = document.createElement("td");
const selElem = document.createElement("select"); const selElem = document.createElement("select");
selElem.name=chartProperties[k].name; selElem.name=myChartProperties[k].name;
selElem.id=chartProperties[k].name; selElem.id=myChartProperties[k].name;
fillSelectOptions(selElem,chartProperties[k].getValueResultset(),chartProperties[k].isMandatory); fillSelectOptions(selElem,myChartProperties[k].getValueResultset(),myChartProperties[k].isMandatory);
tdSelElem.appendChild(selElem); tdSelElem.appendChild(selElem);
rowElem.appendChild(tdCap); rowElem.appendChild(tdCap);
@ -393,6 +393,58 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties)
//here values, and then: //here values, and then:
tabElem.appendChild( rowElem); tabElem.appendChild( rowElem);
} }
myForm.appendChild(tabElem);
*/
for(var k=0;k < myChartProperties.length;k++)
{
const fieldElem = document.createElement("div");
fieldElem.classList.add("field");
fieldElem.classList.add("is-grouped");
//label:
const labelElem = document.createElement("div");
labelElem.classList.add("label-container");
const label = document.createElement("label");
label.classList.add("label");
label.classList.add("is-required");
label.classList.add("is-small");
const textnode = document.createTextNode(myChartProperties[k].caption);
label.appendChild(textnode);
labelElem.appendChild(label);
fieldElem.appendChild(labelElem);
//input:
const inputFieldElem = document.createElement("div");
inputFieldElem.classList.add("field");
inputFieldElem.classList.add("is-active");
const inputParaElem = document.createElement("p");
inputParaElem.classList.add("control-new");
const inputSelectElem = document.createElement("div");
inputSelectElem.classList.add("select");
inputSelectElem.classList.add("is-small");
inputSelectElem.classList.add("is-fullwidth");
const selElem = document.createElement("select");
selElem.name=myChartProperties[k].name;
selElem.id=myChartProperties[k].name;
fillSelectOptions(selElem,myChartProperties[k].getValueResultset(),myChartProperties[k].isMandatory);
inputSelectElem.appendChild(selElem);
inputParaElem.appendChild(inputSelectElem);
inputFieldElem.appendChild(inputParaElem);
fieldElem.appendChild(inputFieldElem);
myForm.appendChild(fieldElem);
}
}
function renderFormDetails(formDiv,myCommonChartProperties)
{
//first empty form:
var myForm=document.getElementById(formDiv);
while (myForm.firstChild) {
myForm.removeChild(myForm.firstChild);
}
const tabElem = document.createElement("table");
//tabElem.caption="Eigenschaften";
for(var k=0;k < myCommonChartProperties.length;k++) for(var k=0;k < myCommonChartProperties.length;k++)
{ {
const rowElem = document.createElement("tr"); const rowElem = document.createElement("tr");
@ -426,14 +478,10 @@ function renderForm(formDiv,chartProperties,myCommonChartProperties)
//here values, and then: //here values, and then:
tabElem.appendChild( rowElem); tabElem.appendChild( rowElem);
} }
myForm.appendChild(tabElem); myForm.appendChild(tabElem);
//TODO: myCommonChartProperties auf separatem TAB //TODO: myCommonChartProperties auf separatem TAB
} }
function fillSelectOptions(myCombo,myValues,isMandatory) function fillSelectOptions(myCombo,myValues,isMandatory)
{ {
var optionCounter=0; var optionCounter=0;
@ -595,17 +643,15 @@ for(row=1;row<rowcount;row++)
tableDiv.appendChild(tabElem); tableDiv.appendChild(tabElem);
} }
function createChart() function createChart(chartDivElem)
{ {
chartType=document.getElementById("viz_chart_type").value; chartType=document.getElementById("viz_chart_type").value;
/* var myDiv=document.getElementById(chartDivElem);
if(document.getElementById("dimension1").value=="" || if(myDiv.style.display=="block")
document.getElementById("measure1").value=="" ) myDiv.style.display="none";
{ else
alert("Bitte wählen Sie eine Kategorie und ein Maß"); myDiv.style.display="block";
return false;
}
*/
var selectionRsMetaData=[]; var selectionRsMetaData=[];
var selectionRs=[]; var selectionRs=[];
@ -622,8 +668,8 @@ var gridChartOffset = getCommonChartProperty("gridChartOffset");
var chartWidth=getCommonChartProperty("chartWidth"); var chartWidth=getCommonChartProperty("chartWidth");
var fontSize=getCommonChartProperty("fontSize"); var fontSize=getCommonChartProperty("fontSize");
//svg,data //svg,data
document.getElementById("chartDiv").innerHTML=""; //reset canvas document.getElementById(chartDivElem).innerHTML=""; //reset canvas
var svg = d3.select("#chartDiv").append("svg") var svg = d3.select("#"+chartDivElem).append("svg")
.attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth) .attr("width", chartWidth) //maxBarWidth + barLabelWidth + valueLabelWidth)
//.attr("height", y.range()[1]) //.attr("height", y.range()[1])
.attr("font-family", fontFamily) .attr("font-family", fontFamily)
@ -638,19 +684,19 @@ case "sample":
makeSample(); makeSample();
break; break;
case "bar_x": case "bar_x":
makeBarX(selectionRs); makeBarX(chartDivElem,selectionRs);
break; break;
case "bar_x_alt": case "bar_x_alt":
makeBarX(svg,data); makeBarX(svg,data);
break; break;
case "bar_y": case "bar_y":
makeBarY(selectionRs); makeBarY(chartDivElem,selectionRs);
break; break;
case "area_y": case "area_y":
makeAreaY(selectionRs); makeAreaY(chartDivElem,selectionRs);
break; break;
case "line": case "line":
makeLine(selectionRs); makeLine(chartDivElem,selectionRs);
break; break;
default: default:
alert("Please select a chart type"); alert("Please select a chart type");
@ -775,6 +821,7 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
var myFontFamily=getCommonChartProperty("font-family"); var myFontFamily=getCommonChartProperty("font-family");
var myBgColor=getCommonChartProperty("background-color"); var myBgColor=getCommonChartProperty("background-color");
var myColor=getCommonChartProperty("color"); var myColor=getCommonChartProperty("color");
var myCaption=getCommonChartProperty("chartCaption");
var marginLeftDefault=chartWidth/5; //20% liner Rand var marginLeftDefault=chartWidth/5; //20% liner Rand
var marginBottomDefault=100; var marginBottomDefault=100;
@ -804,7 +851,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
label: measureLabel label: measureLabel
}, },
marks: marksArray, marks: marksArray,
style: styles style: styles,
caption: myCaption
} }
} }
else else
@ -822,7 +870,8 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
label: measureLabel label: measureLabel
}, },
marks: marksArray, marks: marksArray,
style: styles style: styles,
caption:myCaption
} }
@ -831,21 +880,31 @@ function getChartOptions(categoryDim,measureDim,marksArray,chartOrientationVerti
return options; return options;
} }
function makeBarX(selectionRs) { function makeBarX(chartDivElem,selectionRs) {
var categoryDim=document.getElementById("viz_dimension1").value; var categoryDim=document.getElementById("viz_dimension1").value;
var measureDim=document.getElementById("viz_measure1").value; var measureDim=document.getElementById("viz_measure1").value;
var fillDim=document.getElementById("fill").value;
var marksArray=new Array(); var marksArray=new Array();
if(fillDim=="")
marksArray[0]=Plot.barX(selectionRs, marksArray[0]=Plot.barX(selectionRs,
{ {
x: measureDim, x: measureDim,
y: categoryDim y: categoryDim,
fill: "blue"
});
else
marksArray[0]=Plot.barX(selectionRs,
{
x: measureDim,
y: categoryDim,
fill: fillDim
}); });
var options= getChartOptions(categoryDim,measureDim,marksArray,false); var options= getChartOptions(categoryDim,measureDim,marksArray,false);
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById(chartDivElem).appendChild(Plot.plot(options));
} }
function makeBarY(selectionRs) { function makeBarY(chartDivElem,selectionRs) {
var categoryDim=document.getElementById("viz_dimension1").value; var categoryDim=document.getElementById("viz_dimension1").value;
var measureDim=document.getElementById("viz_measure1").value; var measureDim=document.getElementById("viz_measure1").value;
var marksArray=new Array(); var marksArray=new Array();
@ -857,9 +916,9 @@ function makeBarY(selectionRs) {
var options= getChartOptions(categoryDim,measureDim,marksArray,true); var options= getChartOptions(categoryDim,measureDim,marksArray,true);
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById(chartDivElem).appendChild(Plot.plot(options));
} }
function makeAreaY(selectionRs) { function makeAreaY(chartDivElem,selectionRs) {
var categoryDim=document.getElementById("viz_dimension1").value; var categoryDim=document.getElementById("viz_dimension1").value;
var measureDim=document.getElementById("viz_measure1").value; var measureDim=document.getElementById("viz_measure1").value;
var marksArray=new Array(); var marksArray=new Array();
@ -871,9 +930,9 @@ function makeAreaY(selectionRs) {
var options= getChartOptions(categoryDim,measureDim,marksArray,true); var options= getChartOptions(categoryDim,measureDim,marksArray,true);
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById(chartDivElem).appendChild(Plot.plot(options));
} }
function makeLine(selectionRs) { function makeLine(chartDivElem,selectionRs) {
var categoryDim=document.getElementById("viz_dimension1").value; var categoryDim=document.getElementById("viz_dimension1").value;
var measureDim=document.getElementById("viz_measure1").value; var measureDim=document.getElementById("viz_measure1").value;
var marksArray=new Array(); var marksArray=new Array();
@ -891,7 +950,7 @@ function makeLine(selectionRs) {
var options= getChartOptions(categoryDim,measureDim,marksArray,true); var options= getChartOptions(categoryDim,measureDim,marksArray,true);
document.getElementById("chartDiv").appendChild(Plot.plot(options)); document.getElementById(chartDivElem).appendChild(Plot.plot(options));
} }
function makeBarY_alt(svg,data) { function makeBarY_alt(svg,data) {
var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption; var xLabel=rsMetaData[document.getElementById("dimension1").value-1].colcaption;
@ -951,7 +1010,13 @@ function getCommonChartProperty(name)
function showSrcCode() function showSrcCode()
{ {
var myChartDiv= document.getElementById("chartDiv"); var myChartDiv= document.getElementById("chartDiv2");
var mySrcDiv=document.getElementById("chartSVGsrc");
if(mySrcDiv.style.display=="block")
mySrcDiv.style.display="none";
else
mySrcDiv.style.display="block";
var numberOfChildNodes=myChartDiv.childNodes.length; var numberOfChildNodes=myChartDiv.childNodes.length;
var svg_xml =""; var svg_xml ="";
for (var i=0;i<numberOfChildNodes;i++) for (var i=0;i<numberOfChildNodes;i++)
@ -966,7 +1031,7 @@ for (var i=0;i<numberOfChildNodes;i++)
} }
//alert(svg_xml); //alert(svg_xml);
document.getElementById("chartSrc").innerHTML=svg_xml; document.getElementById("chartSrc").innerHTML=svg_xml;
document.getElementById("chartSVGsrc").style.visibility="visible"; //document.getElementById("chartSVGsrc").style.visibility="visible";
/* /*
const selection = window.getSelection(); const selection = window.getSelection();
const range = document.createRange(); const range = document.createRange();

314
superx/xml/viz_html_chart.xsl

@ -164,6 +164,9 @@ commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("background-color","Hintergrundfarbe", false,0, null,"#ffffeb"); var newCommonChartProperty = new commonChartProperty("background-color","Hintergrundfarbe", false,0, null,"#ffffeb");
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("fill","Füllfarbe", false,0, null,"blue");
commonChartProperties.push(newCommonChartProperty);
var newCommonChartProperty = new commonChartProperty("color","Farbe Text- und Diagrammelemente", false,0, null,"#3333ff"); var newCommonChartProperty = new commonChartProperty("color","Farbe Text- und Diagrammelemente", false,0, null,"#3333ff");
commonChartProperties.push(newCommonChartProperty); commonChartProperties.push(newCommonChartProperty);
@ -1296,45 +1299,54 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</script> </script>
</xsl:template> </xsl:template>
<xsl:template name="diagrammdaten"> <xsl:template name="diagrammdaten">
<!--Aufruf/Anzeige Diagrammdaten-->
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong>Datentabelle</strong></label> <label class="label is-required is-small"><strong>Daten-Tabelle</strong></label>
</div> </div>
<span class="separator"> </span> <span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<button class="button is-small is-rounded is-white is-outlined" <button class="button is-small is-rounded is-white is-outlined"
onClick="showDataTable('dataDivTable',rs,rsMetaData,10);"><!--is-focused--> onClick="showDataTable('dataDivTable',rs,rsMetaData,10);">
<span class="icon is-small"><i class="../images/more.svg"></i> <span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" /> <img src="../images/more.svg" title="Laden" />
</span> </span>
</button> </button>
</div> </div>
<div id="dataDiv" class="section">
<div id="dataDiv"> <!--class="section">-->
<div id="dataDivTable"> <!--style="border:thin solid black">--> <div id="dataDivTable"> <!--style="border:thin solid black">-->
</div> </div>
</div> </div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<!--Aufruf/Anzeige Formular Datenauswahl-->
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong>Datenset</strong></label> <label class="label is-required is-small"><strong>Daten-Auswahl</strong></label>
</div> </div>
<span class="separator"> </span> <span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<button class="button is-small is-rounded is-white is-outlined" <button class="button is-small is-rounded is-white is-outlined"
onClick="fillDataSelectionForm('dataSelectionFormDiv');"><!--is-focused--> onClick="fillDataSelectionForm('dataSelectionFormDiv');">
<span class="icon is-small"><i class="../images/more.svg"></i> <span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" /> <img src="../images/more.svg" title="Laden" />
</span> </span>
</button> </button>
</div> </div>
<div id="dataSelectionDiv" class="section"> <div id="dataSelectionDiv"> <!--class="section"-->
<form name="dataSelectionForm" id="dataSelectionForm"> <form name="dataSelectionForm" id="dataSelectionForm">
<div id="dataSelectionFormDiv" style="display:none"> <div id="dataSelectionFormDiv" style="display:none">
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small">Dimension 1</label> <label class="label is-required is-small">Dimension 1</label>
@ -1345,8 +1357,8 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
<div class="field is-active"> <div class="field is-active">
<p class="control-new"> <p class="control-new">
<div class="select is-small is-fullwidth is-focused"> <div class="select is-small is-fullwidth is-focused">
<select class="maskinputPflicht" id="dimension1" name="dimension1"><!--tabindex="210">--> <select class="maskinputPflicht" id="dimension1" name="dimension1" tabindex="210">
<option class="maskinput" value="" selected="selected">Bitte wählen Sie Dimension 1</option> <option class="maskinput" value="" selected="selected"><!--211122BF Bitte wählen Sie Dimension 1--></option>
</select> </select>
</div> </div>
</p> </p>
@ -1369,8 +1381,8 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
<div class="field is-active"> <div class="field is-active">
<p class="control-new"> <p class="control-new">
<div class="select is-small is-fullwidth"> <div class="select is-small is-fullwidth">
<select id="dimension1_fn" name="dimension1_fn"><!-- tabindex="210">--> <select id="dimension1_fn" name="dimension1_fn" tabindex="210">
<option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option> <option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation></option>
</select> </select>
</div> </div>
</p> </p>
@ -1390,14 +1402,15 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small">Dimension 2</label> <label class="label is-required is-small">Dimension 2</label>
</div> </div>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
<span class="separator">&#160;</span> <span class="separator">&#160;</span>
<div class="field is-active"> <div class="field is-active">
<p class="control-new"> <p class="control-new">
<div class="select is-small is-fullwidth is-focused"> <div class="select is-small is-fullwidth is-focused">
<select class="maskinputPflicht" id="dimension2" name="dimension2"><!--tabindex="210">--> <select class="maskinputPflicht" id="dimension2" name="dimension2" tabindex="210">
<option class="maskinput" value="" selected="selected">Bitte wählen Sie Dimension 1</option> <option class="maskinput" value="" selected="selected"><!--211122BFBitte wählen Sie Dimension 2--></option>
</select> </select>
</div> </div>
</p> </p>
@ -1420,7 +1433,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
<div class="field is-active"> <div class="field is-active">
<p class="control-new"> <p class="control-new">
<div class="select is-small is-fullwidth"> <div class="select is-small is-fullwidth">
<select id="dimension2_fn" name="dimension2_fn"><!-- tabindex="210">--> <select id="dimension2_fn" name="dimension2_fn" tabindex="210">
<option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option> <option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option>
</select> </select>
</div> </div>
@ -1449,8 +1462,8 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
<div class="field is-active"> <div class="field is-active">
<p class="control-new"> <p class="control-new">
<div class="select is-small is-fullwidth"> <div class="select is-small is-fullwidth">
<select class="maskinputPflicht" id="measure1" name="measure1"><!-- tabindex="220" >--> <select class="maskinputPflicht" id="measure1" name="measure1" tabindex="230" >
<option class="maskinput" value="" selected="selected">Bitte wählen Sie die Maßangabe</option> <option class="maskinput" value="" selected="selected"><!--211122BF Bitte wählen Sie die Maßangabe--></option>
</select> </select>
</div> </div>
</p> </p>
@ -1479,7 +1492,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
<div class="field is-active"> <div class="field is-active">
<p class="control-new"> <p class="control-new">
<div class="select is-small is-fullwidth is-focused"> <div class="select is-small is-fullwidth is-focused">
<select id="measure1_fn" name="measure1_fn"> <!--tabindex="230">--> <select id="measure1_fn" name="measure1_fn" tabindex="230">
<option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option> <option class="maskinput" value="" selected="selected">Optional: Vordefinierte Transformation</option>
</select> </select>
</div> </div>
@ -1536,44 +1549,47 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</div> </div>
</form> </form>
</div> </div>
<!--Ende Formular Datenauswahl-->
<div id="selectionResultPreview" class="section"> <span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<!-- <!--Aufruf/Anzeige Daten-Vorschau-->
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong>Datenvorschau</strong></label> <label class="label is-required is-small"><strong>Daten-Vorschau</strong></label>
</div> </div>
<span class="separator"> </span>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<button class="button is-small is-rounded is-white is-outlined" <button class="button is-small is-rounded is-white is-outlined"
onClick="selectionResultPreview('selectionResultPreviewTable');"> onClick="selectionResultPreview('selectionResultPreviewTable');">
<span class="icon is-small"><i class="../images/more.svg"></i> <span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" /> <img src="../images/more.svg" title="Laden" />
</span> </span>
</button> </button>
</div>-->
<footer class="card-footer">
<p class="card-footer-item"><button class="button is-link is-outlined is-small" onclick="selectionResultPreview('selectionResultPreviewTable');">Vorschau</button></p>
<!--***Selektionsergebnis
<div id="selectionResultPreview" class="section">
<div id="selectionResultPreviewHeader"><input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Laden" onclick="selectionResultPreview('selectionResultPreviewTable');"></div>
<div id="selectionResultPreviewTable" style="border:thin solid black"></div>
</div> </div>
Selektionsergebnis***-->
<div id="selectionResultPreview"> <!--class="section">-->
<div id="selectionResultPreviewTable" style="display:none"></div>
</div>
<!--footer BF: nach unten verschoben-->
<footer class="card-footer">
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onclick="selectionResultPreview('selectionResultPreviewTable');">Daten-Vorschau</button></p>-->
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p> <p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
<!--****noch anzupassen: <input name="navi" type="hidden" value="true"><input type="hidden" name="tid" value="16000"><input type="hidden" name="UserID" value="4"><input type="hidden" name="reuseresult" value="true"><input type="hidden" name="maxoffset" value=""><input type="hidden" name="contenttype" value="application/jrxml"><input type="hidden" name="irowno" value=""><input type="hidden" name="Köpfe oder Fälle ?" value="studiengang_nr = 1 and fach_nr = 1"><input type="hidden" name="Stichtag" value="6"><input type="hidden" name="Seit Semester" value="20161"><input type="hidden" name="Bis Semester" value="20221"><input type="hidden" name="Studiengang" value=""><input type="hidden" name="Fächer" value=""><input type="hidden" name="Status" value="1,2,3,5,6"><input type="hidden" name="##line##" value="1"><input type="hidden" name="Hörerstatus" value="1=1"><input type="hidden" name="##line##" value="1"><input type="hidden" name="RPTPageOrientation" value="Landscape"><input type="hidden" name="RPTPagination" value="False"></ul>-->
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p> <p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>
</footer> </footer>
<div id="selectionResultPreviewTable" style="display:none">
</div>
</div>
</xsl:template> </xsl:template>
<xsl:template name="diagrammlayout"> <xsl:template name="diagrammlayout">
<div id="chartProperties" class="section">
<!--Formular Allg. Layoutmerkmale-->
<div id="chartProperties"> <!--class="section">-->
<form name="chartPropertiesForm"> <form name="chartPropertiesForm">
<table border="0"> <!--<table border="0">
<tr><td>Ausgabetyp:</td> <tr><td>Ausgabetyp:</td>
<td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" > <td><select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" >
<option class="maskinput" value="">Bitte wählen</option> <option class="maskinput" value="">Bitte wählen</option>
@ -1585,86 +1601,236 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</select> </select>
</td> </td>
</tr> </tr>
</table> </table>-->
<hr />
<div class="label-container">
<label class="label is-required is-small"><strong>Allgemeine Layoutmerkmale</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong>Erweiterte Layouteigenschaften</strong></label> <label class="label is-required is-small">Diagramm-Typ</label>
</div> </div>
<span class="separator"> </span> <div class="field is-active">
<a onClick="showChartPropertiesForm();"><!--is-focused--> <p class="control-new">
<span class="icon is-small"><i class="../images/more.svg"></i> <div class="select is-small is-fullwidth">
<img src="../images/more.svg" title="Laden" /> <select class="maskinputPflicht" id="viz_chart_type" NAME="viz_chart_type" tabindex="200" onChange="prepareChartProperties(this.value)" >
<option class="maskinput" value="" selected="selected">Bitte wählen Sie</option>
<option class="maskinput" value="sample">Beispiel</option>
<option class="maskinput" value="bar_x">Balkendiagramm horizontal (einfach)</option>
<option class="maskinput" value="bar_y">Balkendiagramm vertikal (einfach)</option>
<option class="maskinput" value="line">Liniendiagramm vertikal (einfach)</option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span> </span>
</a> </div>
<div id="chartPropertiesForm"> <!--style="visibility:hidden" class="section"--></div>
<!--Ende Formular Allg. Layoutmerkmale-->
<!--<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Kategorie-Dimension</label>
</div> </div>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<select class="maskinputPflicht" id="measure1" name="measure1">
<option class="maskinput" value="" selected="selected">Bitte wählen Sie</option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div id="chartPropertiesFormDetails" style="display:none"> <span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
</div> </div>
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Maß</label>
</div>
<div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<select class="maskinputPflicht" id="measure1" name="measure1">
<option class="maskinput" value="" selected="selected">Bitte wählen Sie</option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
</div> -->
<!--<div class="field is-grouped"> <!--<div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong>Diagramm-Vorschau</strong></label> <label class="label is-required is-small">Serien-Dimension</label>
</div> </div>
<span class="separator"> </span>
<a onClick="createChart();" > <div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<select class="maskinputPflicht" id="measure1" name="measure1" tabindex="220"
<option class="maskinput" value="" selected="selected">Bitte wählen Sie</option>
</select>
</div>
</p>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<span class="info" onclick="window.open('https://super-ics.de/superx/doku/kern_modul/admin/f_Patcheinspielen.htm','_blank','directories=no,location=no,menubar=no,scrollbars=yes,resizable=yes,toolbar=no,width=800,height=660');">
<figure class="image is-24x24">
<img src="../images/information_grey_liberation.svg" />
</figure>
</span>
</div>-->
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<!--Formular Erweiterte Layoutmerkmale-->
<div class="label-container">
<label class="label is-required is-small"><strong>Erweiterte Layoutmerkmale</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<a
onClick="showChartPropertiesForm();">
<span class="icon is-small"><i class="../images/more.svg"></i> <span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" /> <img src="../images/more.svg" title="Laden" />
</span> </span>
</a> </a>
</div>
-->
<div id="chartPropertiesFormDetails" style="display:none"><p>Eigenschaften</p> </div>
</form> </form>
</div> </div>
<!--Ende Formular Erweiterte Layoutmerkmale-->
<footer class="card-footer"> <span class="separator">&#160;</span>
<p class="card-footer-item"><button class="button is-link is-outlined is-small" onClick="createChart();">Vorschau</button></p> <span class="separator">&#160;</span>
<!--***Selektionsergebnis
<div id="selectionResultPreview" class="section"> <!--Aufruf/Anzeige Layout-Vorschau-->
<div id="selectionResultPreviewHeader"><input type="button" tabindex="10010" class="sx_buttondiv_submit" value="Laden" onclick="selectionResultPreview('selectionResultPreviewTable');"></div> <div class="field is-grouped">
<div id="selectionResultPreviewTable" style="border:thin solid black"></div> <div class="label-container">
<label class="label is-required is-small"><strong>Layout-Vorschau</strong></label>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<button class="button is-small is-rounded is-white is-outlined"
onClick="createChart('chartDiv');">
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</button>
</div> </div>
Selektionsergebnis***-->
<div id="chartCanvas"> <!--class="section"-->
<!--<div id="chartCanvasHeader"> </div>-->
<div id="chartDiv"> <!--style="border:thin solid black"--></div>
<!--<div id="chartCanvasFooter"></div>-->
</div>
<!--footer (BF nach unten verschoben)-->
<footer class="card-footer">
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onClick="createChart();">Layout-Vorschau</button></p>-->
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p> <p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit">Speichern</button></p>
<!--****noch anzupassen: <input name="navi" type="hidden" value="true"><input type="hidden" name="tid" value="16000"><input type="hidden" name="UserID" value="4"><input type="hidden" name="reuseresult" value="true"><input type="hidden" name="maxoffset" value=""><input type="hidden" name="contenttype" value="application/jrxml"><input type="hidden" name="irowno" value=""><input type="hidden" name="Köpfe oder Fälle ?" value="studiengang_nr = 1 and fach_nr = 1"><input type="hidden" name="Stichtag" value="6"><input type="hidden" name="Seit Semester" value="20161"><input type="hidden" name="Bis Semester" value="20221"><input type="hidden" name="Studiengang" value=""><input type="hidden" name="Fächer" value=""><input type="hidden" name="Status" value="1,2,3,5,6"><input type="hidden" name="##line##" value="1"><input type="hidden" name="Hörerstatus" value="1=1"><input type="hidden" name="##line##" value="1"><input type="hidden" name="RPTPageOrientation" value="Landscape"><input type="hidden" name="RPTPagination" value="False"></ul>--> <!--****noch anzupassen: <input name="navi" type="hidden" value="true"><input type="hidden" name="tid" value="16000"><input type="hidden" name="UserID" value="4"><input type="hidden" name="reuseresult" value="true"><input type="hidden" name="maxoffset" value=""><input type="hidden" name="contenttype" value="application/jrxml"><input type="hidden" name="irowno" value=""><input type="hidden" name="Köpfe oder Fälle ?" value="studiengang_nr = 1 and fach_nr = 1"><input type="hidden" name="Stichtag" value="6"><input type="hidden" name="Seit Semester" value="20161"><input type="hidden" name="Bis Semester" value="20221"><input type="hidden" name="Studiengang" value=""><input type="hidden" name="Fächer" value=""><input type="hidden" name="Status" value="1,2,3,5,6"><input type="hidden" name="##line##" value="1"><input type="hidden" name="Hörerstatus" value="1=1"><input type="hidden" name="##line##" value="1"><input type="hidden" name="RPTPageOrientation" value="Landscape"><input type="hidden" name="RPTPagination" value="False"></ul>-->
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p> <p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>
</footer> </footer>
<div id="chartCanvas" class="section">
<div id="chartCanvasHeader">
</xsl:template>
<xsl:template name="diagrammnutzung">
<!-- Aufruf/Anzeige Diagramm-Vorschau-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Diagramm-Vorschau</strong></label>
</div> </div>
<div id="chartDiv" style="border:thin solid black"> <span class="separator">&#160;</span>
</div> <span class="separator">&#160;</span>
<div id="chartCanvasFooter">
<button class="button is-small is-rounded is-white is-outlined"
onClick="createChart('chartDiv2');">
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</button>
</div> </div>
<div id="chartCanvas"> <!--class="section"-->
<!--<div id="chartCanvasHeader"> </div>-->
<div id="chartDiv2"> </div>
<!--<div id="chartCanvasFooter"></div>-->
</div> </div>
</xsl:template>
<xsl:template name="diagrammnutzung">
<div id="chartSVGsrcDiv" class="section">
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<!-- Aufruf/Anzeige SVG-Quellcode-->
<div class="field is-grouped"> <div class="field is-grouped">
<div class="label-container"> <div class="label-container">
<label class="label is-required is-small"><strong>SVG-Quellcode</strong></label> <label class="label is-required is-small"><strong>Diagramm-Quellcode (svg)</strong></label>
</div> </div>
<span class="separator"> </span>
<a onClick="showSrcCode();" ><!--is-focused--> <span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<button class="button is-small is-rounded is-white is-outlined"
onClick="showSrcCode();">
<span class="icon is-small"><i class="../images/more.svg"></i> <span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" /> <img src="../images/more.svg" title="Laden" />
</span> </span>
</a> </button>
</div> </div>
<div id="chartSVGsrcDiv"> <!--class="section">-->
<div id="chartSVGsrc" style="visibility:hidden"> <div id="chartSVGsrc" style="display:none">
<textarea id="chartSrc" name="chartSrc" class="textarea" placeholder="Quellcode..." cols="100" rows="20"></textarea><button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button> <textarea id="chartSrc" name="chartSrc" class="textarea" placeholder="Quellcode..."> <!--cols="100" rows="20"--></textarea><!--<button class="sx_buttondiv_submit" onClick="copySrcCode('chartSrc');">Kopieren</button>-->
</div> </div>
</div> </div>
<!--footer (BF eingefügt *** Klärungsbedarf bzgl. notwendiger Buttons)-->
<footer class="card-footer">
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onClick="createChart();">Diagramm-Vorschau</button></p> -->
<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="submit" onClick="copySrcCode('chartSrc');">Kopieren</button></p>
<!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" type="reset">Zurücksetzen</button></p>-->
</footer>
</xsl:template> </xsl:template>
</xsl:stylesheet> </xsl:stylesheet>

Loading…
Cancel
Save