sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-11-22 06:23:01 +00:00
Code Issues Releases Wiki Activity

Added "Previous" button to the end of the tour.

Browse source 
(Small Change)
This commit is contained in:
Milo 2019-08-01 19:37:38 +01:00
parent 63bc4e536d
commit d2f45412a0
1 changed files with 22 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
client_src/js/Tour.mjs
View file

@ -7,7 +7,7 @@ class Tour {
constructor(in_map_manager) { constructor(in_map_manager) {
this.map_manager = in_map_manager; this.map_manager = in_map_manager;
} }
create_tour() { create_tour() {
this.tour = new Sheperd.Tour({ this.tour = new Sheperd.Tour({
useModalOverlay: true, useModalOverlay: true,
@ -15,12 +15,12 @@ class Tour {
// Default settings for steps go here // Default settings for steps go here
} }
}); });
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(false, true)
}); });
this.tour.addStep("map", { this.tour.addStep("map", {
text: "Each device has a blue marker. The shape a marker is located in changes colour depending on the value of the measure it reported.", text: "Each device has a blue marker. The shape a marker is located in changes colour depending on the value of the measure it reported.",
attachTo: { attachTo: {
@ -37,7 +37,7 @@ class Tour {
}, },
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
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. Change to another reading type now.",
attachTo: { attachTo: {
@ -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: {
@ -69,7 +69,7 @@ class Tour {
}, },
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
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. Try clicking one now.",
attachTo: { attachTo: {
@ -77,11 +77,11 @@ class Tour {
on: "top" on: "top"
}, },
buttons: this.get_buttons(true) buttons: this.get_buttons(true)
}).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));
}).bind(this)); }).bind(this));
this.tour.addStep("device-graph-a", { this.tour.addStep("device-graph-a", {
text: "This is a device information popup. By default it displays recent data that the device has reported on the line graph, but you can control this with the blue buttons.", text: "This is a device information popup. By default it displays recent data that the device has reported on the line graph, but you can control this with the blue buttons.",
attachTo: { attachTo: {
@ -99,8 +99,8 @@ class Tour {
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(true)
}); });
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,39 +117,42 @@ 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: [
{ text: "Previous", action: this.tour.back },
{ text: "Done", action: this.tour.next }
]
}); });
} }
run_once() { run_once() {
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());
} }
run() { run() {
if(typeof this.tour == "undefined") if(typeof this.tour == "undefined")
this.create_tour(); this.create_tour();
this.tour.start(); this.tour.start();
} }
get_buttons(no_continue = false, no_prev = false) { get_buttons(no_continue = false, no_prev = 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.tour.cancel };
let result = []; let result = [];
if(!no_prev) result.push(prev); if(!no_prev) result.push(prev);
if(!no_continue) { if(!no_continue) {
result.push(next); result.push(next);
result.push(exit); result.push(exit);
} }
return result; return result;
} }
} }