@everymatrix/player-account-self-exclusion 0.0.162 → 0.0.166

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/player-account-self-exclusion",
-  "version": "0.0.162",
+  "version": "0.0.166",
   "main": "dist/player-account-self-exclusion",
   "svelte": "src/index.ts",
   "scripts": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f0ae2ffa2c984a3f90ab2eea42992f92e6acf725"
+  "gitHead": "cc5cea8f5d4ed68bf0b052d98cc82ce69e97fc45"
 }

package/src/PlayerAccountSelfExclusion.svelte

@@ -1,15 +1,25 @@
 <svelte:options tag={null} />
-<script lang="typescript">
 
+<script lang="typescript">
+  import { onMount } from 'svelte';
   import { getDevice } from 'rvhelper';
+  import moment from 'moment';
 
-  let userAgent:String = window.navigator.userAgent;
-  let isMobile = (getDevice(userAgent) === 'PC') ? false : true;
+  import '@vaadin/vaadin-date-picker/vaadin-date-picker.js';
 
-  let permanentSelfExclusion:Boolean = false;
+  let userAgent:string = window.navigator.userAgent;
+  let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
+  let calendar:HTMLElement;
+
+  let permanentSelfExclusion:boolean = false;
 
   let selfExclusionPeriod:string = '';
   let selfExclusionExpiryDate:string = '';
+  let currentDate:Date = new Date();
+  let minDate:string;
+
+  currentDate.setDate(currentDate.getDate() + 7);
+  minDate = moment(currentDate).format('YYYY-MM-DD');
 
   // Toggle permanent self exclusion
   const togglePermanentSelfExclusion = () => {
@@ -21,34 +31,51 @@
   }
 
   // Set self exclusion period
-  const setSelfExclusionPeriod = () => {
+  const setSelfExclusionPeriod = (date?:string) => {
     if (permanentSelfExclusion == true) {
       selfExclusionPeriod = 'SelfExclusionPermanent';
     } else {
       selfExclusionPeriod = 'SelfExclusionPeriod';
-      selfExclusionExpiryDate = '27/10/2021';
+      selfExclusionExpiryDate = date;
     }
   }
 
   // Send self exclusion period and date
   const saveSelfExclusion = () => {
     setSelfExclusionPeriod();
-    console.log('period', selfExclusionPeriod);
-    console.log('date', selfExclusionExpiryDate);
-    window.postMessage({ type: 'SetSelfExclusion', selfExclusionPeriod, selfExclusionExpiryDate }, window.location.href);
+
+    window.postMessage({
+      type: 'SetSelfExclusion',
+      selfExclusionPeriod,
+      selfExclusionExpiryDate
+    }, window.location.href);
   }
 
   // Mobile back button
   const toggleScreen = () => {
     window.postMessage({ type: 'ReturnToMenu' }, window.location.href);
   }
+
+  const calendarHandler = (e:any) => {
+    setSelfExclusionPeriod(e.target.value);
+  }
+
+  const setCalendarEventListener = () => {
+    calendar.addEventListener('change', calendarHandler, false);
+  }
+
+  onMount(() => {
+    return () => {
+      calendar.removeEventListener('change', calendarHandler);
+    }
+  });
+
+  $: calendar && setCalendarEventListener();
 </script>
 
 <div class="SelfExclusionWrapper {isMobile ? 'SelfExclusionWrapperMobile' : ''}">
   {#if isMobile}
-    <div class="MenuReturnButton" on:click={() => toggleScreen()}>
-
-    </div>
+    <div class="MenuReturnButton" on:click={() => toggleScreen()}></div>
   {/if}
   <h2 class="SelfExclusionTitle {isMobile ? 'SelfExclusionTitleMobile' : ''}">Self-Exclusion</h2>
   <div class="SelfExclusionDescription {isMobile ? 'SelfExclusionDescriptionMobile' : ''}">
@@ -59,7 +86,7 @@
   </div>
   <div class="SelfExclusionDateWrapper {isMobile ? 'SelfExclusionDateWrapperMobile' : ''}">
     <label for="SelfExclusionDate">Duration:</label>
-    <input bind:value={selfExclusionExpiryDate} on:blur={setSelfExclusionPeriod} type="text" id="SelfExclusionDate" />
+    <vaadin-date-picker bind:this={calendar} min={minDate}></vaadin-date-picker>
   </div>
   <div class="SelfExclusionRadioWrapper {isMobile ? 'SelfExclusionRadioWrapperMobile' : ''}">
     <label class="SelfExclusionRadio">Forever