generalization

css/styles.css

@@ -14574,6 +14574,41 @@ a:hover {
   padding: 10px;
 }
 
+/* line 102, global.scss */
+#dropLoading {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 50px;
+  height: calc(100vh - 50px);
+  width: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+}
+/* line 111, global.scss */
+#dropLoading #animation_container {
+  position: absolute;
+  height: 300px;
+  width: 300px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+/* line 120, global.scss */
+#dropLoading #countdown {
+  position: fixed;
+  height: 30px;
+  line-height: 30px;
+  width: 50px;
+  z-index: 9999;
+  top: calc(50% + 30px);
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-size: 1.125rem;
+  color: white;
+}
+
 /* line 3, forms.scss */
 input, button {
   border: none;
@@ -14925,41 +14960,6 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu
   font-weight: 700;
 }
 
-/* line 239, sections/modules.scss */
-#dropLoading {
-  display: none;
-  position: fixed;
-  left: 0;
-  top: 50px;
-  height: calc(100vh - 50px);
-  width: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
-}
-/* line 248, sections/modules.scss */
-#dropLoading #animation_container {
-  position: absolute;
-  height: 300px;
-  width: 300px;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-/* line 257, sections/modules.scss */
-#dropLoading #countdown {
-  position: fixed;
-  height: 30px;
-  line-height: 30px;
-  width: 50px;
-  z-index: 9999;
-  top: calc(50% + 30px);
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  font-size: 1.125rem;
-  color: white;
-}
-
 /* line 2, sections/compatibility.scss */
 .compatibility {
   min-height: calc(100vh - 50px);

header.php

@@ -10,7 +10,7 @@
                     <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"){echo "active";}?>"><a href="/modules">Moduli disponibili</a></li>
+                    <li class="<?php if($getQ[0]=="modules" || $getQ[0]=="compatibility"){echo "active";}?>"><a href="/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>

index.php

@@ -45,6 +45,15 @@
         </div>
     </section>
     
+    
+    <div id="dropLoading">
+        <div id="animation_container">
+            <canvas id="canvas"></canvas>
+            <div id="dom_overlay_container"></div>
+        </div>
+        <div id="countdown"></div>
+    </div>
+
 
     <script type="text/javascript" src="<?php echo $BASE_URL;?>/node_modules/jquery/dist/jquery.min.js"></script>
     <script type="text/javascript" src="<?php echo $BASE_URL;?>/js/scripts.js"></script>

js/compatibility.js

@@ -4,15 +4,28 @@ $(document).ready(()=>{
   const compatibility = $('.compatibility')
   const sheets = compatibility.find('.sheet-container')
   const values = sheets.find('.value')
+  const confirm = compatibility.find('.button.confirm')
+  const loading = $('#dropLoading')
   
   values.each((index,elem)=>{
     const el = $(elem)
     const percent = el.find('.percent')
     const value = percent.data('percent')+'%'
-    
-    console.log(percent)
+
     percent.animate({'width': value},500)
     
   })
   
+  confirm.on('click', ()=>{
+      
+    loadingInit()
+    loading.fadeIn()
+    setTimeout(()=>{
+      loading.fadeOut(()=>{
+        window.location='/plans'
+      })
+    },7000)
+    
+  })
+  
 }) 

js/modules.js

@@ -0,0 +1,61 @@
+
+function allowDrop(ev) {
+  ev.preventDefault();
+}
+
+function drag(ev) {
+  ev.dataTransfer.setData("ID", ev.target.id)
+  $('.drop-action').addClass('drop-inactive')
+  $('.droppable').removeClass('drop-inactive').addClass('drop-active')
+}
+
+function drop(ev) {
+  
+  ev.preventDefault();
+  
+  const target = $(ev.currentTarget).find('.modules-container')
+  const overlay = $('#dropConfirm')
+  const loading = $('#dropLoading')
+  const discard = overlay.find('.discard')
+  const confirm = overlay.find('.confirm')
+  const data = ev.dataTransfer.getData("ID")
+  
+  let once = true
+  
+  overlay.fadeIn()
+  
+  discard.on('click',()=>{
+    if(once){
+      overlay.fadeOut()
+      once = false
+    }
+  })  
+  
+  confirm.on('click', ()=>{
+
+    if(once){
+      loadingInit()
+      overlay.fadeOut()
+      loading.fadeIn()
+
+      setTimeout(()=>{
+        const module = $('#'+data)
+        loading.fadeOut()
+        target.append('<div class="div-drag">'+module.text()+'</div>')
+      },7000)
+      once = false
+    }
+
+  })
+
+} 
+
+function dragLeave(ev) {
+  $('.drop-action').removeClass('drop-inactive')
+  $('.droppable').removeClass('drop-active')
+}
+
+
+
+
+ 

js/plans.js

@@ -0,0 +1 @@
+ 

js/scripts.js

@@ -1,63 +1 @@
 
-function allowDrop(ev) {
-  ev.preventDefault();
-}
-
-function drag(ev) {
-  ev.dataTransfer.setData("ID", ev.target.id)
-  $('.drop-action').addClass('drop-inactive')
-  $('.droppable').removeClass('drop-inactive').addClass('drop-active')
-}
-
-function drop(ev) {
-  
-  ev.preventDefault();
-  
-  const target = $(ev.currentTarget).find('.modules-container')
-  const overlay = $('#dropConfirm')
-  const loading = $('#dropLoading')
-  const discard = overlay.find('.discard')
-  const confirm = overlay.find('.confirm')
-  const data = ev.dataTransfer.getData("ID")
-  
-  let once = true
-  
-  console.log('TARGET1:',target)
-  
-  overlay.fadeIn()
-  
-  discard.on('click',()=>{
-    if(once){
-      overlay.fadeOut()
-      once = false
-    }
-  })  
-  
-  confirm.on('click', ()=>{
-
-    if(once){
-      loadingInit()
-      overlay.fadeOut()
-      loading.fadeIn()
-
-      setTimeout(()=>{
-        const module = $('#'+data)
-        loading.fadeOut()
-        target.append('<div class="div-drag">'+module.text()+'</div>')
-      },7000)
-      once = false
-    }
-
-  })
-
-} 
-
-function dragLeave(ev) {
-  $('.drop-action').removeClass('drop-inactive')
-  $('.droppable').removeClass('drop-active')
-}
-
-
-
-
-

modules.php

@@ -1,6 +1,6 @@
-<div class="modules">
+<div class="modules pattern">
     <div class="row">
-        <div class="col-3 sidebar pattern">
+        <div class="col-3 sidebar">
           <p class="font-14 font-bold text-upper text-red pb-4">Moduli disponibili</p>
           
           <div class="px-2">
@@ -152,11 +152,3 @@
     <button class="button discard">Annulla</button>
   </div>
 </div>
-
-<div id="dropLoading">
-    <div id="animation_container">
-        <canvas id="canvas"></canvas>
-        <div id="dom_overlay_container"></div>
-    </div>
-    <div id="countdown"></div>
-</div>

plans.php

@@ -0,0 +1 @@
+ 

scripts/compatibility.php

@@ -1 +1,3 @@
+<script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
+<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/loading.js"></script>
 <script type="text/javascript" src="<?php echo $BASE_URL;?>/js/compatibility.js"></script>

scripts/modules.php

@@ -1,3 +1,4 @@
 <script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
 <script type="text/javascript" src="<?php echo $BASE_URL;?>/js/loading.js"></script>
+<script type="text/javascript" src="<?php echo $BASE_URL;?>/js/modules.js"></script>
 

scss/global.scss

@@ -95,3 +95,39 @@ a{
     overflow: hidden;
     padding: 10px;
 }
+
+
+
+
+#dropLoading{
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 50px;
+  height: calc(100vh - 50px);
+  width: 100%;
+  background: rgba(0,0,0,0.8);
+  overflow: hidden;
+  #animation_container{
+    position: absolute;
+    height: 300px;
+    width: 300px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+ 
+  }   
+  #countdown{
+    position: fixed;
+    height: 30px;
+    line-height: 30px;
+    width: 50px;
+    z-index: 9999;
+    top: calc(50% + 30px);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    font-size: $font-18;
+    color: white;
+  }
+}

scss/sections/modules.scss

@@ -235,36 +235,3 @@
 }
 
 
-
-#dropLoading{
-  display: none;
-  position: fixed;
-  left: 0;
-  top: 50px;
-  height: calc(100vh - 50px);
-  width: 100%;
-  background: rgba(0,0,0,0.8);
-  overflow: hidden;
-  #animation_container{
-    position: absolute;
-    height: 300px;
-    width: 300px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
- 
-  }   
-  #countdown{
-    position: fixed;
-    height: 30px;
-    line-height: 30px;
-    width: 50px;
-    z-index: 9999;
-    top: calc(50% + 30px);
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
-    font-size: $font-18;
-    color: white;
-  }
-}

scss/sections/plans.scss

@@ -0,0 +1 @@
+ 

scss/sections/sections.scss

@@ -1,4 +1,5 @@
 
 @import "modules"; 
 @import "compatibility"; 
+@import "plans";