Create datasets views

Added edit, new and show view in a new dataset folder, updated css rules. Also added a bugfix: if data was pushed to a dataset with no variables, the app would crash. Not anymore.

public/stylesheets/style.css

@@ -21,3 +21,54 @@
     padding-top:5px;
     padding-bottom: 5px;    
 }
+
+.list-unstyled { 
+    padding-left: 40px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+#variablesList {
+    margin-top: 5px;
+    margin-bottom: 15px;
+}
+
+.variable-option {
+    margin-top: 15px;
+}
+
+.variable-input {
+    display: inline;
+    width: 50%;
+}
+
+.delete-variable-btn {
+    color: #D67C7C;
+    padding-right: 2px;
+    padding-left: 2px;
+    font-size: 20px;
+}
+
+.delete-variable-btn:hover, 
+.delete-variable-btn:active, 
+.delete-variable-btn:focus {
+    color: #CE4343;
+}
+
+.add-variable {
+    text-align: center;
+}
+
+.add-variable-btn {
+    color: #88D67C;
+    padding-right: 2px;
+    padding-left: 2px;
+    margin-right:15%;
+    font-size: 25px;
+}
+
+.add-variable-btn:hover, 
+.add-variable-btn:active,
+.add-variable-btn:focus {
+    color: #4AAF3A;
+}

routes/datasets.js

@@ -20,7 +20,7 @@ router.get("/update", function(req, res) {
         if (err) {
             console.log("Error retrieving dataset: " + err);
             res.sendStatus(-1);
-        } else if (dataset) {
+        } else if (dataset.data) {
             // build $push query with variables passed in POST request
             // we check that the variable have already been registered otherwise they"ll be ignored
             for (var property in req.query) {
@@ -41,7 +41,7 @@ router.get("/update", function(req, res) {
                 }
             });
         } else {
-            console.log("No dataset found for this API key: " + apiKey);
+            console.log("Either no dataset was found for this API key: " + apiKey + " or the dataset doesn't have any variables set");
             res.sendStatus(0);
         }
     });
@@ -220,7 +220,7 @@ router.put("/:id/", helper.authenticate, function(req, res) {
         }
 
         // Update dataset
-        dataset.update(updateQuery, function(err, dataset) {
+        dataset.update(updateQuery, function(err, response) {
             if (err) {
                 console.log("Error updating dataset: " + err);
                 req.session.error = "Update failed, please try again.";

views/datasets/edit.jade

@@ -0,0 +1,72 @@
+extends ../layout
+
+block content
+    div.col-md-6
+        h1=dataset.name
+        div.col-md-12
+            h2 Api Keys
+            div.col-md-6
+                h3 Read 
+                form(action="/datasets/update/key",method="POST")
+                    input(type="hidden",value="read",name="key")
+                    div.form-group
+                        input(type="hidden",value="#{dataset._id}",name="id")
+                        pre=dataset.read_key
+                        button#newReadKey.btn.btn-warning(role="submit") Regenerate
+            div.col-md-6
+                h3 Write
+                form(action="/datasets/update/key",method="POST")
+                    input(type="hidden",value="write",name="key")
+                    input(type="hidden",value="#{dataset._id}",name="id")
+                    pre=dataset.write_key
+                    button#newWriteKey.btn.btn-warning(role="submit") Regenerate
+        div.col-md-12
+            h2 Options
+            div.col-md-6
+                form(action="/datasets/#{dataset._id}",method="post",name="updateDataset")
+                    div.form-group
+                        label(for="inputName") Name: 
+                        input#inputName.form-control(type="text", value="#{dataset.name}", name="name")
+                    div.form-group
+                        label(for="inputPublic") Public: 
+                            input#inputPublic(type="checkbox", name="public", checked="#{dataset.public}")
+                    label Variables:
+                    ul#variablesList.list-unstyled
+                        script.
+                            var varId=1;
+                        if dataset.data
+                            - each variable, i in dataset.data
+                                script.
+                                    varId++
+                                li.variable-option  
+                                    button.btn.btn-link.delete-variable-btn 
+                                        span.glyphicon.glyphicon-minus-sign
+                                    |  Title: 
+                                    input.form-control.variable-input(type="text", value="#{variable.name}", name=i) 
+                                    |  tag: #{i} 
+                        li.add-variable
+                            button.btn.btn-link.add-variable-btn 
+                                span.glyphicon.glyphicon-plus-sign
+                    input(type="hidden",value="PUT",name="_method")
+                    button#btnSubmit.btn.btn-success(type="submit").
+                        Save changes
+
+block inPageScript
+    script.
+        // Add new variable input if add button clicked
+        $(".add-variable-btn").click(function(e) {
+            e.preventDefault(); // prevents button from submitting
+
+            var html = "<li class='variable-option'><button class='btn btn-link delete-variable-btn'><span class='glyphicon glyphicon-minus-sign'></span></button> Title: <input class='form-control variable-input', type='text', placeholder='variable%s', name='var%s'> tag: var%s</li>".replace(/%s/g, varId);
+            $(html).insertBefore(".add-variable")
+            varId++;
+        });
+
+        // Delete variable input if delete button clicked
+        // We use the 'on' method here because otherwise newly inserted DOM elements wouldn't trigger
+        $(document).on("click", ".delete-variable-btn", function(e) {
+            e.preventDefault(); // prevents button from submitting
+
+            $(this).closest("li").remove();
+            varId--;
+        });

views/datasets/new.jade

@@ -0,0 +1,42 @@
+extends ../layout
+
+block content
+    div.col-md-3
+        h1 New dataset
+        form#formAddDataset(name="addDataset", method="post", action="/datasets")
+            div.form-group
+                label(for="inputName") Name:
+                input#inputName.form-control(type="text", placeholder="ex: Weather Data", name="name")
+            div.form-group
+                label(for="inputPublic") Public: 
+                    input#inputPublic(type="checkbox", name="public")
+            label Variables:
+            ul#variablesList.list-unstyled
+                li.add-variable
+                    button.btn.btn-link.add-variable-btn 
+                        span.glyphicon.glyphicon-plus-sign
+            button#btnSubmit.btn.btn-success(type="submit").
+                Create
+
+block inPageScript
+    script.
+        // used to add the correct tag to each new variable input
+        var varId = 1;
+
+        // Add new variable input if add button clicked
+        $(".add-variable-btn").click(function(e) {
+            e.preventDefault(); // prevents button from submitting
+
+            var html = "<li class='variable-option'><button class='btn btn-link delete-variable-btn'><span class='glyphicon glyphicon-minus-sign'></span></button> Title: <input class='form-control variable-input', type='text', placeholder='ex: variable%s', name='var%s'> tag: var%s</li>".replace(/%s/g, varId);
+            $(html).insertBefore(".add-variable")
+            varId++;
+        });
+
+        // Delete variable input if delete button clicked
+        // we use the 'on' method here because otherwise newly inserted DOM elements wouldn't trigger 'click'
+        $(document).on("click", ".delete-variable-btn", function(e) {
+            e.preventDefault(); // prevents button from submitting
+
+            $(this).closest("li").remove();
+            varId--;
+        });

views/datasets/show.jade

@@ -0,0 +1,74 @@
+extends ../layout
+
+block content
+    h1=dataset.name
+    ul.list-unstyled 
+        li 
+            p 
+                strong Created at:
+                |  #{dataset.created_at}
+            p
+                strong Last entry at: 
+                |  #{dataset.last_entry_at}
+            p 
+                strong Entries number:
+                |  #{dataset.entries_number}
+
+    if dataset.data 
+        - each variable, i in dataset.data
+            div.col-md-6
+                if variable.name
+                    h3.text-center #{variable.name}
+                else 
+                    h3.text-center #{i}
+                canvas(id="#{i}_canvas", height="400px", width="800px")
+
+    script(type="text/javascript", src="/javascripts/Chart.min.js")
+    script.
+        // Unserialize dataset object so that we can interract with it from the script
+        var datasetObject =!{JSON.stringify(dataset)}
+        var data = datasetObject.data
+
+        // For each variable in the dataset, extract title, tag name and values
+        // then instanciate the chart with theses values
+        for (var property in data) {
+            if (data.hasOwnProperty(property)) {
+                var varTag = property;
+                var varData = data[property];
+                var label = varData.name;
+                var xLabels = [];
+                var yValues = [];
+
+                for (var i in varData.values) {
+                    // extract values
+                    yValues.push(varData.values[i][0]);
+                    // extract timestamp in a Date object and format the output in a string
+                    var t = new Date(varData.values[i][1]);
+                    var cleanTime = t.getDay() +"/"+ t.getMonth() + " " + t.getHours() + ":" + t.getMinutes()
+                    // add formated timestamp to the array holding values for x axis
+                    xLabels.push(cleanTime)
+                }
+            }
+
+            var chartData = {
+            labels: xLabels,
+            datasets: [
+                {
+                    label: label,
+                    fillColor: "rgba(220,220,220,0.2)",
+                    strokeColor: "rgba(220,220,220,1)",
+                    pointColor: "rgba(220,220,220,1)",
+                    pointStrokeColor: "#fff",
+                    pointHighlightFill: "#fff",
+                    pointHighlightStroke: "rgba(220,220,220,1)",
+                    data: yValues
+                }
+            ]            
+            }
+
+            var ctx = document.getElementById(varTag+"_canvas").getContext("2d");
+
+            new Chart(ctx).Line(chartData, {
+                bezierCurve: false
+            });
+        }