Message on Interview to switch browser

* optimized import of Components on app.js.
* new message on Mesort interview to ask to switch browser.

resources/js/app.js

@@ -70,72 +70,7 @@ Vue.use(
 Vue.use(
     Vuex);
 
-Vue.component(
-    'new-interview',
-    require(
-        './components/Interview/newinterview.vue').default,
-);
-Vue.component(
-    'circle-sorting',
-    require(
-        './components/Interview/circle-sorting.vue').default,
-);
-Vue.component(
-    'new-token',
-    require(
-        './components/Interview/newtokenmodal.vue').default,
-);
-Vue.component(
-    'interview-list',
-    require(
-        './components/Interview/interviewlist.vue').default,
-);
-Vue.component(
-    'q-sort',
-    require(
-        './components/Interview/q-sort.vue').default,
-);
-Vue.component(
-    'network-sorting',
-    require(
-        './components/Interview/network-sorting.vue').default,
-);
-Vue.component(
-    'sorting-preview',
-    require(
-        './components/Interview/sorting_preview.vue').default,
-);
-
-Vue.component(
-    'userpart',
-    require(
-        './components/userpart.vue').default,
-);
-Vue.component(
-    'url-list',
-    require(
-        './components/publicurllist').default,
-);
-Vue.component(
-    'new-study',
-    require(
-        './components/newstudy.vue').default,
-);
-Vue.component(
-    'new-edit-user',
-    require(
-        './components/modalnewedituser.vue').default,
-);
-Vue.component(
-    'action-table',
-    require(
-        './components/actiontable.vue').default,
-);
-Vue.component(
-    'user-table',
-    require(
-        './components/usertable.vue').default,
-);
+require('./components');
 
 var bus = new Vue();
 

resources/js/components.js

+
+Vue.component(
+    'new-interview',
+    require(
+        './components/Interview/newinterview.vue').default,
+);
+Vue.component(
+    'circle-sorting',
+    require(
+        './components/Interview/circle-sorting.vue').default,
+);
+Vue.component(
+    'new-token',
+    require(
+        './components/Interview/newtokenmodal.vue').default,
+);
+Vue.component(
+    'interview-list',
+    require(
+        './components/Interview/interviewlist.vue').default,
+);
+Vue.component(
+    'q-sort',
+    require(
+        './components/Interview/q-sort.vue').default,
+);
+Vue.component(
+    'network-sorting',
+    require(
+        './components/Interview/network-sorting.vue').default,
+);
+Vue.component(
+    'sorting-preview',
+    require(
+        './components/Interview/sorting_preview.vue').default,
+);
+
+Vue.component(
+    'userpart',
+    require(
+        './components/userpart.vue').default,
+);
+Vue.component(
+    'url-list',
+    require(
+        './components/publicurllist').default,
+);
+Vue.component(
+    'new-study',
+    require(
+        './components/newstudy.vue').default,
+);
+Vue.component(
+    'new-edit-user',
+    require(
+        './components/modalnewedituser.vue').default,
+);
+Vue.component(
+    'action-table',
+    require(
+        './components/actiontable.vue').default,
+);
+Vue.component(
+    'user-table',
+    require(
+        './components/usertable.vue').default,
+);
+Vue.component(
+    'better-browser-message',
+    require(
+        './components/useChromeFirefoxModal.vue').default,
+);

resources/js/components/Interview/newinterview.vue

@@ -3,6 +3,7 @@
     <div class="w-full" style="touch-action: none"
          id="interview">
 
+<use-chrome-firefox-modal v-if="isSafari"></use-chrome-firefox-modal>
         <b-loading :is-full-page="true" :active.sync="loading" :can-cancel="false"></b-loading>
 
         <form enctype="multipart/form-data">
@@ -210,10 +211,11 @@
 </template>
 
 <script>
-import {mapState}  from 'vuex';
-import ArrowLeft   from 'vue-material-design-icons/ArrowLeft.vue';
-import ArrowRight  from 'vue-material-design-icons/ArrowRight.vue';
-import htmlToImage from 'html-to-image';
+import {mapState}            from 'vuex';
+import ArrowLeft             from 'vue-material-design-icons/ArrowLeft.vue';
+import ArrowRight            from 'vue-material-design-icons/ArrowRight.vue';
+import htmlToImage           from 'html-to-image';
+import UseChromeFirefoxModal from '../useChromeFirefoxModal';
 
 // record animation
 $(document).ready(function()
@@ -267,12 +269,14 @@ $(document).ready(function()
 export default {
     props: ['questions', 'study', 'interviewed', 'gotos', 'preset', 'classifiers', 'sorting'],
     components: {
+        UseChromeFirefoxModal,
         ArrowRight,
         ArrowLeft,
     },
     data()
     {
         return {
+            isSafari : false,
             mousePosition: {x: 0, y: 0},
             loading: false,
             results: {
@@ -392,6 +396,11 @@ export default {
 
     }, mounted()
     {
+        this.isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
+            navigator.userAgent &&
+            navigator.userAgent.indexOf('CriOS') == -1 &&
+            navigator.userAgent.indexOf('FxiOS') == -1;
+
         this.getPresets();
         this.addListeners();
 

resources/js/components/useChromeFirefoxModal.vue

+<template>
+    <div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 absolute left-0 w-1/3 z-50 text-xs" style="top: 100px;" role="alert">
+        <p class="font-bold">Warning</p>
+        <p>Please use <a class="cursor-pointer text-blue-400" href="https://www.microsoft.com/en-us/edge?form=MA13DE&OCID=MA13DE" title="download Edge" >Microsoft Edge </a>,
+            <a class="cursor-pointer text-blue-400" href="https://www.google.com/intl/it/chrome/" title="download Chrome">Google Chrome</a>  or
+            <a class="cursor-pointer text-blue-400" href="https://www.mozilla.org/it/firefox/new/" title="download Firefox"> Firefox </a>
+            to be sure you can use Mesort optimally.</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'useChromeFirefoxModal',
+};
+</script>
+
+<style scoped>
+
+</style>