@3cr/viewer-browser 0.0.122 → 0.0.124

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -3,6 +3,7 @@
   <!--  <DemoModal data-vuetify v-model:modal="m_demo" />-->
   <DemoLicenceInfoModal v-model:modal="m_demo" :is-modal-open="value" />
   <DemoPatientInfoModal v-model:modal="m_demoPatient" :is-modal-open="value" />
+  <DemoPatientShareToMobileModal v-model:modal="m_demoPatientShareToMobile" />
   <v-dialog
     data-vuetify
     id="cr-viewer"
@@ -97,7 +98,7 @@
                 </template>
                 <v-list-item-title>Send to 3rd Party</v-list-item-title>
               </v-list-item>
-              <v-list-item @click="executeOption('OnShare')">
+              <v-list-item @click="executeOption('OnShareToMobile')">
                 <template v-slot:prepend>
                   <v-icon> share </v-icon>
                 </template>
@@ -771,6 +772,7 @@ import {
   isDemo,
   m_demo,
   m_demoPatient,
+  m_demoPatientShareToMobile,
 } from "@/demo/options";
 import { handleNotification } from "@/notifications/notification";
 import { LoadViewerPayload } from "@/models/LoadViewerPayload";
@@ -804,6 +806,7 @@ import { getIconForPreset } from "@/dataLayer/iconData";
 import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
 import DemoPatientInfoModal from "@/demo/patient/DemoPatientInfoModal.vue";
 import DemoLicenceInfoModal from "@/demo/licence/DemoLicenceInfoModal.vue";
+import DemoPatientShareToMobileModal from "@/demo/patient/DemoPatientShareToMobileModal.vue";
 
 export interface Props {
   payload?: LoadViewerPayload;

package/src/demo/licence/DemoLicenceInfoModal.vue

@@ -33,7 +33,7 @@ const modalState = computed({
 <template>
   <v-dialog v-model:model-value="modalState">
     <v-card
-      class="pa-1 ma-auto position-relative motif-background"
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
       theme="dark"
       max-width="680"
     >
@@ -56,7 +56,7 @@ const modalState = computed({
         </v-btn>
         <v-spacer />
         <v-btn
-          variant="tonal"
+          variant="flat"
           color="success"
           @click="openUrl('mailto:ecooper@singular.health')"
         >

package/src/demo/options.ts

@@ -12,6 +12,7 @@ export function checkIsDemo(payload: LoadViewerPayload) {
 export const isDemo = ref<boolean>(false);
 export const m_demo = ref<boolean>(false);
 export const m_demoPatient = ref<boolean>(false);
+export const m_demoPatientShareToMobile = ref<boolean>(false);
 export const demoPatientTitle = ref<string>("");
 export const demoPatientSubtitles = ref<Array<string>>([]);
 export const demoLicenceTitle = ref<string>("");
@@ -118,8 +119,7 @@ export const demoPatientOptions: LoadViewerOptions = {
     // m_demoPatient.value = true;
   },
   OnShareToMobile: () => {
-    //TODO:
-    // m_demoPatient.value = true;
+    m_demoPatientShareToMobile.value = true;
   },
   OnShare: () => {
     //TODO:

package/src/demo/patient/DemoPatientInfoModal.vue

@@ -33,7 +33,7 @@ const modalState = computed({
 <template>
   <v-dialog v-model:model-value="modalState">
     <v-card
-      class="pa-1 ma-auto position-relative motif-background"
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
       theme="dark"
       max-width="680"
     >
@@ -56,7 +56,7 @@ const modalState = computed({
         </v-btn>
         <v-spacer />
         <v-btn
-          variant="tonal"
+          variant="flat"
           color="success"
           @click="openUrl('https://3dicomviewer.com/pricing')"
         >

package/src/demo/patient/DemoPatientShareToMobileModal.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import {
-  demoPatientSubtitles,
-  demoPatientTitle,
-  openUrl,
-} from "@/demo/options";
+import { computed, ref } from "vue";
+import { openUrl } from "@/demo/options";
 
 export interface Props {
   modal: boolean;
-  isModalOpen: boolean;
 }
 
 const emit = defineEmits<{
@@ -17,9 +12,9 @@ const emit = defineEmits<{
 
 const props = withDefaults(defineProps<Props>(), {
   modal: false,
-  isModalOpen: true,
 });
 
+const step2 = ref<boolean>(false);
 const modalState = computed({
   get() {
     return props.modal;
@@ -33,29 +28,65 @@ const modalState = computed({
 <template>
   <v-dialog v-model:model-value="modalState">
     <v-card
-      class="pa-1 ma-auto position-relative motif-background"
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
       theme="dark"
       max-width="680"
     >
-      <v-card-title>{{ demoPatientTitle }}</v-card-title>
-      <v-card-text v-for="subtitle in demoPatientSubtitles" :key="subtitle"
-        >{{ subtitle }}
+      <v-card-title> Download 3Dicom Mobile </v-card-title>
+      <v-card-text>
+        <img
+          src="../../assets/images/apple-qr.svg"
+          alt="logo-home"
+          width="47%"
+          class="mr-auto rounded-lg"
+        />
+        <img
+          src="../../assets/images/android-qr.svg"
+          alt="logo-home"
+          width="47%"
+          class="ml-auto rounded-lg float-right"
+        />
       </v-card-text>
       <v-card-actions>
+        <v-btn color="error" @click="modalState = false">
+          Continue with Demo
+        </v-btn>
+        <v-spacer />
         <v-btn
-          color="error"
-          @click="modalState = false"
-          :disabled="!isModalOpen"
+          variant="flat"
+          color="success"
+          @click="
+            step2 = true;
+            modalState = false;
+          "
         >
-          Continue with Demo
+          I have 3DICOM mobile installed
         </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+  <v-dialog v-model:model-value="step2">
+    <v-card
+      class="pa-1 ma-auto position-relative motif-background card-bg-border"
+      theme="dark"
+      max-width="680"
+    >
+      <v-card-title> Load your scan </v-card-title>
+      <v-card-text>
+        Once you have logged in and can see your dashboard, select your scan and
+        open it to visualise your X-Ray (XR), Ultrasound (US), Computed
+        Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting
+        Tomography (PET) scans.
+      </v-card-text>
+      <v-card-actions>
+        <v-btn color="error" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
-          variant="tonal"
+          variant="flat"
           color="success"
           @click="openUrl('https://3dicomviewer.com/pricing')"
         >
-          Purchase 3Dicom Patient
+          I want to view my own scan
         </v-btn>
       </v-card-actions>
     </v-card>