fix uehaj2022 / latteart#57

package.json

@@ -61,6 +61,7 @@
     "vue-i18n": "^8.11.2",
     "vue-property-decorator": "^8.4.2",
     "vue-router": "^3.2.0",
+    "vue-tour": "^2.0.0",
     "vue2-leaflet": "^2.2.1",
     "vuedraggable": "^2.24.3",
     "vuetify": "^1.5.5",

src/gui/components/pages/captureControl/configView/ConfigView.vue

@@ -23,12 +23,14 @@
       <v-layout row wrap>
         <v-flex xs12 pr-1 class="pb-18">
           <v-select
+            id="v-step-04"
             :label="$store.getters.message('config-view.platform')"
             :items="platformNames"
             :value="selectedPlatformName"
             @change="selectPlatform"
           ></v-select>
           <v-select
+            id="v-step-05"
             :label="$store.getters.message('config-view.browser')"
             :items="browsers"
             :value="selectedBrowser"

src/gui/components/pages/captureControl/expCapture/ExpCapture.vue

@@ -67,11 +67,18 @@
       :message="errorDialogMessage"
       @close="errorDialogOpened = false"
     />
+    <div id="overlay"></div>
+    <v-tour
+      name="myTour"
+      :steps="steps"
+      :callbacks="myCallbacks"
+      :options="myOptions"
+    ></v-tour>
   </v-app>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
 import { OperationWithNotes } from "@/lib/operationHistory/types";
 import TestPurposeEditDialog from "@/components/pages/common/TestPurposeEditDialog.vue";
 import NoticeEditDialog from "@/components/pages/common/NoticeEditDialog.vue";
@@ -95,6 +102,95 @@ import AutofillSelectDialog from "@/components/pages/common/AutofillSelectDialog
   },
 })
 export default class ExpCapture extends Vue {
+  private myCustomPreviousStepCallback = (step: any) => {
+    if (this.$route.name === "historyView" && step == 7) {
+      this.$router.replace("/capture/config");
+    }
+  };
+  private myCustomNextStepCallback = (step: any) => {
+    if (this.$route.name === "configView" && step == 6) {
+      this.$router.replace("/capture/history");
+    }
+  };
+  private skipthis = (step: any) => {
+    this.closeOverlay();
+  };
+  public closeOverlay = () => {
+    document.getElementById("overlay")?.classList.add("overlayh");
+  };
+  myOptions = {
+    onEnd: () => {
+      this.closeOverlay();
+    },
+    useKeyboardNavigation: true,
+    labels: {
+      buttonSkip: this.$store.getters.message("tour.labels.buttonSkip"),
+      buttonPrevious: this.$store.getters.message("tour.labels.buttonPrevious"),
+      buttonNext: this.$store.getters.message("tour.labels.buttonNext"),
+      buttonStop: this.$store.getters.message("tour.labels.buttonStop"),
+    },
+  };
+  private finish = (step: any) => {
+    this.closeOverlay();
+  };
+  public hasSeenTour =
+    JSON.parse(localStorage.getItem("hasSeenTour") || "false") != null
+      ? JSON.parse(localStorage.getItem("hasSeenTour")!)
+      : false;
+  myCallbacks = {
+    onPreviousStep: this.myCustomPreviousStepCallback,
+    onNextStep: this.myCustomNextStepCallback,
+    onSkip: this.skipthis,
+    onFinish: this.finish,
+  };
+  public steps = [
+    {
+      target: "#v-step-00",
+      content: this.$store.getters.message("tour.URLfield"),
+    },
+    {
+      target: "#v-step-01",
+      content: this.$store.getters.message("tour.start-button"),
+    },
+    {
+      target: "#v-step-02",
+      content: this.$store.getters.message("tour.language"),
+      params: {
+        placement: "top",
+      },
+    },
+    {
+      target: "#v-step-03",
+      content: this.$store.getters.message("tour.load-saved-results"),
+    },
+    {
+      target: "#v-step-04",
+      content: this.$store.getters.message("tour.platform"),
+    },
+    {
+      target: "#v-step-05",
+      content: this.$store.getters.message("tour.browser"),
+    },
+    {
+      target: "#v-step-06",
+      content: this.$store.getters.message("tour.historyView"),
+      params: {
+        placement: "top",
+      },
+    },
+    {
+      target: "#v-step-07",
+      content: this.$store.getters.message("tour.sequenecDiagramModel"),
+    },
+    {
+      target: "#v-step-08",
+      content: this.$store.getters.message("tour.screenTransitionDiagram"),
+    },
+    {
+      target: "#v-step-09",
+      content: this.$store.getters.message("tour.webElementCoverage"),
+    },
+  ];
   private testPurposeEditDialogOpened = false;
   private noticeEditDialogOpened = false;
 
@@ -113,7 +209,75 @@ export default class ExpCapture extends Vue {
   private errorDialogOpened = false;
   private errorDialogMessage = "";
 
+  private get stepsChange() {
+    return this.$store.getters.message("tour.language");
+  }
+
+  @Watch("stepsChange")
+  private translateSteps() {
+    this.steps = [
+      {
+        target: "#v-step-00",
+        content: this.$store.getters.message("tour.URLfield"),
+      },
+      {
+        target: "#v-step-01",
+        content: this.$store.getters.message("tour.start-button"),
+      },
+      {
+        target: "#v-step-02",
+        content: this.$store.getters.message("tour.language"),
+        params: {
+          placement: "top",
+        },
+      },
+      {
+        target: "#v-step-03",
+        content: this.$store.getters.message("tour.load-saved-results"),
+      },
+      {
+        target: "#v-step-04",
+        content: this.$store.getters.message("tour.platform"),
+      },
+      {
+        target: "#v-step-05",
+        content: this.$store.getters.message("tour.browser"),
+      },
+      {
+        target: "#v-step-06",
+        content: this.$store.getters.message("tour.historyView"),
+        params: {
+          placement: "top",
+        },
+      },
+      {
+        target: "#v-step-07",
+        content: this.$store.getters.message("tour.sequenecDiagramModel"),
+      },
+      {
+        target: "#v-step-08",
+        content: this.$store.getters.message("tour.screenTransitionDiagram"),
+      },
+      {
+        target: "#v-step-09",
+        content: this.$store.getters.message("tour.webElementCoverage"),
+      },
+    ];
+    this.myOptions.labels = {
+      buttonSkip: this.$store.getters.message("tour.labels.buttonSkip"),
+      buttonPrevious: this.$store.getters.message("tour.labels.buttonPrevious"),
+      buttonNext: this.$store.getters.message("tour.labels.buttonNext"),
+      buttonStop: this.$store.getters.message("tour.labels.buttonStop"),
+    };
+  }
   private mounted() {
+    if (this.hasSeenTour) {
+      this.closeOverlay();
+    }
+    if (!this.hasSeenTour) {
+      this.$tours["myTour"].start();
+      localStorage.setItem("hasSeenTour", JSON.stringify(true));
+    }
     this.$store.commit("operationHistory/setOpenNoteEditDialogFunction", {
       openNoteEditDialog: this.openNoteEditDialog,
     });
@@ -264,6 +428,7 @@ export default class ExpCapture extends Vue {
             });
 
             return;
+
           case "bug":
           case "notice":
             await this.$store.dispatch("operationHistory/deleteNotice", {
@@ -291,6 +456,18 @@ export default class ExpCapture extends Vue {
 <style lang="sass" scoped>
 html
   overflow: hidden
+.overlayh
+  display: hidden !important
+  z-index: -99999 !important
+  background: rgba(0, 0, 0, 0) !important
+#overlay
+  position: fixed
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  z-index: 20
+  background: rgba(0, 0, 0, 0.3)
 </style>
 
 <style lang="sass">

src/gui/components/pages/captureControl/expCapture/organisms/captureToolFooter/CaptureToolFooter.vue

@@ -36,7 +36,7 @@
     <v-divider vertical class="mx-3" />
 
     <go-config-view-button v-if="$route.name === 'historyView'" />
-    <go-history-view-button v-else />
+    <go-history-view-button v-else id="v-step-06" />
 
     <span class="px-1"><recording-time /></span>
   </v-layout>

src/gui/components/pages/captureControl/expCapture/organisms/captureToolHeader/CaptureToolHeader.vue

@@ -16,20 +16,20 @@
 
 <template>
   <v-layout justify-start align-center row @keydown="cancelKeydown">
-    <url-text-field />
+    <url-text-field id="v-step-00" />
     <test-result-name-text-field />
 
     <div>
       <v-layout>
-        <record-button />
+        <record-button id="v-step-01" />
         <pause-button />
         <clear-history-button />
-        <load-history-button />
+        <load-history-button id="v-step-03" />
         <menu-button />
       </v-layout>
     </div>
 
-    <v-flex shrink pa-1 pl-3>
+    <v-flex shrink pa-1 pl-3 id="v-step-02">
       <locale-select-box />
     </v-flex>
 
@@ -66,6 +66,9 @@ import MenuButton from "./MenuButton.vue";
   },
 })
 export default class CaptureToolHeader extends Vue {
+  // private mounted() {
+  //   this.$tours['myTour'].start();
+  // }
   private cancelKeydown(event: Event) {
     event.stopPropagation();
   }

src/gui/components/pages/captureControl/expCapture/organisms/captureToolHeader/LocaleSelectBox.vue

@@ -22,7 +22,28 @@
       :value="initLocale"
       v-on:change="changeLocale"
     ></v-select>
-
+    <v-dialog v-model="languageDialogBoxOpened" max-width="490" persistent>
+      <v-card>
+        <v-card-title class="headline">
+          Choose the language / 言語を選択
+        </v-card-title>
+        <v-card-text>
+          <v-radio-group v-model="language" mandatory row>
+            <v-radio label="English" value="en" color="red"></v-radio>
+            <v-radio label="日本" value="ja" color="red"></v-radio>
+          </v-radio-group>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn
+            @click="changeLocale(language)"
+            color="red"
+            class="white--text"
+          >
+            Apply / 申し込み
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <error-message-dialog
       :opened="errorMessageDialogOpened"
       :message="errorMessage"
@@ -44,6 +65,14 @@ export default class LocaleSelectBox extends Vue {
   private locales: string[] = ["ja", "en"];
   private errorMessageDialogOpened = false;
   private errorMessage = "";
+  private language = "";
+  private languageDialogBoxOpened = false;
+  private created(): void {
+    if (localStorage.getItem("appOpenedBefore") === null) {
+      this.languageDialogBoxOpened = true;
+      localStorage.setItem("appOpenedBefore", "true");
+    }
+  }
 
   public get initLocale(): string {
     return this.$store.getters.getLocale();
@@ -53,6 +82,7 @@ export default class LocaleSelectBox extends Vue {
     (async () => {
       try {
         await this.$store.dispatch("changeLocale", { locale });
+        this.languageDialogBoxOpened = false;
       } catch (error) {
         if (error instanceof Error) {
           this.errorMessage = error.message;

src/gui/components/pages/operationHistory/organisms/HistoryDisplay.vue

@@ -40,14 +40,17 @@
           <v-flex xs12 wrap mb-0 pb-0 px-2>
             <v-radio-group v-model="diagramType" row class="py-0">
               <v-radio
+                id="v-step-07"
                 :label="message('history-view.sequence')"
                 :value="DIAGRAM_TYPE_SEQUENCE"
               ></v-radio>
               <v-radio
+                id="v-step-08"
                 :label="message('history-view.screen-transition')"
                 :value="DIAGRAM_TYPE_SCREEN_TRANSITION"
               ></v-radio>
               <v-radio
+                id="v-step-09"
                 :label="message('history-view.element-coverage')"
                 :value="DIAGRAM_TYPE_ELEMENT_COVERAGE"
               ></v-radio>
@@ -76,7 +79,13 @@
           </v-flex>
         </pane>
         <pane>
-          <v-container fluid pa-0 fill-height style="position: relative">
+          <v-container
+            fluid
+            pa-0
+            fill-height
+            style="position: relative"
+            id="v-step-09"
+          >
             <screen-shot-display :imageInfo="imageInfo"></screen-shot-display>
 
             <a

src/gui/entry/tool/main.ts

@@ -21,11 +21,13 @@ import "../../plugins/vuetify";
 import App from "./App.vue";
 import router from "../../router";
 import store from "@/store";
+import VueTour from "vue-tour";
+require("vue-tour/dist/vue-tour.css");
 
 Vue.config.productionTip = false;
 
 Vue.prototype.$isViewerMode = false;
-
+Vue.use(VueTour);
 new Vue({
   router,
   store,