Merge pull request #709 from dreamteamprod/dev

Add jumping to page in live show view (#708)

Author: Tim020

client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.17.7",
+  "version": "0.17.8",
   "private": true,
   "scripts": {
     "build": "vite build",

client/package.json

@@ -47,6 +47,12 @@
               >
                 Reload Clients
               </b-dropdown-item-btn>
+              <b-dropdown-item
+                v-b-modal.go-to-page
+                :disabled="CURRENT_SHOW_SESSION == null || !WEBSOCKET_HEALTHY || stoppingSession || startingSession"
+              >
+                Jump To Page
+              </b-dropdown-item>
             </b-nav-item-dropdown>
           </template>
           <b-nav-item
@@ -134,6 +140,40 @@
       </b-container>
     </template>
     <router-view v-else />
+    <b-modal
+      id="go-to-page"
+      ref="go-to-page"
+      title="Go to Page"
+      size="sm"
+      :hide-header-close="changingPage"
+      :hide-footer="changingPage"
+      :no-close-on-backdrop="changingPage"
+      :no-close-on-esc="changingPage"
+      @ok="goToLivePage"
+    >
+      <b-form @submit.stop.prevent="">
+        <b-form-group
+          id="page-input-group"
+          label="Page"
+          label-for="page-input"
+          label-cols="auto"
+        >
+          <b-form-input
+            id="page-input"
+            v-model="$v.pageInputFormState.pageNo.$model"
+            name="page-input"
+            type="number"
+            :state="validatePageState('pageNo')"
+            aria-describedby="page-feedback"
+          />
+          <b-form-invalid-feedback
+            id="page-feedback"
+          >
+            This is a required field, and must be greater than 0.
+          </b-form-invalid-feedback>
+        </b-form-group>
+      </b-form>
+    </b-modal>
   </div>
 </template>
 
@@ -142,6 +182,8 @@ import { mapGetters, mapActions } from 'vuex';
 import log from 'loglevel';
 import CreateUser from '@/vue_components/user/CreateUser.vue';
 import { makeURL } from '@/js/utils';
+import { notNull, notNullAndGreaterThanZero } from '@/js/customValidators';
+import { required, minValue } from 'vuelidate/lib/validators';
 
 export default {
   components: { CreateUser },
@@ -152,8 +194,22 @@ export default {
       stoppingSession: false,
       startingSession: false,
       wsStateCheckInterval: null,
+      changingPage: false,
+      pageInputFormState: {
+        pageNo: 1,
+      },
     };
   },
+  validations: {
+    pageInputFormState: {
+      pageNo: {
+        required,
+        notNull,
+        notNullAndGreaterThanZero,
+        minValue: minValue(1),
+      },
+    },
+  },
   computed: {
     isAllowedScriptConfig() {
       return (this.IS_ADMIN_USER
@@ -313,6 +369,18 @@ export default {
         });
       }
     },
+    validatePageState(name) {
+      const { $dirty, $error } = this.$v.pageInputFormState[name];
+      return $dirty ? !$error : null;
+    },
+    async goToLivePage() {
+      this.$socket.sendObj({
+        OP: 'LIVE_SHOW_JUMP_TO_PAGE',
+        DATA: {
+          page: this.pageInputFormState.pageNo,
+        },
+      });
+    },
   },
 };
 </script>

client/src/App.vue

@@ -384,6 +384,19 @@ async def on_message(
                         await self.application.ws_send_to_all(
                             "RELOAD_CLIENT", "NOOP", {}
                         )
+            elif ws_op == "LIVE_SHOW_JUMP_TO_PAGE":
+                if show and show.current_session_id:
+                    show_session = session.query(ShowSession).get(
+                        show.current_session_id
+                    )
+                    if show_session:
+                        show_session.latest_line_ref = (
+                            f"page_{message['DATA']['page']}_line_0"
+                        )
+                        session.commit()
+                        await self.application.ws_send_to_all(
+                            "RELOAD_CLIENT", "NOOP", {}
+                        )
             else:
                 get_logger().warning(
                     f"Unknown OP {ws_op} received from "