Table: selection ok

MobiParc/ModelePWA.csproj

@@ -132,7 +132,6 @@
     <Content Include="bin\System.Net.Http.Formatting.dll" />
     <Content Include="bin\System.Web.Http.dll" />
     <Content Include="bin\System.Web.Http.WebHost.dll" />
-    <Content Include="css\mobiparc.css" />
     <Content Include="Global.asax" />
     <Content Include="assets\img\tools.svg" />
     <Content Include="assets\img\tools_128.png" />

MobiParc/assets/css/custom.css

@@ -23,4 +23,10 @@
 
 .disabled{
     pointer-events: none;
+}
+
+.ui-selected {
+    background-color: #cce6ff !important;
+    /*color:#003366 !important;*/
+    /*font-weight:bold;*/
 }

MobiParc/assets/css/template.css

@@ -1,6 +1,5 @@
 @charset "UTF-8";
 @import url(font-awesome.min.css);
-@import "https://fonts.googleapis.com/css?family=Montserrat:700|Open+Sans:300,400|Pacifico";
 
 /*
 	Intensify by TEMPLATED
@@ -2693,7 +2692,7 @@
 
 		#header .logo {
 			color: #f6755e;
-			font-family: "Pacifico", cursive;
+			font-family: "Montserrat", cursive;
 			font-size: 2.5em;
 			letter-spacing: 2px;
 			margin-top: -5px;

MobiParc/assets/js/main.js

@@ -92,6 +92,7 @@ var load = function () {
         };
 
         // Intercepte la soumision de formulaires
+        $("#main").off("submit", "form");
         $("#main").on("submit", "form", function (event) {
             console.log("handle submit");
 
@@ -116,11 +117,14 @@ var load = function () {
                 var data = { data: event.target.result };
                 var template = Handlebars.compile(section.html());
                 $("#main").html(template(data));
+
+
             };
         });
 
         // Gere le clic sur un bouton supprimer
-        $("body").on("click", ".del", function (event) {
+        $("#main").off("click", ".del");
+        $("#main").on("click", ".del", function (event) {
             var del = $(this);
             if (confirm("Supprimer la selection!") == true) {
 
@@ -146,11 +150,12 @@ var load = function () {
         //$("#main").html(template({}));
         $("#main").html(section.html());
     }
-
 }
 
 load();
 
+
+
 // Recharge dynamiquement le contenu HTML à chaque changement d'url
 $(window).on('hashchange', function () {
     console.log("Trigger: hashchange");
@@ -183,7 +188,6 @@ else {
 
 /* retour haut de page*/
 window.onscroll = function (ev) {
-
     document.getElementById("back-top").className =(window.pageYOffset > 100) ? "": "hidden";
 };
 
@@ -197,13 +201,20 @@ $(".toggle-sync-dlg").click(function () {
     if ($(this).hasClass("modal-close")) location.reload();
 });
 
-// Rend selectionables les lignes des tables (.selectable)
-$("#main").selectable({
-    filter: ".selectable tr",
-    stop: function () {
-        $(".del").removeAttr("disabled");
-    }
-});
+// Rend les lignes des tables .selectable selectionnables
+mo = new MutationObserver(function (mutations, observer) {
+
+    $(".selectable > tbody").bind("mousedown", function (e) {
+        e.metaKey = true;
+    }).selectable({
+        filter: "tr",
+        stop: function () {
+            console.log($(".ui-selected").length);
+            $(".del").prop('disabled', ($(".ui-selected").length == 0));
+        },
+    });
+})
+mo.observe(document.querySelector('#main'), { childList: true });
 
 // ### Synchronisation des données
 
@@ -395,69 +406,3 @@ var formToJSON = function formToJSON(elements) {
     }, {});
 };
 
-
-///*
-//	Intensify by TEMPLATED
-//	templated.co @templatedco
-//	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-//*/
-
-//(function ($) {
-
-//    skel.breakpoints({
-//        xlarge: '(max-width: 1680px)',
-//        large: '(max-width: 1280px)',
-//        medium: '(max-width: 980px)',
-//        small: '(max-width: 736px)',
-//        xsmall: '(max-width: 480px)'
-//    });
-
-//    $(function () {
-
-//        var $window = $(window),
-//			$body = $('body'),
-//			$header = $('#header');
-
-//        // Disable animations/transitions until the page has loaded.
-//        $body.addClass('is-loading');
-
-//        $window.on('load', function () {
-//            window.setTimeout(function () {
-//                $body.removeClass('is-loading');
-//            }, 100);
-//        });
-
-//        // Fix: Placeholder polyfill.
-//        $('form').placeholder();
-
-//        // Prioritize "important" elements on medium.
-//        skel.on('+medium -medium', function () {
-//            $.prioritize(
-//                '.important\\28 medium\\29',
-//                skel.breakpoint('medium').active
-//            );
-//        });
-
-//        // Scrolly.
-//        $('.scrolly').scrolly({
-//            offset: function () {
-//                return $header.height();
-//            }
-//        });
-
-//        // Menu.
-//        $('#menu')
-//            .append('<a href="#menu" class="close"></a>')
-//            .appendTo($body)
-//            .panel({
-//                delay: 500,
-//                hideOnClick: true,
-//                hideOnSwipe: true,
-//                resetScroll: true,
-//                resetForms: true,
-//                side: 'right'
-//            });
-
-//    });
-
-//})(jQuery);

MobiParc/css/mobiparc.css

@@ -1,16 +0,0 @@
-
-@media screen and (min-width: 521px) and (max-width:770px) {
-
-}
-
-@media screen and (max-width: 519px) {
-
-}
-
-@media screen and (max-width: 480px) {
-
-}
-
-@media screen and (max-width: 1024px) {
-
-}

MobiParc/index.html

@@ -46,6 +46,7 @@
         </noscript>
 
         <!--  Injection Jquery  -->
+        <!-- Le contenu de la section 'main' est injecté depuis les sections plus bas dans ce document; chaque url injecte la section qui a l'id correspondant -->
 
     </section>
 
@@ -56,6 +57,9 @@
 
     <!-- Templates et boites de dialogues -->
 
+    <!-- IMPORTANT: si la section nécessite un acces à la localDb,pensez à ajouter l'attribut 'model'
+        c'est lui qui donne le nom du store à utiliser. -->
+
     <script id="index" type="x-tmpl-mustache" model="activites">
 
         <header class="align-center">
@@ -91,9 +95,19 @@
                 <a href="#activites" class="button">Ajouter</a>
             </li>
             <li>
-                <button class="del btn btn-delete" disabled>Supprimer</button>
+                <button class="del button alt" disabled>Supprimer</button>
             </li>
         </ul>
+        {{else}}
+
+        <p class="align-center"><i>(Aucune donnée enregistrée)</i></p>
+
+        <ul class="actions">
+            <li>
+                <a href="#activites" class="button">Ajouter</a>
+            </li>
+        </ul>
+
         {{/if}}
 
     </script>
@@ -130,11 +144,13 @@
                     </div>
 
                     <div class="12u$">
-                        <select id="engin" name="engin">
-                            <option value="">- Engin -</option>
-                            <option value="01P037">MINI PELLE CASE P037</option>
-                            <option value="01P038">PELLE LIEBHERR P038 R313/2013</option>
-                        </select>
+                        <div class="select-wrapper">
+                            <select id="engin" name="engin">
+                                <option value="">- Engin -</option>
+                                <option value="01P037">MINI PELLE CASE P037</option>
+                                <option value="01P038">PELLE LIEBHERR P038 R313/2013</option>
+                            </select>
+                        </div>
                     </div>
 
                     <div class="12u$">