add modal and show on load app page

app/static/src/app/components/SessionInitialiseModal.vue

@@ -0,0 +1,41 @@
+<template>
+  <div id="session-initialise-modal">
+    <div v-if="open" class="modal-backdrop fade show"></div>
+    <div class="modal" :class="{show: open}" :style="modalStyle">
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">WODIN Session</h5>
+          </div>
+          <div class="modal-body">
+            {{ modalText }}
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-primary"
+                    id="reload-session"
+                    @click="emit('reloadSession')">Reload session</button>
+            <button class="btn btn-primary"
+                    id="new-session"
+                    @click="emit('newSession')">New session</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, defineProps, defineEmits } from "vue";
+import userMessages from "../userMessages";
+
+const props = defineProps({
+  open: Boolean
+});
+
+const emit = defineEmits(["newSession", "reloadSession"]);
+
+const modalStyle = computed(() => {
+  return { display: props.open ? "block" : "none" };
+});
+
+const modalText = userMessages.sessions.initialise;
+</script>

app/static/src/app/components/WodinSession.vue

@@ -1,11 +1,18 @@
 <template>
-  <router-view v-if="initialised"></router-view>
+  <session-initialise-modal :open="!sessionInitialised"
+                            @new-session="newSession"
+                            @reload-session="reloadSession"></session-initialise-modal>
+  <router-view v-if="sessionInitialised"></router-view>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted } from "vue";
-import { RouterView } from "vue-router";
+import {
+    defineComponent, onMounted, ref
+} from "vue";
+import { RouterView, useRoute, useRouter } from "vue-router";
 import { useStore } from "vuex";
+import { AppStateMutation } from "../store/appState/mutations";
+import SessionInitialiseModal from "./SessionInitialiseModal.vue";
 import { AppStateAction } from "../store/appState/actions";
 import { ErrorsMutation } from "../store/errors/mutations";
 
@@ -21,36 +28,82 @@ export default defineComponent({
         defaultLanguage: String
     },
     components: {
+        SessionInitialiseModal,
         RouterView
     },
     setup(props) {
         const store = useStore();
-        const initialised = computed(() => !!(store.state.appName && store.state.baseUrl && store.state.appsPath));
-        onMounted(() => {
-            if (props.shareNotFound) {
-                store.commit(`errors/${ErrorsMutation.AddError}`,
-                    { detail: `Share id not found: ${props.shareNotFound}` });
-            }
-            const {
-                appName,
-                baseUrl,
-                loadSessionId,
-                appsPath,
-                enableI18n,
-                defaultLanguage
-            } = props;
+
+        // TODO: These are undefined ,but they shouldn't be... Get router undefined error when load session from Sessions page
+       // (loadSessionId is set)
+        const route = useRoute();
+        const router = useRouter();
+
+        const {
+            appName,
+            baseUrl,
+            loadSessionId,
+            appsPath,
+            enableI18n,
+            defaultLanguage
+        } = props;
+
+        store.commit(AppStateMutation.SetApp, {
+            appName,
+            baseUrl,
+            appsPath,
+            enableI18n,
+            defaultLanguage
+        });
+
+        // We don't need to show session initialise modal if showing the sessions page, or..
+        // TODO: if no previous sessions...
+        // Can't use the router here to check route as it isn't set up
+        // const sessionInitialised = ref(route.fullPath.endsWith("sessions"));
+        const sessionInitialised = ref(false);
+
+        const initialise = (sessionId: string) => {
             store.dispatch(AppStateAction.Initialise,
                 {
                     appName,
                     baseUrl,
-                    loadSessionId,
+                    sessionId,
                     appsPath,
                     enableI18n,
                     defaultLanguage
                 });
+            sessionInitialised.value = true;
+        };
+
+        // If we have a loadSessionId we can initialise the session right away with the requested id
+        if (loadSessionId) {
+            initialise(loadSessionId);
+        }
+
+        // const initialised = computed(() => !!(store.state.appName && store.state.baseUrl && store.state.appsPath));
+
+        onMounted(() => {
+            if (props.shareNotFound) {
+                store.commit(`errors/${ErrorsMutation.AddError}`,
+                    { detail: `Share id not found: ${props.shareNotFound}` });
+            }
         });
 
-        return { initialised };
+        const newSession = () => {
+            initialise("");
+        };
+
+        const reloadSession = () => {
+            // TODO: find the most recent session id from local store
+            // Expected behaviour: right now, both buttons should launch a fresh new session
+            initialise("");
+        };
+
+        return {
+            sessionInitialised,
+            newSession,
+            reloadSession
+        };
     }
 });
 </script>

app/static/src/app/store/appState/actions.ts

@@ -35,6 +35,7 @@ async function immediateUploadState(context: ActionContext<AppState, AppState>)
 
 export const appStateActions: ActionTree<AppState, AppState> = {
     async [AppStateAction.Initialise](context, payload: InitialisePayload) {
+        // TODO: just accept loadSessionId here, everything else should already be set in the state
         const {
             commit, state, dispatch, getters
         } = context;
@@ -46,13 +47,13 @@ export const appStateActions: ActionTree<AppState, AppState> = {
             enableI18n,
             defaultLanguage
         } = payload;
-        commit(AppStateMutation.SetApp, {
+        /*commit(AppStateMutation.SetApp, {
             appName,
             baseUrl,
             appsPath,
             enableI18n,
             defaultLanguage
-        });
+        });*/
         localStorageManager.addSessionId(appName, getters[AppStateGetter.baseUrlPath], state.sessionId);
 
         const response = await api(context)

app/static/src/app/store/appState/mutations.ts

@@ -21,7 +21,8 @@ export enum AppStateMutation {
 export const StateUploadMutations = [
     AppStateMutation.ClearQueuedStateUpload,
     AppStateMutation.SetQueuedStateUpload,
-    AppStateMutation.SetStateUploadInProgress
+    AppStateMutation.SetStateUploadInProgress,
+    AppStateMutation.SetPersisted
 ] as string[];
 
 export const appStateMutations: MutationTree<AppState> = {

app/static/src/app/userMessages.ts

@@ -110,6 +110,7 @@ export default {
         loadApplication: {
             link: "Load the application",
             suffix: " to create a new session."
-        }
+        },
+        initialise: "Would you like to reload the most recent session or start a new session?"
     }
 };