Merge branch 'dev' of github.com:ConnectedHumber/Air-Quality-Web into dev

This commit is contained in:
Starbeamrainbowlabs 2019-08-13 15:40:20 +01:00
commit 4e5a451cde
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
1 changed files with 35 additions and 20 deletions

View File

@ -18,7 +18,7 @@ class Tour {
this.tour.addStep("welcome", { this.tour.addStep("welcome", {
text: "Welcome to the air quality web interface! Press next to get a short tour.", text: "Welcome to the air quality web interface! Press next to get a short tour.",
buttons: this.get_buttons(false, true) buttons: this.get_buttons(true, false)
}); });
this.tour.addStep("map", { this.tour.addStep("map", {
@ -39,13 +39,13 @@ class Tour {
}); });
this.tour.addStep("reading-type", { this.tour.addStep("reading-type", {
text: "Devices report multiple types of measurement. Change to another reading type now.", text: "Devices report multiple types of measurement. <strong>Change to another reading type now.</strong>",
attachTo: { attachTo: {
element: document.querySelector("select").parentNode, element: document.querySelector("select").parentNode,
on: "top" on: "top"
}, },
advanceOn: { selector: "select", event: "change" }, advanceOn: { selector: "select", event: "change" },
buttons: this.get_buttons(true) buttons: this.get_buttons(false)
}); });
this.tour.addStep("reading-type-complete", { this.tour.addStep("reading-type-complete", {
text: "Hey, the map changed! Some devices only report certain types of measurement, and different measurements have different colour scales.", text: "Hey, the map changed! Some devices only report certain types of measurement, and different measurements have different colour scales.",
@ -60,7 +60,7 @@ class Tour {
}, },
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("map-controls", { this.tour.addStep("map-controls", {
text: "You can control the zoom level and go fullscreen here. You can also zoom with your mouse wheel if you have one, and pan by clicking and dragging.", text: "You can control the zoom level and go fullscreen here. You can also zoom with your mouse wheel if you have one, and pan by clicking and dragging.",
attachTo: { attachTo: {
@ -71,12 +71,12 @@ class Tour {
}); });
this.tour.addStep("device-graph", { this.tour.addStep("device-graph", {
text: "By clicking a blue marker, you can view additional information about that device. Not all device are actively reporting data. Try clicking one now.", text: "By clicking a blue marker, you can view additional information about that device. Not all device are actively reporting data. <strong>Try clicking one now.</strong>",
attachTo: { attachTo: {
element: "#map", element: "#map",
on: "top" on: "top"
}, },
buttons: this.get_buttons(true) buttons: this.get_buttons(false)
}).on("show", (() => { }).on("show", (() => {
this.map_manager.device_markers.once("marker-popup-opened", this.tour.next.bind(this.tour)); this.map_manager.device_markers.once("marker-popup-opened", this.tour.next.bind(this.tour));
@ -91,16 +91,16 @@ class Tour {
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("device-graph-b", { this.tour.addStep("device-graph-b", {
text: "By clicking here, you can see the specification of the device, including its software, sensor models, exact location, more. Click this now.", text: "By clicking here, you can see the specification of the device, including its software, sensor models, exact location, more. <strong>Click this now.</strong>",
attachTo: { attachTo: {
element: ".tabs :first-child", element: ".tabs :first-child",
on: "left" on: "left"
}, },
advanceOn: { selector: ".tabs :first-child a", event: "click" }, advanceOn: { selector: ".tabs :first-child a", event: "click" },
buttons: this.get_buttons(true) buttons: this.get_buttons(false)
}); });
this.tour.addStep("report-bug", { this.tour.addStep("report-bug", {
text: "If you find a bug, you can report it by clicking this button.", text: "If you find a bug, you can report it by clicking this button.",
attachTo: { attachTo: {
@ -117,11 +117,11 @@ class Tour {
}, },
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("complete", { this.tour.addStep("complete", {
text: "Tour complete!\nIf you need any additional assistance, let us know :-)", text: "Tour complete!\nIf you need any additional assistance, let us know :-)",
buttons: [{ text: "Done", action: this.tour.next }] buttons: this.get_buttons(false, true, true)
}); });
} }
@ -129,7 +129,7 @@ class Tour {
if(window.localStorage.getItem("completed_tour") === null) if(window.localStorage.getItem("completed_tour") === null)
this.run(); this.run();
window.localStorage.setItem("completed_tour", (new Date()).toISOString()); //window.localStorage.setItem("completed_tour", (new Date()).toISOString()); -- removed due to an accidental refresh possiblity
} }
run() { run() {
@ -138,18 +138,33 @@ class Tour {
this.tour.start(); this.tour.start();
} }
get_buttons(no_continue = false, no_prev = false) { completed_tour()
{
window.localStorage.setItem("completed_tour", (new Date()).toISOString());
}
get_buttons(isContinue = true, isPrev = true, isEnd = false) {
let next = { text: "Next", action: this.tour.next }, let next = { text: "Next", action: this.tour.next },
prev = { text: "Previous", action: this.tour.back }, prev = { text: "Previous", action: this.tour.back },
exit = { text: "Exit", action: this.tour.cancel }; exit = { text: "Exit", action: () => {
this.completed_tour();
this.tour.cancel();
} },
end = { text: "Done", action: () => {
this.completed_tour();
this.tour.next();
} }
let result = []; let result = [];
if(!no_prev) result.push(prev);
if(!no_continue) { if(isPrev) result.push(prev);
if(isContinue) {
result.push(next); result.push(next);
result.push(exit); result.push(exit);
} }
if(isEnd) result.push(end);
return result; return result;
} }
} }