SuperX
/
viz
6
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Wiki Activity
Browse Source

Layout Assistent Formulare #5

makro_datasrc
Daniel Quathamer 2 years ago
parent
1e319d0b1a
commit
3a2fd9b2f8
2 changed files with 409 additions and 178 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 147
      superx/xml/js/viz/viz_functions.js
  2. 424
      superx/xml/viz_html_chart.xsl

147
superx/xml/js/viz/viz_functions.js
Unescape View File

@ -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();

424
superx/xml/viz_html_chart.xsl
Unescape View File

@ -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);
@ -1123,13 +1126,13 @@ var platform='superx';
<div class="tabs is-left is-small" id="viznav"> <div class="tabs is-left is-small" id="viznav">
<ul> <ul>
<li data-target="viznav-tab1" id="1"> <li data-target="viznav-tab1" id="1">
<a onclick="showVizNavTab(1);"><span>Diagramm-Daten</span></a> <a onclick="showVizNavTab(1);"><span>Diagramm-Daten</span></a>
</li> </li>
<li data-target="viznav-tab2" id="2"> <li data-target="viznav-tab2" id="2">
<a onclick="showVizNavTab(2);"><span>Diagramm-Layout</span></a> <a onclick="showVizNavTab(2);"><span>Diagramm-Layout</span></a>
</li> </li>
<li data-target="viznav-tab3" id="3"> <li data-target="viznav-tab3" id="3">
<a onclick="showVizNavTab(3);"><span>Diagramm-Nutzung</span></a> <a onclick="showVizNavTab(3);"><span>Diagramm-Nutzung</span></a>
</li> </li>
</ul> </ul>
</div> </div>
@ -1296,46 +1299,55 @@ 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">
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Datentabelle</strong></label>
</div>
<span class="separator"> </span> <!--Aufruf/Anzeige Diagrammdaten-->
<button class="button is-small is-rounded is-white is-outlined" <div class="field is-grouped">
onClick="showDataTable('dataDivTable',rs,rsMetaData,10);"><!--is-focused--> <div class="label-container">
<span class="icon is-small"><i class="../images/more.svg"></i> <label class="label is-required is-small"><strong>Daten-Tabelle</strong></label>
<img src="../images/more.svg" title="Laden" /> </div>
</span>
</button> <span class="separator">&#160;</span>
</div> <span class="separator">&#160;</span>
<div id="dataDiv" class="section">
<button class="button is-small is-rounded is-white is-outlined"
<div id="dataDivTable"> <!--style="border:thin solid black">--> onClick="showDataTable('dataDivTable',rs,rsMetaData,10);">
</div> <span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</button>
</div> </div>
<div class="field is-grouped"> <div id="dataDiv"> <!--class="section">-->
<div class="label-container"> <div id="dataDivTable"> <!--style="border:thin solid black">-->
<label class="label is-required is-small"><strong>Datenset</strong></label> </div>
</div> </div>
<span class="separator"> </span> <span class="separator">&#160;</span>
<button class="button is-small is-rounded is-white is-outlined" <span class="separator">&#160;</span>
onClick="fillDataSelectionForm('dataSelectionFormDiv');"><!--is-focused-->
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</button>
</div>
<div id="dataSelectionDiv" class="section"> <!--Aufruf/Anzeige Formular Datenauswahl-->
<form name="dataSelectionForm" id="dataSelectionForm"> <div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Daten-Auswahl</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="fillDataSelectionForm('dataSelectionFormDiv');">
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</button>
</div>
<div id="dataSelectionFormDiv" style="display:none"> <div id="dataSelectionDiv"> <!--class="section"-->
<form name="dataSelectionForm" id="dataSelectionForm">
<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>
</div> </div>
@ -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>
@ -1386,18 +1398,19 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</span> </span>
</div> </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">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>
@ -1438,7 +1451,7 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</div> </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">Maß</label> <label class="label is-required is-small">Maß</label>
</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>
@ -1533,47 +1546,50 @@ rs.push(new dataRow(</xsl:text><xsl:value-of select="$rownr"/>
</tr> </tr>
</table>--> </table>-->
</div>
</form>
</div> </div>
</form> <!--Ende Formular Datenauswahl-->
</div>
<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>
<button class="button is-small is-rounded is-white is-outlined" <span class="separator">&#160;</span>
onClick="selectionResultPreview('selectionResultPreviewTable');"> <span class="separator">&#160;</span>
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" /> <button class="button is-small is-rounded is-white is-outlined"
</span> onClick="selectionResultPreview('selectionResultPreviewTable');">
</button> <span class="icon is-small"><i class="../images/more.svg"></i>
</div>--> <img src="../images/more.svg" title="Laden" />
<footer class="card-footer"> </span>
<p class="card-footer-item"><button class="button is-link is-outlined is-small" onclick="selectionResultPreview('selectionResultPreviewTable');">Vorschau</button></p> </button>
<!--***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>
Selektionsergebnis***-->
<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>
</footer>
<div id="selectionResultPreviewTable" style="display:none">
</div> </div>
<div id="selectionResultPreview"> <!--class="section">-->
<div id="selectionResultPreviewTable" style="display:none"></div>
</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="reset">Zurücksetzen</button></p>
</footer>
</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="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Erweiterte Layouteigenschaften</strong></label>
</div>
<span class="separator"> </span> <div class="label-container">
<a onClick="showChartPropertiesForm();"><!--is-focused--> <label class="label is-required is-small"><strong>Allgemeine Layoutmerkmale</strong></label>
<span class="icon is-small"><i class="../images/more.svg"></i> </div>
<img src="../images/more.svg" title="Laden" />
</span>
</a>
</div>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<div id="chartPropertiesFormDetails" style="display:none"> <div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small">Diagramm-Typ</label>
</div>
</div> <div class="field is-active">
<p class="control-new">
<div class="select is-small is-fullwidth">
<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>
<!-- <div class="field is-grouped"> <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 id="chartPropertiesForm"> <!--style="visibility:hidden" class="section"--></div>
<!--Ende Formular Allg. Layoutmerkmale-->
<!--<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">Kategorie-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">
<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="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="label-container">
<label class="label is-required is-small">Serien-Dimension</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" 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-->
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<!--Aufruf/Anzeige Layout-Vorschau-->
<div class="field is-grouped">
<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 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"> <footer class="card-footer">
<p class="card-footer-item"><button class="button is-link is-outlined is-small" onClick="createChart();">Vorschau</button></p> <!--<p class="card-footer-item"><button class="button is-link is-outlined is-small" onClick="createChart();">Layout-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>
Selektionsergebnis***-->
<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>
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<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="chartDiv" style="border:thin solid black"> <div id="chartCanvas"> <!--class="section"-->
<!--<div id="chartCanvasHeader"> </div>-->
<div id="chartDiv2"> </div>
<!--<div id="chartCanvasFooter"></div>-->
</div> </div>
<div id="chartCanvasFooter">
<span class="separator">&#160;</span>
<span class="separator">&#160;</span>
<!-- Aufruf/Anzeige SVG-Quellcode-->
<div class="field is-grouped">
<div class="label-container">
<label class="label is-required is-small"><strong>Diagramm-Quellcode (svg)</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="showSrcCode();">
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</button>
</div> </div>
</div>
</xsl:template>
<xsl:template name="diagrammnutzung">
<div id="chartSVGsrcDiv" class="section">
<div class="field is-grouped"> <div id="chartSVGsrcDiv"> <!--class="section">-->
<div class="label-container"> <div id="chartSVGsrc" style="display:none">
<label class="label is-required is-small"><strong>SVG-Quellcode</strong></label> <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>
<span class="separator"> </span> </div>
<a onClick="showSrcCode();" ><!--is-focused-->
<span class="icon is-small"><i class="../images/more.svg"></i>
<img src="../images/more.svg" title="Laden" />
</span>
</a>
</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>
<div id="chartSVGsrc" style="visibility:hidden">
<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>
</xsl:template> </xsl:template>
</xsl:stylesheet> </xsl:stylesheet>

Write Preview
Loading…
Cancel
Save