Finish 2 days room limit

- Create modal to register when limit is past - Create modal to share the link - Use UrlManager to check if limit room is active Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>
2021-12-23 13:09:28 +01:00
parent 60f4cf75c3
commit fd64fc43a4
12 changed files with 194 additions and 11 deletions
@@ -0,0 +1,45 @@
+<script lang="typescript">
+    import { fly } from "svelte/transition";
+    import {ADMIN_URL} from "../../Enum/EnvironmentVariable";
+
+    function register(){
+        window.open(`${ADMIN_URL}/second-step-register`, '_self');
+    }
+</script>
+
+<div class="limit-map nes-container"
+     transition:fly={{ y: -900, duration: 500 }}>
+    <section>
+        <h2>Limit of your room</h2>
+        <p>Register your account!</p>
+        <p>This map is limited in the time and to continue to use WorkAdventure, you must register your account in our back office.</p>
+    </section>
+    <section>
+        <button class="nes-btn is-primary" on:click|preventDefault={register}>Register</button>
+    </section>
+</div>
+
+<style lang="scss">
+  .limit-map {
+    pointer-events: auto;
+    background: #eceeee;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10vh;
+    max-height: 80vh;
+    max-width: 80vw;
+    overflow: auto;
+    text-align: center;
+
+    h2 {
+      font-family: "Press Start 2P";
+    }
+
+    section {
+      p {
+        margin: 15px;
+        font-family: "Press Start 2P";
+      }
+    }
+  }
+</style>
@@ -0,0 +1,90 @@
+<script lang="typescript">
+    import { fly } from "svelte/transition";
+    import {showShareLinkMapModalStore} from "../../Stores/ModalStore";
+
+    interface ExtNavigator extends Navigator{
+        canShare?(data?: ShareData): Promise<boolean>;
+    }
+
+    const myNavigator : ExtNavigator = window.navigator;
+    const haveNavigatorSharingFeature = myNavigator && myNavigator.canShare && myNavigator.share;
+
+    let copied = false;
+
+    function copyLink() {
+        try {
+            const input: HTMLInputElement = document.getElementById("input-share-link") as HTMLInputElement;
+            input.focus();
+            input.select();
+            document.execCommand("copy");
+            copied = true;
+        }catch (e){
+            console.error(e);
+            copied = false;
+        }
+    }
+
+    async function shareLink() {
+        const shareData = { url: location.toString() };
+
+        try {
+            await myNavigator.share(shareData);
+        } catch (err) {
+            console.error("Error: " + err);
+            copyLink();
+        }
+    }
+
+    function close() {
+        showShareLinkMapModalStore.set(false);
+        copied = false;
+    }
+</script>
+
+<div class="share-link-map nes-container"
+     transition:fly={{ y: -900, duration: 500 }}>
+    <section>
+        <h2>Invite your friends or colleagues</h2>
+        <p>Share the link of the room!</p>
+    </section>
+    <section>
+        {#if $haveNavigatorSharingFeature}
+            <input type="hidden" readonly id="input-share-link" value={location.toString()} />
+            <button type="button" class="nes-btn is-primary" on:click={shareLink}>Share</button>
+        {:else}
+            <input type="text" readonly id="input-share-link" value={location.toString()} />
+            <button type="button" class="nes-btn is-primary" on:click={copyLink}>Copy</button>
+        {/if}
+        {#if $copied}
+            <p>Copied!</p>
+        {/if}
+    </section>
+    <section>
+        <button class="nes-btn" on:click|preventDefault={close}>Close</button>
+    </section>
+</div>
+
+<style lang="scss">
+  div.share-link-map {
+    pointer-events: auto;
+    background: #eceeee;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10vh;
+    max-height: 80vh;
+    max-width: 80vw;
+    overflow: auto;
+    text-align: center;
+
+    h2 {
+      font-family: "Press Start 2P";
+    }
+
+    section {
+      p {
+        margin: 15px;
+        font-family: "Press Start 2P";
+      }
+    }
+  }
+</style>