Difference between revisions of "Team:TU-Eindhoven/Notebook"

Line 3: Line 3:
 
<head>
 
<head>
  
−
<body>
+
    <div class="container logbook neat" id="log-container">
 +
        <h2>Log book</h2>
 +
        <p>Log book is recorded weekly, you may find the significant breakthroughs in chronological order.</p>
  
−
<div class="column full_size first-row">
+
        <span>Categories:</span>
 +
        <select id="CategoriesSelect" onchange="changeCat(this)">
 +
        <option value="all" selected="selected">(please select [ALL]:)</option>
 +
        <option value="ibp">Ice binding protein</option>
 +
        <option value="cloning">Cloning</option>
 +
        <option value="biobrick">Biobrick</option>
 +
        <option value="organiclab">Organic lab</option>
 +
        </select>
 +
        <!-- automation below -->
 +
        <p></p>
 +
    </div>
  
−
<h1>Notebook</h1>
+
    <script>
−
<p> Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.</p>
+
    // Catelogue
 +
    var bGenerateCat = false;
  
−
</div>
+
    var xhr = new XMLHttpRequest();
−
<div class="clear"></div>
+
    xhr.overrideMimeType("application/json");
 +
    xhr.open("GET", "https://2018.igem.org/Team:TU-Eindhoven/logbook?action=raw&ctype=text/json", true);
 +
    console.log("start generating logbook...");
 +
    xhr.onreadystatechange = function(){
 +
        if (xhr.readyState == 4 && xhr.status == "200") {
 +
            var logJSON = JSON.parse(xhr.responseText);
 +
            var log = document.getElementById("log-container");
 +
            // var dates = Object.keys(logtext).length;
 +
            var trans = {'ibp':'Ice Binding Protein',
 +
                    'cloning':'Cloning',
 +
                    'biobrick':'Biobrick',
 +
                    'organiclab':'Organic Lab'
 +
                };
 +
            for(var key in logJSON) {
 +
                let btn = document.createElement("BUTTON");
 +
                btn.classList.add("accordion");
 +
                btn.innerHTML = key;
 +
                log.appendChild(btn);
  
 +
                let panel = document.createElement("DIV");
 +
                panel.classList.add("panel");
 +
                for(var part in logJSON[key]) {
 +
                    let h = document.createElement('H2');
 +
                    h.innerHTML = trans[part];
  
 +
                    let d = document.createElement("DIV");
 +
                    d.classList.add(part, "all");
 +
                    d.innerHTML = logJSON[key][part]["html"];
 +
                    d.insertBefore(h, d.firstChild);
 +
                    panel.appendChild(d);
 +
                }
 +
                log.appendChild(panel);
 +
            }
 +
            var acc = document.getElementsByClassName("accordion");
 +
            var i;
  
−
<div class="column two_thirds_size">
+
            for (i = 0; i < acc.length; i++) {
−
<h3>What should this page have?</h3>
+
                acc[i].addEventListener("click", function() {
−
<ul>
+
                    this.classList.toggle("active");
−
<li>Chronological notes of what your team is doing.</li>
+
                    var panel = this.nextElementSibling;
−
<li> Brief descriptions of daily important events.</li>
+
                    if (panel.style.maxHeight){
−
<li>Pictures of your progress. </li>
+
                    panel.style.maxHeight = null;
−
<li>Mention who participated in what task.</li>
+
                    } else {
−
</ul>
+
                    panel.style.maxHeight = panel.scrollHeight + "px";
 +
                    }
 +
                });
 +
            }
 +
        }
 +
    }
 +
    xhr.send(null);
  
−
</div>
+
    // change categories
 +
    function changeCat(e) {
 +
    var catClass = e.value;
 +
    var target = document.getElementsByClassName(catClass);
 +
    var all = document.getElementsByClassName("all");
 +
   
 +
    console.log(catClass);
  
−
<div class="column third_size">
+
    for (var i=0; i<all.length;i++) {
−
<div class="highlight decoration_A_full">
+
        all[i].style.display="none";
−
<h3>Inspiration</h3>
+
    }
−
<p>You can see what others teams have done to organize their notes:</p>
+
  
−
<ul>
+
    for (var i=0; i<target.length; i++) {
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
        target[i].style.display="block";
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
    }
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
    }
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
  
−
</body>
+
    //
 +
 
 +
    </script>
  
 
</html>
 
</html>
 
{{:Team:TU-Eindhoven/footer}}
 
{{:Team:TU-Eindhoven/footer}}

Revision as of 08:03, 9 October 2018

Log book

Log book is recorded weekly, you may find the significant breakthroughs in chronological order.

Categories: