Kuntakyselyn raportointi?

Kuntakyselyn luonnos

by Teppo Jussmäki

HTML

<p>Seurantavuodet</p>
<div id="vuosivaldiv"><form id="piilotusvuosi" method="POST">
    <input type="checkbox" id="vuosi2013" value="Vuosi 2013" onClick="obj_sivu.vuosiEsitys()">Vuosi 2013</input>
    <input type="checkbox" id="vuosi2014" value="Vuosi 2014" checked="yes"  onClick="obj_sivu.vuosiEsitys()">Vuosi 2014</input></form>
</div>


<table id="jsontaulu">
</table>
<!--
<p>Seurantavuodet</p>
<select id="vuosivalinta">
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="vert">Vertailu 2014 ja 2013</option>
</select>-->



<p>Sarakesuodattimet</p>
<div id="kysvaldiv">
<a href="#kys_k" id="kys_k" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintakys, 'yes')">Valitse kaikki</a>  |  
<a href="#kys_e" id="kys_e" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintakys, '')">Poista valinnat</a>
<form id="jsonvalintakys" method="POST"></form>
</div>

<p>Rivisuodattimet --- vain yksi suodatin tällä hetkellä!</p>
<select id="suodatinandor">
  <option value="AND">Yksikkö toteuttaa kaikki rivisuodattimet</option>
  <option value="OR">Yksikkö toteuttaa jonkin rivisuodattimista</option>
</select>

<p class="suod_txt">Järjestäjä</p>
<div id="jarjvaldiv">
<a href="#jarj_k" id="jarj_k" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintajarj, 'yes')">Valitse kaikki</a>  |  
<a href="#jarj_e" id="jarj_e" class="val_a" onClick="obj_sivu.valKaikki(jsonvalintajarj, '')">Poista valinnat</a>
<form id="jsonvalintajarj" method="POST"></form>
</div>

<p>Näkymä</p>
<div id="txtnrodiv"><form id="jsontxtnro" method="POST">
<input type="checkbox" id="txtnro" value="Numeroarvot" onClick="obj_sivu.nrotxtEsitys(this.value())" checked="true">Näytä numeroarvot tekstimuodossaan</input></form>
</div>

<button type="button" onClick="obj_sivu.alustaTaulukko()">Piirrä taulukko uudestaan</button>
<button type="button" onClick="obj_sivu.teeCSV()">Lataa näkymä CSV-tiedostona</button>
<div id="testi"></div>


<a id="h_toggle" href="#h_toggle">toggle</a>...

CSS

table, td, th {
   border: 1px solid black;
}
td,th {
    padding: 3px;
}
tr:nth-child(even) {background-color: #ECF7E4}
tr:nth-child(odd) {background-color: #FFF}

td div.metainfo {
   background-color: #FFFFCC;
   z-index : 10;
   border : 1px solid black;
   padding: 5px;
   visibility: hidden;
   display : block;
   position: absolute;
}
td:hover div.metainfo
{
   visibility: visible;
   min-height : 70px;
   width: 150px;
} 


th div.metainfo {
   background-color: #FFFFCC;
   z-index : 10;
   border : 1px solid black;
   padding: 5px;
   visibility: hidden;
   display : block;
   position: absolute;
}
th:hover div.metainfo
{
   visibility: visible;
   min-height : 70px;
   width: 150px;
} 


#kysvaldiv
{
    background-color : #CCFFFF;
    margin: 1em 0em 1em 0em;
}
#yksikkovaldiv
{
    background-color : #FFCCFF;
    margin: 1em 0em 1em 0em;
}
#sijaintivaldiv
{
    background-color : #CCFFCC;
    margin: 1em 0em 1em 0em;
}
#jarjvaldiv
{
    background-color : #FFFFCC;
    margin: 1em 0em 1em 0em;
}

#txtnrodiv
{
    background-color : #CCCCFF;
    margin: 1em 0em 1em 0em;
}
a, a:visited
{
    color: blue;
    text-decoration: none;
}

div.v2014 {
    border-top-width: 1px;
    border-top-style: dotted;
}
div.v2013::before { content: "2013 : "; }
div.v2014::before { content: "2014 : "; }

p.suod_txt { font-size : 10pt; margin-bottom: 0em; }

JavaScript

/* Parempi olisi, jos käyttä suodattaisi vain aina yhdellä perusteella kerrallaan
tämä peruste määräytyis taulukossa tapahtuvien klikkausten mukaan: esim. klikkaa julkinen, suodatin julkinen aktivoituu ja sen voi poistaa erikseen.
Toisaalta miten saisi esim. Helsingin yksityiset listattua kerralla?*/


var taulukkoLuokka = new Class({
    ots_txt:  null,
    ots_html: null,
    ots_alkper: null,
    rivit2013: null,
    rivit2014: null,
    metarivit: null,
    metaextra: null,
    
    teeTaulukko: function(jarjestajat, vastaukset, kysymykset, labelit) {
        rivit2013 = [];
        rivit2014 = [];
        metarivit = [];
        metaextra = [];
        /* otsikkorivi */
        ots_html  = ["Järjestäjä   <a href='#' onClick='obj_sivu.alustaTaulukkoJarj(\"jarj\", \"az\")'>↑</a>  <a href='#' onClick='obj_sivu.alustaTaulukkoJarj(\"jarj\", \"za\")'>↓</a>"];
        ots_alkper = [""];    
    
        ots_txt = ["Järjestäjä", "Vuosi"]; // tarkasta!
        var xalkper;
        
        /* Kysymykset, otsikot */
        Object.each(kysymykset, function(kys_obj, kys_key){
            if (kys_obj.info !== undefined) {xalkper = kys_obj.info;} else {xalkper = "<i>Ei alkuperäistä kysymystä</i>"}
            ots_html[ots_html.length] = kys_obj.ots;
            ots_alkper[ots_alkper.lenght] = xalkper;
            ots_txt[ots_txt.length]   = kys_obj.ots;
        });
        
        jarjestajat.each(function(y_obj, jarj0) {
            var j_obj = null;
            var t_obj = null;
            var sk_maski  = null;
            
            var loytyi_jarjestaja = jarjestajat.some(function(tmp_obj, tmp_index){
                if (y_obj.sij == tmp_obj.koodi ) { s_obj = tmp_obj; return true; }
            });
            
            // riviotsikot
            var xrivinimi1 = "(Tuntematon järjestäjä)";
            var xmetateksti = "<i>Ei lisätietoja</i>";
            // riville tulevat yksikön, sijainnin ja tuottajan nimet
            if (y_obj.nim !== undefined) ...