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

Bugfix: Fix the firstrun tour for the new version of shepard.js. Fixes #55.

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-10-29 20:58:47 +00:00
parent 91eb5859fc
commit 10f136cec3
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
1 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
client_src/js/Tour.mjs
View file

@ -16,12 +16,12 @@ class Tour {
} }
}); });
this.tour.addStep("welcome", { this.tour.addStep({
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(true, false) buttons: this.get_buttons(true, false)
}); });
this.tour.addStep("map", { this.tour.addStep({
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: {
element: "#map", element: "#map",
@ -29,7 +29,7 @@ class Tour {
}, },
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("guage", { this.tour.addStep({
text: "This guage is a key to the colour of the shapes underneath the device markers.", text: "This guage is a key to the colour of the shapes underneath the device markers.",
attachTo: { attachTo: {
element: document.querySelector("#canvas-guage"), element: document.querySelector("#canvas-guage"),
@ -38,7 +38,7 @@ class Tour {
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("reading-type", { this.tour.addStep({
text: "Devices report multiple types of measurement. <strong>Change to another reading type now.</strong>", 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,
@ -47,12 +47,12 @@ class Tour {
advanceOn: { selector: "select", event: "change" }, advanceOn: { selector: "select", event: "change" },
buttons: this.get_buttons(false) buttons: this.get_buttons(false)
}); });
this.tour.addStep("reading-type-complete", { this.tour.addStep({
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.",
attachTo: { element: "#map", on: "bottom" }, attachTo: { element: "#map", on: "bottom" },
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("layer-showhide", { this.tour.addStep({
text: "You can show and hide the device markers and the heatmap here.", text: "You can show and hide the device markers and the heatmap here.",
attachTo: { attachTo: {
element: ".leaflet-control-layers", element: ".leaflet-control-layers",
@ -61,7 +61,7 @@ class Tour {
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("map-controls", { this.tour.addStep({
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: {
element: ".leaflet-top.leaflet-left", element: ".leaflet-top.leaflet-left",
@ -70,7 +70,7 @@ class Tour {
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("device-graph", { this.tour.addStep({
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>", 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",
@ -82,7 +82,7 @@ class Tour {
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({
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: {
element: ".popup-device", element: ".popup-device",
@ -90,7 +90,7 @@ class Tour {
}, },
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("device-graph-b", { this.tour.addStep({
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>", 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",
@ -101,7 +101,7 @@ class Tour {
}); });
this.tour.addStep("report-bug", { this.tour.addStep({
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: {
element: "button[value='Report bug']", element: "button[value='Report bug']",
@ -109,7 +109,7 @@ class Tour {
}, },
buttons: this.get_buttons() buttons: this.get_buttons()
}); });
this.tour.addStep("changelog", { this.tour.addStep({
text: "The changelog will be automatically shown every time this web interface updates. Click the version information here to review it again at other times.", text: "The changelog will be automatically shown every time this web interface updates. Click the version information here to review it again at other times.",
attachTo: { attachTo: {
element: "button[value~='built']", element: "button[value~='built']",
@ -119,7 +119,7 @@ class Tour {
}); });
this.tour.addStep("complete", { this.tour.addStep({
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: this.get_buttons(false, true, true) buttons: this.get_buttons(false, true, true)
}); });