add multiple selection

compatibility.php

@@ -9,7 +9,7 @@
     <div class="row content">
 
         <div class="col-4 user-sheet">
-                <div class="avatar"><img src="<?= $BASE_PATH;?>/images/avatar/luca.png"></div>
+            <div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/luca.png"></div>
             <div class="name">Luca</div>
             <div class="rule">Stagista</div>
             <p class="sheet-title">Modulo differenze culturali</p>
@@ -24,8 +24,8 @@
         </div>
         
         <div class="col-4 user-sheet">
-                <div class="avatar"><img src="<?= $BASE_PATH;?>/images/avatar/sara.png"></div>
-                <div class="name">Sara</div>
+            <div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/sara.png"></div>
+            <div class="name">Sarah</div>
             <div class="rule">Venditore</div>
             <p class="sheet-title">Modulo differenze culturali</p>
             <div class="sheet-container">
@@ -48,6 +48,5 @@
         </div>
     </div>
 
-
 </div>
 

css/styles.css

@@ -14536,12 +14536,7 @@ a:hover {
   transform: translate(-50%, -50%);
 }
 
-/* line 66, global.scss */
-.bg-alpha {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-/* line 70, global.scss */
+/* line 65, global.scss */
 .pattern {
   background: white;
   background-image: url(../images/pattern.jpg);
@@ -14549,24 +14544,24 @@ a:hover {
   background-position: center bottom;
 }
 
-/* line 77, global.scss */
+/* line 72, global.scss */
 .radius {
   border-radius: 3px;
 }
 
-/* line 81, global.scss */
+/* line 76, global.scss */
 .radius-bottom {
   border-radius: 0 0 3px 3px;
 }
 
-/* line 86, global.scss */
+/* line 81, global.scss */
 #MainContent {
   top: 50px;
   z-index: 0;
   overflow: hidden;
 }
 
-/* line 92, global.scss */
+/* line 87, global.scss */
 #map {
   width: 100%;
   border-radius: 3px;
@@ -14574,7 +14569,7 @@ a:hover {
   padding: 10px;
 }
 
-/* line 102, global.scss */
+/* line 97, global.scss */
 #dropLoading {
   display: none;
   position: fixed;
@@ -14585,7 +14580,7 @@ a:hover {
   background: rgba(0, 0, 0, 0.8);
   overflow: hidden;
 }
-/* line 111, global.scss */
+/* line 106, global.scss */
 #dropLoading #animation_container {
   position: absolute;
   height: 300px;
@@ -14594,7 +14589,7 @@ a:hover {
   left: 50%;
   transform: translate(-50%, -50%);
 }
-/* line 120, global.scss */
+/* line 115, global.scss */
 #dropLoading #countdown {
   position: fixed;
   height: 30px;
@@ -14675,6 +14670,16 @@ button.discard,
 .button.discard {
   background: black;
 }
+/* line 48, forms.scss */
+input[type=button].dotted,
+input[type=submit].dotted,
+button.dotted,
+.button.dotted {
+  background: white;
+  color: #2f2f2f;
+  border: 2px dotted #2f2f2f;
+  border-radius: 6px;
+}
 
 /* line 2, header.scss */
 header {
@@ -15020,3 +15025,133 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
   height: 25px;
   background: #bf0f3d;
 }
+
+/* line 3, sections/plans.scss */
+.plans {
+  width: 100%;
+}
+/* line 6, sections/plans.scss */
+.plans .phone {
+  position: relative;
+  height: 570px;
+  width: 245px;
+  background-image: url(../images/phone.png);
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: 245px 500px;
+}
+/* line 15, sections/plans.scss */
+.plans .phone .name {
+  position: absolute;
+  left: 60px;
+  top: 5px;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+/* line 22, sections/plans.scss */
+.plans .phone .rule {
+  position: absolute;
+  left: 60px;
+  top: 25px;
+  font-size: 0.625rem;
+}
+/* line 28, sections/plans.scss */
+.plans .phone .avatar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 50px;
+  width: 50px;
+}
+/* line 34, sections/plans.scss */
+.plans .phone .avatar img {
+  height: 50px;
+  width: 50px;
+}
+/* line 40, sections/plans.scss */
+.plans .phone .content {
+  position: absolute;
+  top: 145px;
+  left: 12px;
+  height: 371px;
+  width: 222px;
+}
+/* line 47, sections/plans.scss */
+.plans .phone .content .cloud {
+  display: none;
+  position: relative;
+  width: 80%;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 8px;
+}
+/* line 57, sections/plans.scss */
+.plans .phone .content .cloud.left {
+  left: 15px;
+  background: #f6e7ea;
+  border: 1px solid #c8bcbe;
+}
+/* line 61, sections/plans.scss */
+.plans .phone .content .cloud.left:before {
+  content: '';
+  border: solid 11px transparent;
+  border-right-color: #c8bcbe;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(-100%, -50%);
+}
+/* line 70, sections/plans.scss */
+.plans .phone .content .cloud.left:after {
+  content: '';
+  border: solid 10px transparent;
+  border-right-color: #f6e7ea;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate(-100%, -50%);
+}
+/* line 81, sections/plans.scss */
+.plans .phone .content .cloud.right {
+  left: calc(20% - 13px);
+  background: #d4eeed;
+  border: 1px solid #b0c8c6;
+}
+/* line 85, sections/plans.scss */
+.plans .phone .content .cloud.right:before {
+  content: '';
+  border: solid 11px transparent;
+  border-left-color: #b0c8c6;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(100%, -50%);
+}
+/* line 94, sections/plans.scss */
+.plans .phone .content .cloud.right:after {
+  content: '';
+  border: solid 10px transparent;
+  border-left-color: #d4eeed;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(100%, -50%);
+}
+/* line 105, sections/plans.scss */
+.plans .phone .content .cloud.empty {
+  width: 100%;
+  text-align: center;
+  padding: 0;
+}
+/* line 114, sections/plans.scss */
+.plans .phone .input {
+  position: absolute;
+  top: 516px;
+  left: 12px;
+  height: 42px;
+  width: 222px;
+  border-radius: 0 0 26px 26px;
+  overflow: hidden;
+}

header.php

@@ -3,14 +3,14 @@
 
     <div class="container">
         <div class="row">
-            <div class="col-2"><img class="logo middle" src="<?= $BASE_PATH;?>/images/logo.png"></div>
+            <div class="col-2"><img class="logo middle" src="<?= $BASE_URL;?>/images/logo.png"></div>
             <div class="col-10 menu">
                 <ul class="middle">
-                    <li class="<?php if($getQ[0]=="menu"){echo "active";}?>"><a href="/menu">Menu</a></li>
-                    <li class="<?php if($getQ[0]=="results"){echo "active";}?>"><a href="/results">Risultati</a></li>
-                    <li class="<?php if($getQ[0]=="plans"){echo "active";}?>"><a href="/plans">Piani attivi</a></li>
-                    <li class="<?php if($getQ[0]=="report"){echo "active";}?>"><a href="/report">Report</a></li>
-                    <li class="<?php if($getQ[0]=="modules" || $getQ[0]=="compatibility"){echo "active";}?>"><a href="/modules">Moduli disponibili</a></li>
+                    <li class="<?php if($getQ[0]=="menu"){echo "active";}?>"><a href="<?= $BASE_URL;?>/menu">Menu</a></li>
+                    <li class="<?php if($getQ[0]=="results"){echo "active";}?>"><a href="<?= $BASE_URL;?>/results">Risultati</a></li>
+                    <li class="<?php if($getQ[0]=="plans"){echo "active";}?>"><a href="<?= $BASE_URL;?>/plans">Piani attivi</a></li>
+                    <li class="<?php if($getQ[0]=="report"){echo "active";}?>"><a href="<?= $BASE_URL;?>/report">Report</a></li>
+                    <li class="<?php if($getQ[0]=="modules" || $getQ[0]=="compatibility"){echo "active";}?>"><a href="<?= $BASE_URL;?>/modules">Moduli disponibili</a></li>
                     <li><a href="#"><i class="fa fa-search"></i></a></li>
                     <li><a href="#"><i class="fa fa-bell"></i></a></li>
                     <li><a href="#"><i class="fa fa-user"></i></a></li>

js/compatibility.js

@@ -22,7 +22,7 @@ $(document).ready(()=>{
     loading.fadeIn()
     setTimeout(()=>{
       loading.fadeOut(()=>{
-        window.location='/plans'
+        window.location='plans'
       })
     },7000)
     

js/modules.js

@@ -13,7 +13,7 @@ function drop(ev) {
   
   ev.preventDefault();
   
-  const target = $(ev.currentTarget).find('.modules-container')
+  const target = $(ev.currentTarget)
   const overlay = $('#dropConfirm')
   const loading = $('#dropLoading')
   const discard = overlay.find('.discard')
@@ -40,9 +40,15 @@ function drop(ev) {
 
       setTimeout(()=>{
         const module = $('#'+data)
+        
         loading.fadeOut()
-        target.append('<div class="div-drag">'+module.text()+'</div>')
-      },7000)
+
+        if(target.find('.modules-container').length){
+          target.find('.modules-container').append('<div class="div-drag">'+module.text()+'</div>')
+        }else{
+          $('.modules-container').append('<div class="div-drag">'+module.text()+'</div>')
+        }
+      },700)
       once = false
     }
 
@@ -58,4 +64,14 @@ function dragLeave(ev) {
 
 
 
+$(document).ready(()=>{
+  
+  $(document).keypress((event)=> {
+    if(event.which == 32){
+      window.location = 'compatibility'
+    }
+  })
+})
+
+
  

js/plans.js

@@ -1 +1,29 @@
 
+$(document).ready(()=>{
+
+  const plans = $('.plans')
+  const clouds = plans.find('.cloud')
+  const delay = 1000
+  let timer = 0
+  
+  setTimeout(()=>{
+    clouds.each((index,elem)=>{
+      const el = $(elem)
+      timer = index*delay
+      
+      if(el.hasClass('empty')){
+        timer -= delay
+      }
+        
+      setTimeout(()=>{
+        if(!el.hasClass('empty')){
+          $('#notify1')[0].play()
+        }
+        el.fadeIn(500)
+      },timer)
+      
+    })
+  },delay)
+  
+}) 
+ 

modules.php

@@ -72,7 +72,7 @@
           
           <div class="row my-2">
             <div class="col-3 p-0 mx-auto">
-                <div class="dropdown drop-action active">
+                <div class="dropdown drop-action active droppable"  ondrop="drop(event)" ondragover="allowDrop(event)">
                     <div class="label"><i class="fa fa-flag"></i> Duomo</div>
                     <div class="data"><i class="fa fa-user"></i> 2</div>
                 </div>
@@ -110,7 +110,7 @@
                         <i class="fa fa-user"></i>
                         <div class="name">Luca</div>
                         <div class="rule">Stagista</div>
-                        <div class="avatar"><img src="<?= $BASE_PATH;?>/images/avatar/luca.png"></div>
+                        <div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/luca.png"></div>
                         
                         <p class="modules-title">Azioni in corso</p>
                         <div class="modules-container"></div>
@@ -122,9 +122,9 @@
                 <div class="col-6 p-2 mx-auto">
                     <div class="user-sheet drop-action droppable"  ondrop="drop(event)" ondragover="allowDrop(event)">
                         <i class="fa fa-user"></i>
-                        <div class="name">Sara</div>
+                        <div class="name">Sarah</div>
                         <div class="rule">Venditore</div>
-                        <div class="avatar"><img src="<?= $BASE_PATH;?>/images/avatar/sara.png"></div>
+                        <div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/sara.png"></div>
                         
                         <p class="modules-title">Azioni in corso</p>
                         <div class="modules-container"></div>

plans.php

@@ -1 +1,55 @@
+<div class="plans pattern">
 
+    <div class="row">
+        <div class="col-12">
+            <p class="font-14 font-bold text-upper text-red p-5">Monitoring dispositivi</p>
+        </div>
+    </div>
+    
+    <div class="row mb-5">
+        <div class="col-8 mx-auto">
+            <div class="row">
+                <div class="col-6">
+                    <div class="phone mx-auto" id="usr_luca">
+                        <div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/luca.png"></div>
+                        <div class="name">Luca</div>
+                        <div class="rule">Stagista</div>
+                        <div class="content">
+                            <div class="cloud left">
+                                Ciao Luca!<br>
+                                Il modulo "differenze culturali" è disponibile.
+                            </div>
+                            <div class="cloud empty">
+                                <button class="button dotted">Ok</button>
+                            </div>
+                        </div>
+                        <div class="input"></div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <div class="phone mx-auto" id="usr_sara">
+                        <div class="avatar"><img src="<?= $BASE_URL;?>/images/avatar/sara.png"></div>
+                        <div class="name">Sarah</div>
+                        <div class="rule">Venditore</div>
+                        <div class="content">
+                            <div class="cloud left">
+                                Ciao Sara!<br>
+                                Il modulo "differenze culturali" è disponibile.
+                            </div>
+                            <div class="cloud empty">
+                                <button class="button dotted">Ok</button>
+                            </div>
+                        </div>
+                        <div class="input"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+        
+        
+        
+<audio id="notify1">
+  <source src="<?= $BASE_URL;?>/sounds/message.wav" type="audio/wav">
+</audio> 

scripts/plans.php

@@ -0,0 +1,2 @@
+<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/plans.js"></script>
+

scss/forms.scss

@@ -45,5 +45,11 @@ button,
   &.discard{
     background: black;
   }  
+  &.dotted{
+    background: white;
+    color: $dark-grey;
+    border: 2px dotted $dark-grey;
+    border-radius: 6px;
+  }
 }
 

scss/global.scss

@@ -62,11 +62,6 @@ a{
 }
 
 
-
-.bg-alpha{
-    background: rgba(255,255,255,0.5);
-}
-
 .pattern{
     background: white;
     background-image: url(../images/pattern.jpg);

scss/sections/plans.scss

@@ -1 +1,124 @@
 
+
+.plans{
+  width: 100%;
+  
+  .phone{
+    position: relative;
+    height: 570px;
+    width: 245px;
+    background-image: url(../images/phone.png);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 245px 500px;
+    
+    .name{
+      position: absolute;
+      left: 60px;
+      top: 5px;
+      font-size: $font-12;
+      font-weight: 700;
+    }     
+    .rule{
+      position: absolute;
+      left: 60px;
+      top: 25px;
+      font-size: $font-10;
+    }   
+    .avatar{
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 50px;
+      width: 50px;
+      img{
+        height: 50px;
+        width: 50px;
+      }
+    }
+    
+    .content{
+      position: absolute;
+      top: 145px;
+      left: 12px;
+      height: 371px;
+      width: 222px;
+      
+      .cloud{
+        display: none;
+        position: relative;
+        width: 80%;
+        font-size: $font-12;
+        font-weight: 500;
+        padding: 10px;
+        margin: 10px 0;
+        border-radius: 8px;
+        
+        &.left{
+          left: 15px;
+          background: $pink;
+          border: 1px solid $dark-pink;
+          &:before{
+            content: '';
+            border: solid 11px transparent;
+            border-right-color: $dark-pink;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translate(-100%, -50%);
+          }
+          &:after{
+            content: '';
+            border: solid 10px transparent;
+            border-right-color: $pink;
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translate(-100%, -50%);
+          }
+        }
+
+        &.right{
+          left: calc(20% - 13px);
+          background: $azure;
+          border: 1px solid $dark-azure;
+          &:before{
+            content: '';
+            border: solid 11px transparent;
+            border-left-color: $dark-azure;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translate(100%, -50%);
+          }
+          &:after{
+            content: '';
+            border: solid 10px transparent;
+            border-left-color: $azure;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translate(100%, -50%);
+          }
+        }
+        
+        &.empty{
+          width: 100%;
+          text-align: center;
+          padding: 0;
+        }
+        
+      }
+    }
+    
+    .input{
+      position: absolute;
+      top: 516px;
+      left: 12px;
+      height: 42px;
+      width: 222px;
+      border-radius: 0 0 26px 26px;
+      overflow: hidden;
+    }
+  }
+} 

scss/variables.scss

@@ -55,3 +55,8 @@ $red:           #bf0f3d;
 $grey:          #ccc;
 $light-grey:    #f2f2f2;
 $dark-grey:     #2f2f2f;
+
+$pink:          #f6e7ea;
+$dark-pink:     #c8bcbe;
+$azure:         #d4eeed;
+$dark-azure:    #b0c8c6;