From 5b62b19dff6c9abd345ade30411262a467bbe48c Mon Sep 17 00:00:00 2001 From: Alexis Matelin Date: Tue, 22 Sep 2015 12:40:06 -0400 Subject: [PATCH] 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 | 51 +++++++++++++++++++++++++ routes/datasets.js | 6 +-- views/datasets/edit.jade | 72 +++++++++++++++++++++++++++++++++++ views/datasets/new.jade | 42 ++++++++++++++++++++ views/datasets/show.jade | 74 ++++++++++++++++++++++++++++++++++++ 5 files changed, 242 insertions(+), 3 deletions(-) create mode 100644 views/datasets/edit.jade create mode 100644 views/datasets/new.jade create mode 100644 views/datasets/show.jade diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index da06da1..07244e5 100755 --- a/public/stylesheets/style.css +++ b/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; +} diff --git a/routes/datasets.js b/routes/datasets.js index 34e1234..073cf9b 100644 --- a/routes/datasets.js +++ b/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."; diff --git a/views/datasets/edit.jade b/views/datasets/edit.jade new file mode 100644 index 0000000..c5c0930 --- /dev/null +++ b/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 = "
  • Title: tag: var%s
    • ".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--; + }); \ No newline at end of file diff --git a/views/datasets/new.jade b/views/datasets/new.jade new file mode 100644 index 0000000..61f2900 --- /dev/null +++ b/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 = "
  • Title: tag: var%s
    • ".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--; + }); diff --git a/views/datasets/show.jade b/views/datasets/show.jade new file mode 100644 index 0000000..388f633 --- /dev/null +++ b/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 + }); + }