Browse Source

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

bugfix/performance
Starbeamrainbowlabs 3 years ago
parent
commit
10f136cec3
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 26
      client_src/js/Tour.mjs

26
client_src/js/Tour.mjs

@ -16,12 +16,12 @@ class Tour { @@ -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.",
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.",
attachTo: {
element: "#map",
@ -29,7 +29,7 @@ class Tour { @@ -29,7 +29,7 @@ class Tour {
},
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.",
attachTo: {
element: document.querySelector("#canvas-guage"),
@ -38,7 +38,7 @@ class Tour { @@ -38,7 +38,7 @@ class Tour {
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>",
attachTo: {
element: document.querySelector("select").parentNode,
@ -47,12 +47,12 @@ class Tour { @@ -47,12 +47,12 @@ class Tour {
advanceOn: { selector: "select", event: "change" },
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.",
attachTo: { element: "#map", on: "bottom" },
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.",
attachTo: {
element: ".leaflet-control-layers",
@ -61,7 +61,7 @@ class Tour { @@ -61,7 +61,7 @@ class Tour {
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.",
attachTo: {
element: ".leaflet-top.leaflet-left",
@ -70,7 +70,7 @@ class Tour { @@ -70,7 +70,7 @@ class Tour {
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>",
attachTo: {
element: "#map",
@ -82,7 +82,7 @@ class Tour { @@ -82,7 +82,7 @@ class Tour {
this.map_manager.device_markers.once("marker-popup-opened", this.tour.next.bind(this.tour));
}).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.",
attachTo: {
element: ".popup-device",
@ -90,7 +90,7 @@ class Tour { @@ -90,7 +90,7 @@ class Tour {
},
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>",
attachTo: {
element: ".tabs :first-child",
@ -101,7 +101,7 @@ class Tour { @@ -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.",
attachTo: {
element: "button[value='Report bug']",
@ -109,7 +109,7 @@ class Tour { @@ -109,7 +109,7 @@ class Tour {
},
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.",
attachTo: {
element: "button[value~='built']",
@ -119,7 +119,7 @@ class Tour { @@ -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 :-)",
buttons: this.get_buttons(false, true, true)
});

Loading…
Cancel
Save