Recuperation des fichiers depuis canal-bis

MobiParc/App_Start/WebApiConfig.cs

@@ -0,0 +1,22 @@
+
+using System.Web.Http;
+
+namespace MobiParc
+{
+    public static class WebApiConfig
+    {
+        public static void Register(HttpConfiguration config)
+        {
+            // Configuration et services API Web
+
+            // Itinéraires de l'API Web
+            config.MapHttpAttributeRoutes();
+
+            config.Routes.MapHttpRoute(
+                name: "DefaultApi",
+                routeTemplate: "api/{controller}/{id}",
+                defaults: new { id = RouteParameter.Optional }
+            );
+        }
+    }
+}

MobiParc/Controllers/CanalbisController.cs

@@ -0,0 +1,57 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net;
+using System.Net.Http;
+using System.Web.Http;
+using System.IO;
+using Newtonsoft.Json;
+using System.Xml;
+
+namespace canalbis.Controllers
+{
+    public class CanalbisController : ApiController
+    {
+        // GET: api/Canalbis
+        public IEnumerable<string> Get()
+        {
+            
+           var files = Directory.EnumerateFiles(System.Web.HttpContext.Current.Server.MapPath(@"~/data/"));
+
+            return files.ToArray();
+        }
+
+        // GET: api/Canalbis/5
+        public string Get(string name)
+        {
+            return File.ReadAllText(System.Web.HttpContext.Current.Server.MapPath(@"~/data/" + name + ".json"));
+        }
+
+        // POST: api/Canalbis
+        public string Post([FromBody]string value)
+        {
+           var data =  System.Web.HttpContext.Current.Request["data"];
+           var f= File.CreateText(System.Web.HttpContext.Current.Server.MapPath(@"~/data/" + Guid.NewGuid() +".json"));
+            f.Write(data);
+            f.Close();
+
+
+           // XmlDocument doc = (XmlDocument)JsonConvert.DeserializeXmlNode(data);
+
+           // doc.Save(System.Web.HttpContext.Current.Server.MapPath(@"~/data/" + Guid.NewGuid() + ".xml"));
+
+            
+            return "ole";
+        }
+
+        // PUT: api/Canalbis/5
+        public void Put(int id, [FromBody]string value)
+        {
+        }
+
+        // DELETE: api/Canalbis/5
+        public void Delete(int id)
+        {
+        }
+    }
+}

MobiParc/Global.asax

@@ -0,0 +1 @@
+<%@ Application Codebehind="Global.asax.cs" Inherits="MobiParc.WebApiApplication" Language="C#" %>

MobiParc/Global.asax.cs

@@ -0,0 +1,12 @@
+using System.Web.Http;
+
+namespace MobiParc
+{
+    public class WebApiApplication : System.Web.HttpApplication
+    {
+        protected void Application_Start()
+        {
+            GlobalConfiguration.Configure(WebApiConfig.Register);
+        }
+    }
+}

MobiParc/MobiParc.csproj

@@ -48,6 +48,16 @@
       <Private>True</Private>
     </Reference>
     <Reference Include="Microsoft.CSharp" />
+    <Reference Include="Newtonsoft.Json, Version=10.0.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed, processorArchitecture=MSIL">
+      <HintPath>..\packages\Newtonsoft.Json.10.0.3\lib\net45\Newtonsoft.Json.dll</HintPath>
+      <Private>True</Private>
+    </Reference>
+    <Reference Include="System.Net.Http" />
+    <Reference Include="System.Net.Http.Formatting, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <SpecificVersion>False</SpecificVersion>
+      <HintPath>..\packages\Microsoft.AspNet.WebApi.Client.5.2.3\lib\net45\System.Net.Http.Formatting.dll</HintPath>
+      <Private>True</Private>
+    </Reference>
     <Reference Include="System.Web.DynamicData" />
     <Reference Include="System.Web.Entity" />
     <Reference Include="System.Web.ApplicationServices" />
@@ -57,6 +67,16 @@
     <Reference Include="System.Core" />
     <Reference Include="System.Data.DataSetExtensions" />
     <Reference Include="System.Web.Extensions" />
+    <Reference Include="System.Web.Http, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <SpecificVersion>False</SpecificVersion>
+      <HintPath>..\packages\Microsoft.AspNet.WebApi.Core.5.2.3\lib\net45\System.Web.Http.dll</HintPath>
+      <Private>True</Private>
+    </Reference>
+    <Reference Include="System.Web.Http.WebHost, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL">
+      <SpecificVersion>False</SpecificVersion>
+      <HintPath>..\packages\Microsoft.AspNet.WebApi.WebHost.5.2.3\lib\net45\System.Web.Http.WebHost.dll</HintPath>
+      <Private>True</Private>
+    </Reference>
     <Reference Include="System.Xml.Linq" />
     <Reference Include="System.Drawing" />
     <Reference Include="System.Web" />
@@ -67,6 +87,19 @@
   </ItemGroup>
   <ItemGroup>
     <Content Include="packages.config" />
+    <Content Include="data\530e3b26-5b66-4aa0-af9b-446980d322fa.json" />
+    <Content Include="data\5eee9fc9-68e0-447f-8e9e-98cfc91f220d.json" />
+    <Content Include="data\anomalies.json" />
+    <Content Include="data\contacts.json" />
+    <Content Include="data\releves.json" />
+    <Content Include="data\users.json" />
+    <Content Include="obj\Debug\DesignTimeResolveAssemblyReferencesInput.cache" />
+    <Content Include="obj\Debug\MobiParc.csprojResolveAssemblyReference.cache" />
+    <Content Include="bin\MobiParc.dll.config" />
+    <Content Include="bin\roslyn\Microsoft.CSharp.Core.targets" />
+    <Content Include="bin\roslyn\Microsoft.VisualBasic.Core.targets" />
+    <Content Include="bin\roslyn\VBCSCompiler.exe.config" />
+    <Content Include="manifest.json" />
     <None Include="Web.Debug.config">
       <DependentUpon>Web.config</DependentUpon>
     </None>
@@ -75,11 +108,51 @@
     </None>
   </ItemGroup>
   <ItemGroup>
+    <Content Include="bin\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.dll" />
+    <Content Include="bin\Microsoft.CodeDom.Providers.DotNetCompilerPlatform.xml" />
+    <Content Include="bin\MobiParc.dll" />
+    <Content Include="bin\MobiParc.pdb" />
+    <Content Include="bin\Newtonsoft.Json.dll" />
+    <Content Include="bin\roslyn\csc.exe" />
+    <Content Include="bin\roslyn\Microsoft.Build.Tasks.CodeAnalysis.dll" />
+    <Content Include="bin\roslyn\Microsoft.CodeAnalysis.CSharp.dll" />
+    <Content Include="bin\roslyn\Microsoft.CodeAnalysis.dll" />
+    <Content Include="bin\roslyn\Microsoft.CodeAnalysis.VisualBasic.dll" />
+    <Content Include="bin\roslyn\System.Collections.Immutable.dll" />
+    <Content Include="bin\roslyn\System.Reflection.Metadata.dll" />
+    <Content Include="bin\roslyn\vbc.exe" />
+    <Content Include="bin\roslyn\VBCSCompiler.exe" />
+    <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="img\tools.svg" />
+    <Content Include="img\tools_128.png" />
+    <Content Include="img\tools_512.png" />
+    <Content Include="index.html" />
+    <Content Include="js\handlebars.min.js" />
+    <Content Include="js\jquery-3.2.1.min.js" />
+    <Content Include="js\jquery-ui.min.js" />
+    <Content Include="js\mobiparc.js" />
+    <Content Include="sw.js" />
+    <Content Include="tools.ico" />
     <Content Include="Web.config" />
   </ItemGroup>
   <ItemGroup>
+    <Compile Include="App_Start\WebApiConfig.cs" />
+    <Compile Include="Controllers\CanalbisController.cs" />
+    <Compile Include="Global.asax.cs">
+      <DependentUpon>Global.asax</DependentUpon>
+    </Compile>
+    <Compile Include="obj\Debug\TemporaryGeneratedFile_036C0B5B-1481-4323-8D20-8F5ADCB23D92.cs" />
+    <Compile Include="obj\Debug\TemporaryGeneratedFile_5937a670-0e60-4077-877b-f7221da3dda1.cs" />
+    <Compile Include="obj\Debug\TemporaryGeneratedFile_E7A71F73-0F8D-4B9B-B56E-8E70B10BC5D3.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
+  <ItemGroup>
+    <Folder Include="obj\Debug\TempPE\" />
+  </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

MobiParc/Web.config

@@ -5,17 +5,29 @@
   -->
 <configuration>
   <system.web>
-    <compilation debug="true" targetFramework="4.5.2"/>
-    <httpRuntime targetFramework="4.5.2"/>
+    <compilation debug="true" targetFramework="4.5.2" />
+    <httpRuntime targetFramework="4.5.2" />
   </system.web>
   <system.codedom>
     <compilers>
-      <compiler language="c#;cs;csharp" extension=".cs"
-        type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
-        warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701"/>
-      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb"
-        type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
-        warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+"/>
+      <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:6 /nowarn:1659;1699;1701" />
+      <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" warningLevel="4" compilerOptions="/langversion:14 /nowarn:41008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" />
     </compilers>
   </system.codedom>
+<system.webServer>
+    <handlers>
+      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
+      <remove name="OPTIONSVerbHandler" />
+      <remove name="TRACEVerbHandler" />
+      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
+    </handlers>
+  </system.webServer>
+  <runtime>
+    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
+      <dependentAssembly>
+        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
+        <bindingRedirect oldVersion="0.0.0.0-10.0.0.0" newVersion="10.0.0.0" />
+      </dependentAssembly>
+    </assemblyBinding>
+  </runtime>
 </configuration>

MobiParc/css/mobiparc.css

@@ -0,0 +1,1297 @@
+
+    body {
+        background-color: #E3EAED;
+        font-family: Arial, Helvetica, sans-serif;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex; 
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column; 
+        min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */
+        margin:0;
+        padding:0;
+        color: #232323;
+        font-family: Arial, Helvetica, sans-serif;
+       }
+
+
+   
+
+    header,footer,.main, .footer-top{
+        background:#fff;
+        padding-left:16px;
+        padding-right:16px;
+        padding-top:0;
+        padding-bottom:8px;
+        margin:0;
+        width: 1024px;
+        margin-left:auto;
+        margin-right:auto
+    }
+   
+    .no{
+        /*display:none*/
+    }
+
+   
+
+	.main{
+        display: block; /* IE fix */
+        -webkit-box-flex: 1;
+        -ms-flex: 1 1 auto;
+        flex: 1 1 auto; /* occupe la hauteur restante */
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex; /* crée un contexte flex pour ses enfants */
+        -webkit-box-orient: horizontal;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction:column
+        
+		}
+
+    .container{
+        display:flex;
+        flex-direction:row;
+        padding:0;
+        margin:0
+    }
+
+    .btn{
+    background:rgba(0, 0, 0, 0.25);
+    color:#000;
+    display: inline-block;
+    font-weight: 400;
+    line-height: 1.25;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    padding: .5rem 1rem;
+    font-size: 1.25rem;
+    border-radius: .25rem;
+    text-decoration:none
+       
+    }
+
+
+    .btn-delete{
+        background-color:#f00;
+        color:#fff;
+        width:auto;
+
+    }
+
+    button:disabled{
+        opacity: 0.2;
+        cursor: not-allowed;
+    }
+
+    .btn-save:after{
+       padding-left:10px;
+       content:"\1F5AB";
+       
+
+    }
+
+   .input-file-img{
+       color:transparent
+
+   }
+
+    .input-file-img:after,.btn-duplicate:after{
+        padding-left:10px !important;
+        content:"\1F4F8" !important;
+        color:#000
+    }
+
+    .btn-delete:after{
+       padding-left:10px !important;
+       content:"\1F5D1" !important
+        
+    }
+
+    .list-contact{
+       
+        padding:0
+    }
+
+    .list-contact li{
+        list-style:none;
+        list-style:none;
+        padding-bottom:10px
+    }
+
+    .list-contact .btn{
+        color:#fff;
+        background:#587b8c
+    }
+    .list-contact a{
+        margin-right:10px
+    }
+
+    /*.more{
+        flex:1;
+        margin-top: 62px;
+    }
+
+    .more aside{
+        padding: 8px;
+        margin: 0;
+        margin-bottom: 12px;
+    }
+    .content{
+        flex:2;
+        margin-right:8px
+    }
+    
+	.breadcrumb{
+        display:flex;
+		margin: 0; 
+        padding: 0;
+		justify-content: flex-start;
+        list-style:none;
+        background-color: #587b8c;
+        font-family: 'din_regularregular', Arial, Helvetica, sans-serif;
+        padding-top:8px;
+        padding-bottom:8px
+        
+    }
+	.breadcrumb li{
+		margin-right:10px; 
+		 
+		}
+	.breadcrumb a{
+        color:#fff;
+        text-decoration:none
+	}*/
+    nav{
+		width:100%;
+		margin: 0; padding: 0; 
+		display:flex;
+		justify-content: space-around;
+		}
+
+
+    /*nav div{
+		color: #fff; 
+        margin:0;
+        padding:0
+
+    }*/
+    
+    .footer-top{
+        background-color: #8CA9B7;
+    font-size: 1.4em;
+    padding: 16px;
+    display:flex;
+    color:#fff;
+    font-size:14px;
+    font-family:'din__bold_bold', Arial, Helvetica, sans-serif;
+    }
+
+    .footer-top div{
+
+        flex:1;
+        display:flex;
+        flex-direction:column
+    
+    }
+
+    .footer-top div:nth-child(2) {
+        align-items:flex-end
+        }
+    
+    .footer-top ul{
+        display:flex;
+        list-style:none;
+        margin:0;
+        padding:0
+    }
+
+
+    .footer-top a{
+
+        text-decoration:none;
+        color:#fff;
+    }
+
+    footer {
+        background:#587b8c;
+        
+        }
+
+	footer nav{
+		justify-content: flex-end;
+        padding: 10px 0 0 0;   
+		}
+
+    footer nav div:nth-child(1){
+
+        align-items:flex-start;
+        flex:1
+
+    }
+
+    footer nav div:not(:first-child){
+        padding-left:20px
+    }
+
+
+
+    footer a{
+        color:#fff;
+        text-decoration:none;
+        line-height: 200%;
+        font-family: 'din__bold_bold', Arial, Helvetica, sans-serif;
+    }
+
+    footer a:nth-child(1){
+        padding:0
+    }
+
+
+    /*.icon2-google-plus, .icon2-facebook, .icon2-twitter, .icon2-feed, .icon2-youtube, .icon2-flickr {
+    display: inline-block;
+    width: 28px;
+    height: 28px;
+    background-image: url(../img/social.png);
+    background-repeat: no-repeat;
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.icon2-feed {
+    background-position: -168px 0;
+}
+
+.icon2-youtube {
+    background-position: -224px 0;
+}
+
+.icon2-flickr {
+    background-position: -280px 0;
+}
+
+.icon2-twitter {
+    background-position: -112px 0;
+}
+
+.icon2-google-plus {
+    background-position: 0 0;
+}
+
+.icon2-facebook {
+    background-position: -56px 0;
+}*/  
+
+.footer-top li {
+    margin-right: 15px;
+    width: 28px;
+}
+
+
+    header{
+        display:flex;
+        flex-direction: column;
+        align-items: stretch;
+       }
+    
+    header section{        
+        display:flex
+        }
+
+
+    header section:nth-child(1){
+        align-self:flex-end;
+        border-bottom:solid 1px #587b8c;
+        margin:0;
+        padding:0;
+        margin-bottom:15px;
+        margin-top:10px;
+       
+       
+    }
+
+   
+            
+    
+   header ul{
+        display:flex;
+        list-style:none;
+        margin:0;
+        padding:0 
+        
+    }
+    header li{
+        padding:0;
+        margin:0;
+       padding-left:20px;
+       
+    }
+
+    /*header nav div:not(:first-child){
+        padding-top:20px;
+        
+    }*/
+
+     header nav div:first-child{
+         padding-right:40px;
+     }
+    header nav div:not(:first-child){   
+        padding-top:20px;
+        border-left:solid 1px #587b8c;
+        padding-left:10px;
+        vertical-align:bottom;
+        flex:1
+	}
+     header nav div:nth-child(3){
+         border-left:0
+     }
+
+    header nav a{
+        text-decoration:none;
+        color:#587b8c;
+        font-size: 1.4em;
+
+    }
+
+    /* gestion des aside*/
+
+    /*.childs ul{
+        display:flex;
+        flex-direction:column;
+        width:100%;
+        list-style:none;
+        margin:0;
+        padding:0
+    }
+
+    .childs li{
+     background:#587b8c;
+     padding: 4px 0 4px 4px;
+     margin-bottom:10px;
+    
+    }
+    .childs li:hover{
+          opacity:0.6
+    }
+
+    .childs a{
+        text-decoration:none;
+    color: #fff;
+    padding: 6px 25px 6px 8px;
+    margin-right: 4px;
+    display: block;
+       background: url(../img/fleche-sous-menu.jpg) right center no-repeat;
+      
+    }*/
+
+
+    /*.childs a:after{
+        color:#fff;
+        content:\002794;
+    }*/
+        
+    /*.blocks{
+       
+        background-color: #587b8c;
+        color:#fff;
+        margin-bottom:12px;
+    }
+
+    .block-pad{
+       
+       opacity:0.3;
+        
+    }
+
+
+    .blocks div,blocks h2,.blocks ul, .blocks li{
+        margin:0;
+        padding:0;
+    }
+
+    .blocks h2{
+     color:   #232323;
+    font-family: "Times New Roman", Times, serif;
+    font-weight: normal;
+    line-height: 80%;
+    }
+
+     .blocks li{
+             margin-bottom: 8px;
+           
+     }
+
+    .blocks li a{
+        text-decoration:none;
+        color:#fff;
+        line-height: 120%;
+    display: block;
+    padding: 0 0 0 20px;
+    margin-bottom: 5px;
+}
+    }
+
+     .blocks ul{
+       list-style:none;
+   }
+
+    
+   .block-pad a{
+      
+        color:#000 !important;
+        text-decoration:none;
+     
+    }
+
+  
+   .documents{
+       margin:0;
+       padding:0;
+   }
+   .documents ul{
+        list-style:none;
+        width:100%;
+        margin:0;
+        padding:0
+   }
+   .documents li{
+       display:flex;
+       flex-direction:row;
+       padding: 16px;
+   }
+
+   .documents li:nth-child(even){
+       background:#E3EAED
+   }
+
+   .documents li:nth-child(odd){
+       background:#B7C9D2
+   }
+    .documents h2{
+      margin:0;
+      padding:0
+   }
+   
+   .documents span:first-child{
+       flex:2
+   }
+    .documents span:not(:first-child){
+       flex:1
+   }
+
+	.photos div{
+		display:flex;
+
+	}
+
+	.photo-all{
+        margin:0;
+	color: #587b8c;
+    padding: 25px 30px 0 0;
+    margin-right: 2px;
+    font-weight: bold;
+    vertical-align: bottom;
+    align-items:flex-end
+	}
+
+   
+   .photos h2{
+       font-family: "Times New Roman", Times, serif;
+       flex:1
+   }
+   .photos ul{
+	    background-color: #E3EAED;
+        padding: 16px;
+	    list-style:none;
+        margin:0;
+        display:flex
+   }
+   
+   .photos li{
+        display:none;
+   }
+
+   
+   .photos li:nth-child(-n+4){
+        display:inline-flex;
+        margin-right:8px;
+       
+   }
+
+    .photos a{
+        text-decoration:none;
+    }
+
+    .photos img{
+        max-height: 97px;
+    }*/
+
+  
+
+ .bt-menu, .bt-menu-close{
+      background-color:transparent;
+      border:none;
+      cursor:pointer;
+      -webkit-transform:translateY(-50%);
+      -moz-transform:translateY(-50%);
+      -o-transform:translateY(-50%);
+      -ms-transform:translateY(-50%);
+      transform:translateY(-50%);
+      z-index:1002;
+      display:none
+ }
+
+ header nav div:nth-child(2){
+     display:none;
+     margin:0;
+     padding:0
+ }
+
+ 
+header a svg{
+    width:298px;
+    height:43px
+}
+
+
+/* resultat de recherche*/
+/*.result article{
+    display:flex;
+    padding-bottom:8px;
+    padding-top:8px;
+    border-bottom:1px solid #B7C9D2;
+}*/
+
+
+/*.result div:first-child{}*/
+
+/*.result picture{
+    display:flex;
+    margin: auto;
+    margin-right:8px;
+    background:#8CA9B7;
+    flex: 0 0 120px;
+    height:120px;
+    justify-content: center;
+    align-items: center;
+  
+}
+
+.result h2 {
+    padding-top:0;
+    font-size:18px;
+    margin-top:0  
+}
+
+.result a{
+    color:#587b8c;
+}
+
+.pager-bar{
+    display:flex;
+   
+    font-weight:bold;
+    color:#587b8c;
+    font-size:14px;
+    justify-content:flex-end;
+
+}*/
+/** taille image*/
+/*figure{
+  max-width: 100%;
+}
+
+figcaption {
+    display:none
+}
+
+figure img{
+    margin:0;
+    padding:0
+}*/
+
+.top {
+     border-bottom:1px solid #8CA9B7;
+}
+
+
+/*.pager-bar span:first-child{
+    flex:1;
+    padding: 8px 0;
+}
+
+.pager-bar span:not(:first-child){
+    background: #E3EAED;
+    cursor:pointer;
+    padding:8px;
+}*/
+
+
+/* modal*/
+
+.modal-background {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: white;
+        opacity: .50;
+        -webkit-opacity: .5;
+        -moz-opacity: .5;
+        filter: alpha(opacity=50);
+        z-index: 1010;
+    }
+    
+    .modal-content {
+        background-color: white;
+        border-radius: 10px;
+        -webkit-border-radius: 10px;
+        -moz-border-radius: 10px;
+        box-shadow: 0 0 20px 0 #222;
+        -webkit-box-shadow: 0 0 20px 0 #222;
+        -moz-box-shadow: 0 0 20px 0 #222;
+        display: none;
+        height: 240px;
+        left: 50%;
+        margin: -120px 0 0 -160px;
+        padding: 10px;
+        position: absolute;
+        top: 50%;
+        width: 320px;
+        z-index: 1010;
+    }
+
+    .modal-open,.modal-close{
+        cursor:pointer;
+    }
+    .modal-background.active, .modal-content.active {
+        display: block;
+    }
+/**bouton de retour*/
+
+#cRetour{
+  border-radius:3px;
+  padding:10px;
+  font-size:15px;
+  text-align:center;
+  color:#fff;
+  background:rgba(0, 0, 0, 0.25);
+  position:fixed;
+  right:20px;
+  opacity:1;
+  z-index:9999;
+  transition:all ease-in 0.2s;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+#cRetour:before{ content: '\25b2'; }
+
+#cRetour:hover{
+  background:rgba(0, 0, 0, 1);
+  transition:all ease-in 0.2s;
+}
+#cRetour.cInvisible{
+  bottom:-35px;
+  opacity:0;
+  transition:all ease-in 0.5s;
+}
+
+#cRetour.cVisible{
+  bottom:20px;
+  opacity:1;
+}
+
+/** fin modal*/
+
+/*.subscription-details{
+    display:none
+}*/
+
+/*actu grid*/
+
+/*.grid{
+
+    display: grid;
+  grid-template-columns: 25% 25% 25% 25%;
+  /*grid-template-rows: 400px 400px 400px 400px;*/ 
+  grid-column-gap: 0;
+  grid-row-gap: 0;
+  grid-auto-flow: row;
+}
+
+.grid div{
+    padding: 10px;
+    border-left: solid #B7C9D2 1px;
+    border-bottom: solid #B7C9D2 1px;
+    min-height:230px;
+    height:230px;
+    margin:0
+}
+.grid h2{
+  font-size:15px
+}
+
+
+.grid a{
+    color:#52798C;
+
+}*/
+/**home*/
+
+.home{
+    display:flex;
+    flex-direction:column;
+    flex-grow:initial;
+    align-content:flex-start
+}
+
+
+.home-actu{
+    position:relative;
+    float:left;
+    width:100%;
+    margin:0 auto;
+    background:#8CA9B7;
+
+}
+.home-actu .rslides{
+    list-style:none;
+    margin: 0;
+
+}
+
+.home-actu .rslides li {
+    margin:0;
+    padding:0;
+    }
+
+.home h1{
+   position:absolute;
+   top:10px;
+   z-index:104;
+   background:#587b8c;
+   padding:16px;
+   color:#fff;
+   width:340px;
+   margin:0;
+   padding-bottom:0;
+}
+
+.home-actu h2{
+   position:absolute;
+   top:48px;
+   z-index:105;
+    background:#587b8c;
+   padding:16px;
+   width:340px;
+    margin:0;
+    padding-top:0
+}
+
+.home-actu >a{
+    bottom:0;
+    right:0;
+    position:absolute;
+    background:#fff;
+    color:#587b8c;
+    font-size:1.2em;
+    text-decoration:none;
+    padding:8px;
+    margin:0;
+    z-index:102;
+}
+
+.home-actu h2 a{
+    color:#000;
+    font-size:0.7em;
+    z-index:200;  
+     
+}
+.home-actu picture{
+ margin:0;
+ padding:0;
+ text-align:left
+}
+
+/*.home-actu source{
+  
+}*/
+
+
+
+.home-ps,.home-pp{
+    display:flex;
+    align-content:flex-start;
+   
+
+}
+
+.home-pp a{
+    flex:1;
+    background:#587b8c;
+ 
+}
+
+.home-pp a {
+    color:#fff;
+    text-decoration:none;
+    margin:0;
+    padding-left:12px;
+    padding-top:12px;
+}
+
+
+.home-pp a:not(:first-child), .home-ps h4:not(:first-child){
+   margin-left:12px
+}
+.home-pp h3{
+    height:50px;
+    margin:0;
+    padding: 15px 0 15px 15px;
+    font-size: 1.3em;
+    text-align:center
+}
+
+.home-ps h4 {
+    flex:1;
+    border: solid 2px #587b8c;
+    padding:8px;
+    margin-top:16px;
+    height:50px
+}
+
+
+.home-ps a{
+    margin:auto;
+    text-decoration:none;
+    color:#587b8c
+}
+
+.home-ps h4:nth-child(2){
+    border-color:#9CC118
+}
+
+.home-ps h4:nth-child(2) a {
+    color:#9CC118
+}
+
+.home-ps h4:nth-child(5){
+    border-color:#F5A30C
+}
+
+.home-ps h4:nth-child(5) a {
+    color:#F5A30C
+}
+
+.home-ps h4:nth-child(6){
+    border-color:#A41E23
+}
+
+.home-ps h4:nth-child(6) a {
+    color:#A41E23
+}
+
+/**a verifier*/
+
+
+@media screen and (min-width: 521px) and (max-width:770px){
+    .grid{
+    grid-template-columns: 33% 33% 34%; 
+}
+
+    .home-actu h1{
+        display:none;
+    }
+
+    .home-actu h2{
+       
+        top:10px;
+        width:auto;
+        font-size:1.2em;
+        max-width:240px;
+    }
+
+      .home-actu h2 a{
+       
+       color:#fff
+    }
+    .home-pp{
+        display:grid;
+        grid-template-columns: 50% 50%;
+        grid-auto-flow: row;
+        grid-column-gap: 0;
+         grid-row-gap: 0;
+    }
+
+    .home-pp div{
+        position:relative;
+        display:flex;
+        flex-direction:row;
+      
+        
+
+    }
+
+        .home-pp div, .home-ps h4{
+            margin-left:5px;
+            margin-top:2.5px;
+        }
+
+    .home-pp div:not(:first-child), .home-ps h4:not(:first-child){
+   margin-left:5px
+}
+    
+        .home-pp h3{
+       padding-right:170px;
+       height:63px;
+       font-size:1em
+    }
+
+    .home-pp picture{
+        position:absolute;
+        right:0
+    }
+     .home-ps{
+        display:grid;
+        grid-template-columns: 33.33% 33.33% 33.34%;
+         grid-auto-flow: row;
+          grid-column-gap: 0;
+         grid-row-gap: 0;
+    }
+
+
+}
+
+@media screen and (max-width: 519px){
+    .grid{
+        grid-template-columns:  100% ;
+        }
+
+    .home-actu h1{
+        display:none;
+    }
+
+    .home-actu h2{
+        top:10px;
+        width:auto;
+        font-size:1.2em;
+        max-width:240px;
+    }
+
+        .home-actu h2 a{
+       
+       color:#fff
+    }
+
+        .home-pp{
+        display:flex;
+        flex-direction:column;
+      
+    }
+            .home-ps{
+        display:flex;
+        flex-direction:column;
+        
+    }
+
+            .home-pp div{
+        position:relative;
+        display:flex;
+        flex-direction:row;
+    }
+
+              .home-pp div, .home-ps h4{
+            margin-left:5px;
+            margin-right:5px;
+             margin-top:2.5px;
+        }
+
+    .home-pp div:not(:first-child), .home-ps h4:not(:first-child){
+   margin-left:5px;
+   margin-right:5px
+}
+
+        .home-pp h3{
+       padding-right:180px;
+       height:63px;
+       font-size:1.1em
+    }
+
+    .home-pp picture{
+        position:absolute;
+        right:0
+    }
+}
+
+/*@media screen and (max-width: 340px){
+    .result picture{
+        width:0;
+        height:0;
+        flex:0
+    }
+
+}*/
+
+
+@media screen and (max-width: 480px) {
+
+/*.result article{
+flex-direction:column;    
+    
+}*/
+
+.top{
+    border:0
+}
+
+/*.pager-bar{
+    flex-direction:column;
+    justify-content:center;
+    text-align: center;
+}
+
+.pager-bar span{
+    border-bottom:solid 1px #8CA9B7;
+}*/
+
+
+}
+
+@media screen and (max-width: 1024px) {
+    body{
+        background:#fff;
+    }
+  header,footer,.main, .footer-top{
+     width:100%;
+      padding:0;
+    margin:0;
+      
+  }
+
+  .main{
+      margin-top:50px;
+  }
+    .breadcrumb, .footer-top>*{
+        margin:5px
+    }
+   .container{
+        flex-direction:column;
+        margin:5px
+    }
+
+   /*.more{
+       flex:1;
+       margin-top:0
+   }
+
+   .content{
+       flex:1;
+       margin-right:0
+   }*/
+
+   header{
+       
+        flex-direction: row;
+        padding-top:8px;
+        position:fixed;
+        top:0;
+        z-index:1001;
+        
+       }
+
+   header nav{
+
+       justify-content:initial
+   }
+    header section:nth-child(1){
+      
+       display:none
+    }
+
+    header section:nth-child(2){
+      
+    height:45px
+    }
+
+
+    header nav div:not(:first-child) {
+        display:none;
+        flex:1
+    
+}
+  header nav a:first-child{
+      padding:0;
+      margin:0;
+      
+  }
+
+        header nav div:first-child {
+
+            display:flex;
+            flex-direction:row;
+            padding-right:0;
+            margin:0;
+        }
+
+
+   header nav,  .footer-top div, .footer-top{
+       flex-direction:column
+   }
+
+   footer nav{
+       flex-direction:column-reverse
+   }
+   .footer-top div:nth-child(2){
+       align-items:flex-start
+   }
+
+ .bt-menu{
+     display:block;
+     padding-top:15px
+ }
+.bt-menu svg{
+    width:45px;
+    height:45px;
+    fill:#587b8c}
+
+.bt-menu-close{
+    display:block;
+         padding-top:35px;
+         padding-left:12px;
+         padding-bottom:0px;
+         height:52px
+
+}
+.bt-menu-close svg{
+    width: 42px;
+    height: 36px;
+    fill:#fff;
+    margin:0;
+    padding:0;
+    
+   
+}
+
+.sidebar:hover svg{
+   
+    fill:#587b8c;
+    margin:0;
+    padding:0
+}
+
+header a svg{
+    width:242px;
+    height:35px
+}
+
+.sidebar{
+    z-index:1014;
+    background-color:#fff;
+    display:block !important;
+    margin:0;
+    background:#587b8c;
+    padding: 0; 
+    border: 0; 
+    vertical-align:auto;
+    border-top:1px solid #fff;
+    padding-bottom:10px;
+    position:relative;
+    top:-10px
+    
+
+}
+.sidebar:hover{
+    background:#fff;
+}
+
+.sidebar a{
+    color:#fff;
+}
+
+.sidebar:hover a{
+    color:#587b8c;
+}
+
+
+/*.photos li{
+        display:none;
+   }
+
+   
+   .photos ul:nth-child(-n+2){
+        display:inline-block;
+        margin-right:8px;
+       
+   }*/
+}
+
+.main .input-group {
+    display:flex;
+    flex-direction: column;
+}
+.main label{
+    display: block;
+    width:100%;
+    font-size:1.25em;
+    padding-bottom:16px
+}
+
+    .main div:not(:first-child) {
+
+        padding-top:16px
+    }
+
+    .main .button-submit{
+
+        
+        margin-top:16px
+    }
+
+.main table {
+    width:100%;
+}
+.main thead {
+background:#587b8c;
+color:#fff;
+text-transform: uppercase;
+font-weight:bold
+
+
+}
+
+.main tbody tr:nth-child(2n) {
+background:#B7C9D2;
+
+}
+
+.main td {
+    padding:4px
+}
+
+.main input, .main select, .main button{
+
+    font-size:1.125em;
+    padding:4px;
+}
+
+.main h1, .main h2{
+    margin-top:12px;
+    margin-bottom:0
+
+}
+
+.ui-selected {
+    background-color: #f00 !important;
+    color:#fff !important;
+    font-weight:bold
+}

MobiParc/img/tools.svg

@@ -0,0 +1,91 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 470 470" style="enable-background:new 0 0 470 470;" xml:space="preserve">
+<g>
+	<path style="fill:#DB8F63;" d="M390.77,79.23c1.726,1.726,3.411,3.46,5.061,5.201l11.855-11.855c1.073-1.073,1.073-2.819,0-3.892
+		l-6.37-6.37c-1.073-1.072-2.818-1.072-3.892,0L385.57,74.168C387.31,75.817,389.044,77.504,390.77,79.23z"/>
+	<path style="fill:#DB8F63;" d="M206.004,243.126l-7.785,7.784c2.929,2.929,2.929,7.678,0,10.607L25.51,434.227l10.263,10.263
+		l172.708-172.71c2.929-2.929,7.678-2.929,10.606,0c0.002,0.002,10.611-10.607,10.611-10.607l-16.184-16.184
+		C210.946,245.778,208.037,245.159,206.004,243.126z"/>
+	<path style="fill:#DB8F63;" d="M244.99,213.516l16.183,16.183l10.609-10.609c-2.932-2.931-2.932-7.68-0.003-10.609l64.056-64.057
+		l-10.261-10.261l-64.057,64.057c-1.464,1.464-3.384,2.197-5.303,2.197c-1.919,0-3.839-0.732-5.303-2.197
+		c-0.001,0-7.784,7.783-7.784,7.783C245.162,208.036,245.78,210.946,244.99,213.516z"/>
+	<path style="fill:#34150C;" d="M256.215,200.416c1.919,0,3.839-0.732,5.303-2.197l64.057-64.057l10.261,10.261l-64.056,64.057
+		c-2.929,2.929-2.929,7.678,0,10.606c1.467,1.465,3.385,2.197,5.303,2.197c1.919,0,3.839-0.732,5.303-2.197l64.671-64.672
+		c0.71,0.219,1.454,0.335,2.211,0.335c1.989,0,3.897-0.79,5.303-2.197l19.408-19.408l75.815,75.815
+		c1.443,1.443,3.363,2.197,5.306,2.197c0.028,0,0.056,0,0.084,0c4.111-0.036,7.434-3.379,7.434-7.5c0-0.799-0.125-1.57-0.357-2.292
+		c-1.578-6.452-14.89-56.797-56.404-105.746l12.437-12.437c6.921-6.921,6.921-18.183,0-25.104l-6.37-6.37
+		c-6.921-6.922-18.184-6.922-25.104,0l-12.436,12.436C323.193,20.73,270.479,8.16,268.029,7.595
+		c-3.26-0.753-6.624,0.746-8.246,3.672c-1.622,2.926-1.109,6.573,1.257,8.939l75.815,75.815l-19.408,19.407
+		c-2.033,2.033-2.652,4.942-1.863,7.511l-64.673,64.673c-2.929,2.928-2.929,7.677-0.001,10.606
+		C252.376,199.683,254.295,200.416,256.215,200.416z M401.316,62.314l6.37,6.37c1.073,1.073,1.073,2.819,0,3.892l-11.855,11.855
+		c-1.649-1.741-3.335-3.475-5.061-5.201c-1.726-1.726-3.46-3.412-5.2-5.062l11.855-11.854
+		C398.498,61.242,400.243,61.242,401.316,62.314z M380.164,89.836c29.581,29.581,47.252,62.306,57.069,85.35l-57.951-57.951
+		l-12.397-12.397c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606l7.094,7.094l-14.104,14.104l-15.911-15.912
+		l19.408-19.407c1.407-1.406,2.197-3.314,2.197-5.303s-0.79-3.897-2.197-5.303l-57.951-57.951
+		C317.858,42.584,350.583,60.256,380.164,89.836z"/>
+	<path style="fill:#34150C;" d="M208.481,271.78L35.773,444.49L25.51,434.227l172.709-172.709c2.929-2.929,2.929-7.678,0-10.606
+		c-2.929-2.929-7.678-2.929-10.606,0L9.6,428.924c-2.929,2.929-2.929,7.678,0,10.606l20.87,20.87
+		c1.406,1.407,3.314,2.197,5.303,2.197s3.897-0.79,5.303-2.197l178.011-178.014c2.928-2.928,2.929-7.675,0.002-10.604
+		C216.159,268.851,211.41,268.851,208.481,271.78z"/>
+	<path style="fill:#B9A9A2;" d="M354.961,96.021c0,1.989-0.79,3.897-2.197,5.303l-19.408,19.407l15.911,15.912l14.104-14.104
+		l-7.094-7.094c-2.929-2.929-2.929-7.678,0-10.606c2.929-2.929,7.678-2.929,10.606,0l12.397,12.397l57.951,57.951
+		c-9.816-23.044-27.488-55.77-57.069-85.35s-62.306-47.252-85.35-57.069l57.951,57.951
+		C354.171,92.124,354.961,94.032,354.961,96.021z"/>
+	<path style="fill:#CF5530;" d="M433.716,412.845c-1.406,1.407-3.314,2.197-5.303,2.197c-1.989,0-3.896-0.79-5.303-2.197
+		L234.999,224.738l-10.261,10.261l182.805,182.806l1.447-1.447c2.929-2.929,7.678-2.929,10.606,0c2.929,2.929,2.929,7.678,0,10.606
+		l-16.08,16.08l8.849,8.849l39.528-39.528l-8.849-8.849L433.716,412.845z"/>
+	<path style="fill:#B9A9A2;" d="M211.307,227.217l15.911-15.911l-19.407-19.408c-2.59-2.59-2.931-6.672-0.805-9.655l31.309-43.943
+		L116.536,16.521c-3.552,1.717-7.053,3.548-10.51,5.474l95.669,95.669c2.929,2.929,2.929,7.678,0,10.606
+		c-1.464,1.464-3.384,2.197-5.303,2.197s-3.839-0.732-5.303-2.197L92.823,30.005C80.579,38.074,69.022,47.517,58.27,58.27
+		C47.517,69.023,38.074,80.579,30.005,92.824l98.265,98.265c2.929,2.929,2.929,7.678,0,10.606c-1.464,1.464-3.384,2.197-5.303,2.197
+		s-3.839-0.732-5.303-2.197l-95.669-95.669c-1.926,3.457-3.758,6.958-5.474,10.51l121.778,121.778l43.945-31.311
+		c2.982-2.125,7.065-1.786,9.655,0.805L211.307,227.217z"/>
+	<path style="fill:#34150C;" d="M467.803,407.062l-19.456-19.456c-1.406-1.407-3.314-2.197-5.303-2.197s-3.897,0.79-5.303,2.197
+		l-9.328,9.329l-167.24-167.236l-16.183-16.183c0.79-2.57,0.172-5.48-1.862-7.514c-0.001,0-20.223-20.224-20.223-20.224
+		l31.309-43.943c2.125-2.983,1.785-7.065-0.805-9.655L123.425,2.197c-2.207-2.207-5.551-2.817-8.394-1.53
+		c-24.678,11.16-47.344,26.972-67.369,46.997C27.638,67.688,11.826,90.354,0.667,115.033c-1.286,2.844-0.677,6.187,1.53,8.394
+		L132.18,253.409c1.452,1.452,3.373,2.197,5.306,2.197c1.516,0,3.039-0.458,4.35-1.392l43.945-31.311l20.223,20.223
+		c2.033,2.033,4.942,2.652,7.511,1.863l16.184,16.184l167.238,167.239l-9.33,9.33c-2.929,2.929-2.929,7.678,0,10.606l19.456,19.456
+		c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197l50.135-50.135C470.733,414.74,470.733,409.991,467.803,407.062z
+		 M412.365,451.894l-8.849-8.849l16.08-16.08c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0l-1.447,1.447
+		L224.738,234.999l10.261-10.261L423.11,412.845c1.407,1.407,3.314,2.197,5.303,2.197c1.989,0,3.897-0.79,5.303-2.197l9.328-9.328
+		l8.849,8.849L412.365,451.894z M182.244,207.004l-43.945,31.311L16.521,116.537c1.717-3.552,3.548-7.053,5.474-10.51l95.669,95.669
+		c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606L30.005,92.824
+		C38.074,80.579,47.517,69.023,58.27,58.27c10.753-10.752,22.309-20.196,34.554-28.265l98.266,98.266
+		c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-95.669-95.669
+		c3.457-1.926,6.959-3.758,10.51-5.474L238.315,138.3l-31.309,43.943c-2.125,2.983-1.785,7.065,0.805,9.655l19.407,19.408
+		l-15.911,15.911L191.9,207.809C189.309,205.218,185.227,204.879,182.244,207.004z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

MobiParc/index.html

@@ -0,0 +1,468 @@
+<!DOCTYPE html>
+<html lang="fr" dir="ltr">
+<head>
+	<meta charset="utf-8" />
+    <title>CanalPlus</title>
+    <link rel="manifest" href="manifest.json">
+    <meta name="viewport" content="width=device-width">
+    <meta name="theme-color" content="#587b8c">
+    <link rel="icon" href="favicon.ico"> 
+    <link rel="shortcut icon" href="favicon.ico"> 
+    <link rel="apple-touch-icon" href="img/iphone-icon.png">
+	<!--<style type="text/css">
+        body.hidden{
+        visibility:hidden;
+        background-color:#E3EAED;
+        background-repeat:no-repeat;
+        background-position-x:50%;
+        background-position-y:50%;
+        background-image:url(img/loading.svg)
+        }
+    </style>-->
+    <link rel="stylesheet" href="css/canalbis.css" type="text/css" media="all">
+    <noscript>
+        <style type="text/css">body.nojs{visibility:visible;}</style>
+    </noscript>
+    <script src="js/jquery-3.2.1.min.js" defer></script>
+    <script src="js/jquery-ui.min.js" defer></script>
+    <!--https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js-->
+    <script src="js/handlebars.min.js" defer></script>
+    <script src="js/canalbis.js" defer></script>
+   
+</head>
+<body class="nojs">
+        <header>
+            <section>
+                <ul>
+                    <li><span class="modal-open btn">&#8651;</span></li>
+                  
+                    
+                </ul>
+            </section>
+           
+            <section>
+                <nav>
+                    <div>
+                        <button aria-label="Ouvrir menu" class="bt-menu"><svg viewBox="0 0 459 459" enable-background="new 0 0 459 459"><path d="M0 382.5h459v-51h-459v51zm0-127.5h459v-51h-459v51zm0-178.5v51h459v-51h-459z"></path></svg></button>
+                    </div>
+                    <div>
+                        <button aria-label="Fermer menu" class="bt-menu-close">
+                            <svg viewBox="0 0 371.23 371.23" enable-background="new 0 0 371.23 371.23"><path d="M371.23 21.213l-21.212-21.213-164.403 164.402-164.402-164.402-21.213 21.213 164.402 164.402-164.402 164.403 21.213 21.212 164.402-164.402 164.403 164.402 21.212-21.212-164.402-164.403z"></path></svg>
+                        </button>
+                       
+                    </div>
+                    <div>
+                        <a href="#anomalies">Anomalies</a>
+                    </div>
+                    <div>
+                        <a href="#vannes">Vannes</a>
+                    </div>
+                    <div>
+                        <a href="#niveaux">Niveaux</a>
+                    </div>
+                   
+                    <div>
+                        <a href="#contacts">Contacts</a>
+                    </div>
+
+                    <div>
+                        <a href="#interventions">Interventions</a>
+                    </div>
+                    <div>
+                        <a href="#parametres">Paramètres</a>
+                    </div>
+
+                </nav>
+            </section>
+        </header>
+        <section class="main">
+            <noscript>
+                <h1>Appli canal de la Bruche</h1>
+                Pour accéder à toutes les fonctionnalités de ce site, vous devez activer JavaScript. Voici les <a href="//www.enable-javascript.com/fr/" target="js">
+                    instructions pour activer JavaScript dans votre navigateur Web
+                </a>
+            </noscript>
+        </section>
+        <section class="footer-top">
+    
+            <pre class="results__display-wrapper"><code class="results-display"></code></pre>       
+                
+            
+        </section>
+        
+        <footer>
+            <nav class="obs">
+                <div><span class="modal-open">Alerte</span></div>
+                <div></div>
+               
+            </nav>
+            <span id="cRetour" class="cInvisible"></span>
+        </footer>
+    <section class="modal-background"></section>
+
+    <section class="modal-content">
+            <button class="data-sync" disabled>Sync</button>
+            <div class="sync-result"></div>
+            <br>
+            <span class="modal-close">X</span>
+        
+    </section>
+
+    <section class="modal-content-1" style="display:none">
+        <form class="contact" enctype="multipart/form-data">
+            <h2>Contact</h2>
+            <aside>
+                <input name="title" required placeholder="titre du message" type="text"><br>
+                <input name="email" required placeholder="votre email message" type="email"><br>
+                <textarea name="message" placeholder="votre message"></textarea><br>
+                <input type="file" required id="imgfile" name="img" accept="image/*"><br>
+                <input name="lat" id="input-lat" type="hidden"><input id="input-lng" name="lng" type="hidden">
+                <button type="button" class="send-message">Envoyer</button>
+            </aside>
+            <span class="send-result"></span>
+            <br>
+            <span class="modal-close">X</span>
+        </form>
+    </section>
+    
+    <script id="parametres" type="x-tmpl-mustache">
+        <h1>Paramètres</h1>
+        <form class="data-form param" enctype="multipart/form-data">
+            <div class="input-group">
+                <label class="label" for="year_week">Campagne</label>
+                <input class="input-text" id="year_week" name="year_week" type="text" />
+            </div>
+
+            <div class="input-group">
+                <label class="label" for="user">Utilisateur</label>
+                <select class="input-select" id="user" name="user">
+                    <option value="2">Clément VIX</option>
+                    <option value="4">Luc TIRARD</option>
+                    <option value="6">Freddy SITTLER</option>
+                </select>
+            </div>
+
+            <div class="input-group">
+                <label class="label" for="start">Heure de début d'astreinte</label>
+                <input class="input-text" id="start" name="start" type="text" pattern="^(1?[0-9]|2[0-3]):[0-5][0-9]$" title="HH:MM" required/>
+            </div>
+
+            <div class="input-group">
+                <label class="label" for="end">Heure de fin d'astreinte</label>
+                <input class="input-text" id="end" name="end" type="text" pattern="^(1?[0-9]|2[0-3]):[0-5][0-9]$" title="HH:MM" required/>
+            </div>
+            <button class="button-submit btn btn-save" type="submit">Sauvegarder</button>
+        </form>
+
+       
+</script>
+
+    <script id="niveaux" type="x-tmpl-mustache">
+        <h1>Niveaux</h1>
+        <h2>Créer un enregistrement</h2>
+        <form class="data-form niveau" enctype="multipart/form-data">
+            <div class="input-group">
+
+                <label class="label" for="point">Point de relevé</label>
+                <select class="input-select" id="point" name="point">
+                    <option value="ECH_S1">Station n°1 - Bief n°1</option>
+                    <option value="ECH_BA1">Echelle ouvrage AD</option>
+                    <option value="ECH_BA2">Echelle ouvrage AS</option>
+                    <option value="ECH_PA1">Echelle ouvrage PA1</option>
+                    <option value="ECH_E1">Echelle écluse n°1</option>
+                    <option value="ECH_E2">Echelle écluse n°2</option>
+                    <option value="ECH_E7">Echelle écluse n°7</option>
+                    <option value="ECH_S2">Station n°2 - Bief n°8</option>
+                    <option value="ECH_E8">Echelle écluse n°8</option>
+                    <option value="ECH_RD222">Echelle pont RD 222</option>
+                    <option value="ECH_S3">Station n°3 - Bief n°9</option>
+                    <option value="ECH_S4">Station n°4 - Bief n°11</option>
+                    <option value="ECH_E4">Echelle écluse n°4</option>
+                    <option value="ECH_PF">Echelle pont SNCF Bief 11</option>
+                    <option value="ECH_D6">Echelle déversoir D6</option>
+                    <option value="ECH_D11AM">Echelle amont D11</option>
+                    <option value="ECH_D11AV">Echelle aval D11</option>
+                </select>
+            </div>
+
+            <div class="input-group">
+                <label class="label" for="level">Niveau</label>
+                <input class="input-text" id="level" name="level" type="number" title="doit être un numérique" required />
+            </div>
+            <button class="button-submit btn btn-save" type="submit">Sauvegarder</button>
+        </form>
+
+
+        {{#if data}}
+        <button class="del btn btn-delete" disabled>Supprimer</button>
+
+        <h2>Les données</h2>
+        <table class="selectable">
+            <thead>
+                <tr><td>Camp</td><td>date</td><td>niv</td><td>pt</td></tr>
+            </thead>
+            <tbody>
+                {{#data}}
+                <tr data-id="{{tstamp}}" data-type="niveaux"><td>{{campaign}}</td><td>{{#todate}}{{tstamp}}{{/todate}}</td><td>{{level}}</td><td>{{point}}</td></tr>
+                {{/data}}
+            </tbody>
+        </table>
+        {{/if}}
+
+
+
+
+</script>
+
+    <script id="anomalies" type="x-tmpl-mustache">
+        <h1>Anomalie</h1>
+        <h2>Créer un enregistrement</h2>
+
+        <form class="data-form anomalie" enctype="multipart/form-data">
+            <div class="input-group">
+                <label class="label" for="type">Type</label>
+                <select id="type" name="type">
+                    <option value="1">Obstacle à l'écoulement</option>,
+                    <option value="2">Obstacle au passage sur le domaine</option>,
+                    <option value="3">Dégradation ouvrage</option>,
+                    <option value="4">Dégradation hors ouvrage</option>,
+                    <option value="5">Occupation illicite du Domaine</option>,
+                    <option value="6">Autre</option>
+
+                </select>
+            </div>
+            <div class="input-group">
+                <label class="label" for="desc">Description</label>
+                <textarea id="desc" name="desc" rows="6" required></textarea>
+                <input type="hidden" id="coordinates" name="coordinates" required>
+            </div>
+            <div class="input-group-img">
+            <div class="input-group img-group" id="img-group">
+                <label class="label" for="imgfile">Photo</label>
+                <input class="input-file input-file-img btn" type="file" name="img" accept="image/*" capture><br>
+                <input type="hidden" name="imgdata" class="hidden-file-img" value="">
+                <img src="#" class="img-preview" width="128" />
+                <button class="file-del btn btn-delete">Supprimer</button>
+            </div>
+          
+           </div>
+            <div>
+                <button class="btn btn-duplicate btn-img">Ajouter une image</button>
+            </div>
+
+            <button class="button-submit btn btn-save" type="submit">Sauvegarder</button>
+        </form>
+
+        <h2>Les données</h2>
+        {{#if data}}
+        <button class="del btn btn-delete" disabled>Supprimer</button>
+
+        <table class="selectable">
+            <thead>
+                <tr><td>date</td><td>type</td><td>desc</td></tr>
+            </thead>
+            <tbody>
+                {{#data}}
+                <tr data-id="{{tstamp}}" data-type="anomalies"><td>{{#todate}}{{tstamp}}{{/todate}}</td><td>{{type}}</td><td>{{desc}}</td></tr>
+                {{/data}}
+            </tbody>
+        </table>
+        {{/if}}
+
+    </script>
+
+    <script id="index" type="x-tmpl-mustache">
+        <h1>Canal de la Bruche</h1>
+      
+        <div class="home-pp">
+            <a href="#anomalies">
+                <div>
+
+
+                    <picture>
+                        <source type="image/svg+xml" srcset="img/alert.svg" media="(min-width:240px)">
+                        <img src="img/alert.png" width="224" alt="" />
+                    </picture><h3>
+                        Anomalies
+                    </h3>
+
+                </div>
+            </a>
+            <a href="#vannes">
+                <div>
+
+
+                    <picture>
+                        <source type="image/svg+xml" srcset="img/valve.svg" media="(min-width:240px)">
+                        <img src="img/valve.png" width="224" alt="" />
+                    </picture><h3>
+                        Vannes
+                    </h3>
+
+                </div>
+            </a>
+            <a href="#niveaux">
+                <div>
+
+
+                    <picture>
+                        <source type="image/svg+xml" srcset="img/levels.svg" media="(min-width:240px)">
+                        <img src="img/levels.png" width="224" alt="" />
+                    </picture><h3>
+                        Niveaux
+                    </h3>
+
+                </div>
+            </a>
+
+        </div>
+        <div class="home-pp">
+            <a href="#contacts">
+                <div>
+
+                    <picture>
+                        <source type="image/svg+xml" srcset="img/add-contact.svg" media="(min-width:240px)">
+                        <img src="img/add-contact.png" width="224" alt="" />
+                    </picture>
+                    <h3>
+                        Contacts
+                    </h3>
+
+
+
+                </div>
+            </a>
+
+            <a href="#interventions">
+                <div>
+
+                    <picture>
+                        <source type="image/svg+xml" srcset="img/intervention.svg" media="(min-width:240px)">
+                        <img src="img/intervention.png" width="224" alt="" />
+                    </picture>
+                    <h3>
+                        Interventions
+                    </h3>
+
+
+
+                </div>
+            </a>
+
+            <a href="#parametres">
+                <div>
+
+                    <picture>
+                        <source type="image/svg+xml" srcset="img/high-voltage.svg" media="(min-width:240px)">
+                        <img src="img/high-voltage.png" width="224" alt="" />
+                    </picture>
+                    <h3>
+                        Paramètres
+                    </h3>
+
+
+
+                </div>
+            </a>
+
+
+        </div>
+    </script>
+
+    <script id="interventions" type="x-tmpl-mustache">
+        <h1>Interventions</h1>
+       
+        {{#if contact}}
+        <select class="select-contact">
+            <option>Sélection du contact à avertir</option>
+            {{#contact}}
+            {{#if mobile}}
+            {{#if_eq mobile}}
+            <option value="{{phone}}" selected>{{name}} {{firstname}}</option>
+            {{else}}
+            <option value="{{phone}}">{{name}} {{firstname}}</option>
+            {{/if_eq}}
+            {{/if}}
+            {{/contact}}
+
+        </select>
+        {{/if}}
+       
+        {{#if intervention}}
+        <div>
+           
+                <a href="sms:{{intervention}}?body=début d'intervention" data-ng-message="début d'intervention" class="intervention-start btn" data-type="start">Début</>
+                <a href="sms:{{intervention}}?body=fin d'intervention" data-ng-message="fin d'intervention" class="intervention-end btn" data-type="end">Fin</a>
+        </div>
+        {{/if}}
+    </script>
+
+    <script id="contacts" type="x-tmpl-mustache">
+        <h1>Contacts</h1>
+        {{#if contact}}
+        <ul class="list-contact">
+            {{#contact}}
+            <li>
+                {{#if email}}
+                <a href="mailto:{{email}}?subject=De canalplus" class="btn">&#9993;</a>
+                {{/if}}
+                <a href="tel:{{phone}}" class="btn">&#x260E;</a>
+                {{#if mobile}}
+                <a href="sms:{{phone}}?body=De canalplus" class="btn">&#128489;</a>
+                {{/if}}
+                {{name}} {{firstname}}
+            </li>
+            {{/contact}}
+        </ul>
+        {{/if}}
+       
+    </script>
+
+        <script id="vannes" type="x-tmpl-mustache">
+            <h1>Vannes</h1>
+            <h2>Créer un enregistrement</h2>
+            <form class="data-form vanne" enctype="multipart/form-data">
+                <div class="input-group">
+
+                    <label class="label" for="point">Ouvrage</label>
+                    <select class="input-select" id="point" name="point">
+                        <option value="PA1">PA1</option>
+                        <option value="AD">AD</option>
+                    </select>
+                </div>
+                <div class="input-group">
+
+                    <label class="label" for="valve">Ouvrage</label>
+                    <select class="input-select" id="valve" name="valve">
+                        <option value="Ouverture vanne alimentation">Ouverture vanne alimentation</option>
+                        <option value="Ouverture vanne 1">Ouverture vanne 1</option>
+                        <option value="Ouverture vanne 2">Ouverture vanne 2</option>
+                        <option value="Ouverture vanne 3">Ouverture vanne 3</option>
+                    </select>
+                </div>
+
+                <div class="input-group">
+                    <label class="label" for="level">Niveau</label>
+                    <input class="input-text" id="level" name="level" type="number" title="doit être un numérique" required />
+                </div>
+                <button class="button-submit btn btn-save" type="submit">Sauvegarder</button>
+            </form>
+            <h2>Les données</h2>
+            {{#if data}}
+            <button class="del btn btn-delete" disabled>Supprimer</button>
+            <table class="selectable">
+                <thead>
+                    <tr><td>camp</td><td>date</td><td>niv</td><td>pt</td><td>vanne</td></tr>
+                </thead>
+                <tbody>
+                    {{#data}}
+                    <tr data-id="{{tstamp}}" data-type="vannes"><td>{{campaign}}</td><td>{{#todate}}{{tstamp}}{{/todate}}</td><td>{{level}}</td><td>{{point}}</td><td>{{valve}}</td></tr>
+                    {{/data}}
+                </tbody>
+            </tableclass="selectable">
+            {{/if}}
+
+
+        </script>
+</body>
+</html>

MobiParc/js/mobiparc.js

@@ -0,0 +1,966 @@
+//$(function () {
+
+
+    document.body.classList.remove("nojs");
+    //$("body").removeClass("nojs");
+
+    // $('<link rel="stylesheet" href="css/canalbis.css" type="text/css" media="all">').insertBefore("script:first");
+
+    if ('serviceWorker' in navigator) {
+        console.log("install");
+        navigator.serviceWorker.register('../sw.js');
+    }
+
+
+  
+
+    Handlebars.registerHelper('lower', function (options) {
+        return options.fn(this).toLowerCase();
+    });
+
+    Handlebars.registerHelper('repuri', function (find, replace, options) {
+        return encodeURI(options.fn(this).replace(find, replace).toString());
+    });
+
+    Handlebars.registerHelper('todate', function (options) {
+        var d = options.fn(this);
+        var dt = new Date(Number.parseInt(d)*1);
+        return dt.toLocaleString();
+    });
+
+    Handlebars.registerHelper('timestamp', function (options) {
+        return Number.parseInt(options.fn(this));
+    });
+
+    Handlebars.registerHelper('if_eq', function (a, opts) {
+        var b = localStorage.hasOwnProperty("contact") ? localStorage.getItem("contact"): "";
+        if (a === b) // Or === depending on your needs
+            return opts.fn(this);
+        else
+            return opts.inverse(this);
+    });
+
+
+
+    var main = document.getElementsByClassName('main')[0];
+
+    var template = Handlebars.compile(document.getElementById(getUrldest()).innerHTML);
+
+
+    function createGuid() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    }
+
+
+    var contacts;
+    function callback(response) {
+        contacts = response;
+
+       // localStorage.setItem("contacts", JSON.stringify(response))
+        
+    }
+
+
+        $.ajax({
+            url: "data/contacts.json", success: function (result) {
+                callback(result);
+            }
+        });
+
+
+    try {
+
+        getLocation();
+    }
+    catch (e){       console.log("error loc");}
+    
+    Date.prototype.getWeekNumber = function () {
+        var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
+        var dayNum = d.getUTCDay() || 7;
+        d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+        var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+        return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
+    };
+
+    $('.bt-menu').on('click', 'svg', function () {
+
+        $(this).closest('nav').find('div:not(:first)').toggleClass('sidebar');
+
+    });
+
+    $(document).on('click', '.sidebar', function () {
+
+        $(this).closest('nav').find('div:not(:first)').toggleClass('sidebar');
+
+    });
+
+    //param first
+
+    //suppression
+
+    //gestion offline
+    if (navigator.onLine) {
+        $(".data-sync").removeAttr("disabled");
+    }
+    else {
+        //$(".data-sync").("disabled")
+        if ($(".data-sync").is(":disabled")) { }
+        else { $(".data-sync").attr("disabled") }
+    }
+
+    //syncro
+    $(".data-sync").on("click", function () {
+
+        var db = open.result;
+        var txs = db.transaction("anomalies", "readonly");
+        var stores = txs.objectStore("anomalies");
+        console.log("post all : ");
+        stores.openCursor().onsuccess = function (event) {
+            //var data =  { data: event.target.result };
+            var cursor = event.target.result;
+            if (cursor) {
+                //cursor.model = "anomaly";
+
+                cursor.value.model = "anomaly";
+                var id = cursor.value.tstamp;
+                var posting = $.post("/api/canalbis", { data: JSON.stringify(cursor.value) });
+
+                // Put the results in a div
+                posting.done(function (data) {
+                    if (data == 'ole') {
+
+                        var tx = db.transaction("anomalies", "readwrite");
+                        var store = tx.objectStore("anomalies");
+                        store.delete(id).onsuccess = function (evt) {
+                            $('.sync-result').append("Sync ok anomalie : " + id + "<br>");
+                        };
+                    }
+                });
+                cursor.continue();
+            }
+            else {
+                console.log("end anomalies");
+            }
+
+
+            //$.post("/api/canalbis", { data: JSON.stringify({anomaly: event.target.result}) });
+           // main.innerHTML = template(data);
+        };
+
+
+        txs = db.transaction("vannes", "readonly");
+        stores = txs.objectStore("vannes");
+        console.log("post all : ");
+        stores.openCursor().onsuccess = function (event) {
+            var cursor = event.target.result;
+            if (cursor) {
+                //cursor.model = "anomaly";
+
+                cursor.value.model = "valve";
+                var id = cursor.value.tstamp;
+                var posting = $.post("/api/canalbis", { data: JSON.stringify(cursor.value) });
+
+                // Put the results in a div
+                posting.done(function (data) {
+                    if (data == 'ole') {
+
+                        var tx = db.transaction("vannes", "readwrite");
+                        var store = tx.objectStore("vannes");
+                        store.delete(id).onsuccess = function (evt) {
+                            $('.sync-result').append("Sync ok vanne : " + id +"<br>");
+                        };
+                    }
+                });
+                cursor.continue();
+            }
+            else {
+                console.log("end valve");
+            }
+
+            //var data = { data: event.target.result };
+
+            //$.post("/api/canalbis", { data: JSON.stringify({ valve: event.target.result }) });
+            // main.innerHTML = template(data);
+        };
+
+
+        txs = db.transaction("interventions", "readonly");
+        stores = txs.objectStore("interventions");
+        console.log("post all : ");
+        //stores.getAll().onsuccess = function (event) {
+        stores.openCursor().onsuccess = function (event) {
+            var cursor = event.target.result;
+            if (cursor) {
+                //cursor.model = "anomaly";
+
+                cursor.value.model = "interventions";
+                var id = cursor.value.tstamp;
+                var posting = $.post("/api/canalbis", { data: JSON.stringify(cursor.value) });
+
+                // Put the results in a div
+                posting.done(function (data) {
+                    if (data == 'ole') {
+
+                        var tx = db.transaction("interventions", "readwrite");
+                        var store = tx.objectStore("interventions");
+                        store.delete(id).onsuccess = function (evt) {
+                            $('.sync-result').append("Sync ok intervention : " + id + "<br>");
+                        };
+                    }
+                });
+
+                cursor.continue();
+            }
+            else {
+                console.log("end interventions");
+            }
+        };
+
+
+        txs = db.transaction("niveaux", "readonly");
+        stores = txs.objectStore("niveaux");
+        console.log("post all : ");
+        //stores.getAll().onsuccess = function (event) {
+        stores.openCursor().onsuccess = function (event) {
+            var cursor = event.target.result;
+            if (cursor) {
+                //cursor.model = "anomaly";
+
+                cursor.value.model = "level";
+                var id = cursor.value.tstamp;
+                var posting = $.post("/api/canalbis", { data: JSON.stringify(cursor.value) });
+
+                // Put the results in a div
+                posting.done(function (data) {
+                    if (data == 'ole') {
+                    
+                        var tx = db.transaction("niveaux", "readwrite");
+                        var store = tx.objectStore("niveaux");
+                        store.delete(id).onsuccess = function (evt) {
+                            $('.sync-result').append("Sync ok niveau : " + id + "<br>");
+                        };}
+                });
+               
+                cursor.continue();
+            }
+            else {
+                console.log("end level");
+            }
+
+            //var data = { data: event.target.result };
+
+            //$.post("/api/canalbis", { data: JSON.stringify({level: event.target.result}) });
+            // main.innerHTML = template(data);
+        };
+
+
+
+        
+
+
+
+        //location.reload();
+    })
+
+    $(window).on('hashchange', function () {
+
+        var href = $(this).attr('href');
+
+        $('html, body').animate({ scrollTop: 0 }, 200);
+
+        var urldest = getUrldest();
+
+        template = Handlebars.compile(document.getElementById(urldest).innerHTML);
+
+
+      
+
+
+
+
+        try {
+
+            getLocation();
+        }
+        catch (e) { console.log("error loc"); }
+  
+
+
+        if (urldest != 'interventions' && urldest != 'contacts') {
+
+            $(".main").empty();
+            try {
+                var db = open.result;
+                var txs = db.transaction(urldest, "readonly");
+                var stores = txs.objectStore(urldest);
+                console.log("Got all " + urldest + ": ");
+                stores.getAll().onsuccess = function (event) {
+                    var data = { data: event.target.result };
+
+                    main.innerHTML = template(data);
+                };
+                //console.log(data);
+                // $(".main").html(template({}));
+            }
+            catch (e) {
+
+                main.innerHTML = template({});
+            }
+
+        }
+
+
+        if (urldest == 'interventions') {
+
+            //$.ajax({
+            //    url: "", success: function (result) {
+            var contactInter = contacts;
+            console.log(contactInter);
+                    if (localStorage.hasOwnProperty("contact")) contactInter.intervention = localStorage.getItem("contact");
+                    $(".main").html(template(contactInter));
+
+
+            //    }
+            //});
+
+
+        }
+
+
+        if (urldest == 'contacts') {
+
+            //$.ajax({
+            //    url: "", success: function (result) {
+
+                    $(".main").html(template(contacts));
+
+            //    }
+            //});
+        }
+
+    });
+
+    var imgdata;
+//a finir
+
+
+    $("body").on("click", ".btn-duplicate", function (event) {
+        event.preventDefault();
+      
+      //  var copie = $('#img-group-1').clone();
+
+        var copie = $('.input-group-img').find('div:first-child').clone();
+
+
+        var inputlenght = createGuid();  //$('.input-file-img').length + 1;
+
+        var grpId = $(copie).attr('id') +  "-" + inputlenght;
+
+        $(copie).attr('id', grpId);
+
+        console.log(inputlenght);
+
+        var inputName = $(copie).find('.input-file-img').attr('name') + "-" + inputlenght;
+
+        $(copie).find('.input-file-img').val('');
+
+        $(copie).find('.input-file-img').attr('name', inputName);
+
+        var hiddenName = $(copie).find('.hidden-file-img').attr('name') + "-" + inputlenght;
+
+        $(copie).find('.hidden-file-img').attr('name', hiddenName);
+
+        $(copie).find('.hidden-file-img').val('');
+
+        $(copie).find('img').attr('src', '');
+
+        copie.appendTo('.input-group-img');
+
+        var imginputs = document.querySelectorAll('.input-file-img');
+
+        Array.from(imginputs).forEach(img => {
+            img.addEventListener('change', handleFileSelect, false);
+        });
+
+    });
+
+
+    $("body").on("click", ".file-del", function (event) {
+        event.preventDefault();
+        if ($(this).closest('div').attr('id') == 'img-group') {
+            $(this).closest('div').find('img').attr('src', '');
+            $(this).closest('div').find('.input-file-img').val('');
+            $(this).closest('div').find('.hidden-file-img').val('');
+        }
+        else  $(this).closest('div').remove();
+
+    });
+
+    $("body").on("click", ".intervention-start, .intervention-end", function (event) {
+
+
+        console.log("intervention");
+
+        var data = new Object();
+        data.tstamp = Date.now();
+        data.user = JSON.parse(localStorage.getItem("params")).user;
+        data.event = $(this).data("type");
+        var db = open.result;
+        var txs = db.transaction("interventions", "readwrite");
+        var stores = txs.objectStore("interventions");
+        stores.put(data);
+
+    })
+
+    $("body").on("click", ".data-del", function (event) {
+
+       // console.log($(this).data("id") + " " + $(this).data("type"));
+        var id = $(this).data("id");
+        var datatype = $(this).data("type");
+        //console.log(id + " " + datatype);
+
+        var r = confirm("Supprimer cet élément!");
+        if (r == true) {
+
+            var db = open.result;
+            var tx = db.transaction(datatype, "readwrite");
+            var store = tx.objectStore(datatype);
+
+            store.delete(id).onsuccess = function (evt) {
+               // console.log(id + " " + datatype);
+                location.reload();
+            };
+        } 
+    });
+
+
+    $("body").on("click", ".send-message", function (event) {
+        event.preventDefault();
+        var form = $(this).closest("form");
+
+        function getLocation() {
+            if (navigator.geolocation) {
+                navigator.geolocation.getCurrentPosition(showPosition);
+            } else {
+                return "Geolocation is not supported by this browser.";
+            }
+        }
+
+        function showPosition(position) {
+            //{ lat: position.coords.latitude, lng : position.coords.longitude };
+
+            $("input[name='lat']:hidden").val(position.coords.latitude);
+            $("input[name='lng']:hidden").val(position.coords.longitude);
+
+        }
+
+        var pp = getLocation();
+
+        //var data = form.serializeArray().reduce(function (a, x) { a[x.name] = x.value; return a; }, { tstamp: Date.now(), file: imgdata });
+
+        var data = form.serializeArray().reduce(function (a, x) { a[x.name] = x.value; return a; }, { tstamp: Date.now()});
+
+
+        var request = indexedDB.open("Contenu", 3);
+
+        request.onerror = function () {
+            form.find(".send-result").html("Une erreur c'est produite.");
+        };
+
+        request.onsuccess = function () {
+            var db = request.result;
+            var tx = db.transaction("emails", "readwrite");
+            var store = tx.objectStore("emails");
+            store.put(data);
+            form.find(".send-result").html("Votre message est pris en compte.");
+        }
+
+    });
+
+
+    //$(function () {
+    $(".modal-open, .modal-background, .modal-close").click(function () {
+        console.log("modal");
+        $(".modal-content,.modal-background").toggleClass("active");
+        if ($(this).hasClass("modal-close")) location.reload();// $(this).closest("form").find(".send-result").html("");
+    });
+
+
+ 
+    /* retour haut de page*/
+    //document.addEventListener('DOMContentLoaded', function () {
+    window.onscroll = function (ev) {
+        document.getElementById("cRetour").className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible";
+    };
+    //});
+
+   
+
+    $('#cRetour').on('click', function () {
+
+        $('html, body').animate({ scrollTop: 0 }, 200);
+
+    });
+
+
+
+
+    $(".main").empty();
+    var urldest = getUrldest();
+    try{
+        var db = open.result;
+        var txs = db.transaction(urldest, "readonly");
+        var stores = txs.objectStore(urldest);
+        console.log("Got all " + urldest + ": ");
+        stores.getAll().onsuccess = function (event) {
+            var data = { data: event.target.result };
+
+            main.innerHTML = template(data);
+
+        };}
+    catch (e) {
+
+        main.innerHTML = template({});
+       
+        
+    }
+
+    
+    
+   
+
+
+    $("body").on("click", ".del", function (event) {
+
+        var del = $(this);
+        var r = confirm("Supprimer la selection!");
+        if (r == true) {
+
+            $(del).prop("disabled",true);
+
+            $(".ui-selected").each(function () {
+                var elt = $(this);
+                var id = $(elt).data("id");
+                var datatype = $(elt).data("type");
+                //console.log(id + " " + datatype);
+                    var db = open.result;
+                    var tx = db.transaction(datatype, "readwrite");
+                    var store = tx.objectStore(datatype);
+                    store.delete(id).onsuccess = function (evt) {
+                        // console.log(id + " " + datatype);
+                        $(elt).remove();
+
+                    };
+
+            });
+
+        }
+        });
+
+   
+
+
+///////////////////////});
+
+
+
+
+/**
+ * Checks that an element has a non-empty `name` and `value` property.
+ * @param  {Element} element  the element to check
+ * @return {Bool}             true if the element is an input, false if not
+ */
+var isValidElement = function isValidElement(element) {
+    return element.name && element.value;
+};
+
+/**
+ * Checks if an element’s value can be saved (e.g. not an unselected checkbox).
+ * @param  {Element} element  the element to check
+ * @return {Boolean}          true if the value should be added, false if not
+ */
+var isValidValue = function isValidValue(element) {
+    return !['checkbox', 'radio'].includes(element.type) || element.checked;
+};
+
+/**
+ * Checks if an input is a checkbox, because checkboxes allow multiple values.
+ * @param  {Element} element  the element to check
+ * @return {Boolean}          true if the element is a checkbox, false if not
+ */
+var isCheckbox = function isCheckbox(element) {
+    return element.type === 'checkbox';
+};
+
+
+//var isHidden = function isHidden(element) {
+//    return element.type === 'hidden';
+//};
+
+/**
+ * Checks if an input is a `select` with the `multiple` attribute.
+ * @param  {Element} element  the element to check
+ * @return {Boolean}          true if the element is a multiselect, false if not
+ */
+var isMultiSelect = function isMultiSelect(element) {
+    return element.options && element.multiple;
+};
+
+/**
+ * Retrieves the selected options from a multi-select as an array.
+ * @param  {HTMLOptionsCollection} options  the options for the select
+ * @return {Array}                          an array of selected option values
+ */
+var getSelectValues = function getSelectValues(options) {
+    return [].reduce.call(options, function (values, option) {
+        return option.selected ? values.concat(option.value) : values;
+    }, []);
+};
+
+/**
+ * A more verbose implementation of `formToJSON()` to explain how it works.
+ *
+ * NOTE: This function is unused, and is only here for the purpose of explaining how
+ * reducing form elements works.
+ *
+ * @param  {HTMLFormControlsCollection} elements  the form elements
+ * @return {Object}                               form data as an object literal
+ */
+var formToJSON_deconstructed = function formToJSON_deconstructed(elements) {
+
+    // This is the function that is called on each element of the array.
+    var reducerFunction = function reducerFunction(data, element) {
+
+        // Add the current field to the object.
+        data[element.name] = element.value;
+
+        // For the demo only: show each step in the reducer’s progress.
+        console.log(JSON.stringify(data));
+
+        return data;
+    };
+
+    // This is used as the initial value of `data` in `reducerFunction()`.
+    var reducerInitialValue = {};
+
+    // To help visualize what happens, log the inital value, which we know is `{}`.
+    console.log('Initial `data` value:', JSON.stringify(reducerInitialValue));
+
+    // Now we reduce by `call`-ing `Array.prototype.reduce()` on `elements`.
+    var formData = [].reduce.call(elements, reducerFunction, reducerInitialValue);
+
+    // The result is then returned for use elsewhere.
+    return formData;
+};
+
+/**
+ * Retrieves input data from a form and returns it as a JSON object.
+ * @param  {HTMLFormControlsCollection} elements  the form elements
+ * @return {Object}                               form data as an object literal
+ */
+var formToJSON = function formToJSON(elements) {
+    return [].reduce.call(elements, function (data, element) {
+
+        // Make sure the element has the required properties and should be added.
+        if (isValidElement(element) && isValidValue(element)) {
+
+            /*
+             * Some fields allow for more than one value, so we need to check if this
+             * is one of those fields and, if so, store the values as an array.
+             */
+            if (isCheckbox(element)) {
+                data[element.name] = (data[element.name] || []).concat(element.value);
+            } else if (isMultiSelect(element)) {
+                data[element.name] = getSelectValues(element);
+            } else {
+                data[element.name] = element.value;
+            }
+        }
+
+        return data;
+    }, {});
+};
+
+
+
+var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
+
+// Open (or create) the database
+var open = indexedDB.open("CanalBis", 3);
+
+// Create the schema
+open.onupgradeneeded = function () {
+    var db = open.result;
+    //creation anomalies
+    var store = db.createObjectStore("anomalies", { keyPath: "tstamp" });
+
+    //creation niveaux
+    var store = db.createObjectStore("niveaux", { keyPath: "tstamp" });
+
+    //creation vannes
+    var store = db.createObjectStore("vannes", { keyPath: "tstamp" });
+
+
+    //creation interventions
+    var store = db.createObjectStore("interventions", { keyPath: "tstamp" });
+
+
+};
+
+
+
+/**
+ * A handler function to prevent default submission and run our custom script.
+ * @param  {Event} event  the submit event triggered by the user
+ * @return {void}
+ */
+
+var form;
+
+var handleFormSubmit = function handleFormSubmit(event) {
+
+    // Stop the form from submitting since we’re handling that with AJAX.
+    event.preventDefault();
+
+    // Call our function to get the form data.
+    var data = formToJSON(form.elements);
+
+    // Demo only: print the form data onscreen as a formatted JSON object.
+    var dataContainer = document.getElementsByClassName('results-display')[0];
+
+    // Use `JSON.stringify()` to make the output valid, human-readable JSON.
+    dataContainer.textContent = JSON.stringify(data, null, "  ");
+
+    
+    // ...this is where we’d actually do something with the form data...
+
+
+    if ($(form).hasClass("param")) {
+        localStorage.setItem("params", JSON.stringify(data));
+        //console.log("localstorage");
+
+    }
+
+    if ($(form).hasClass("anomalie")) {
+        data.tstamp = Date.now();
+        data.user = localStorage.hasOwnProperty("params") ? JSON.parse(localStorage.getItem("params")).user : "";
+        
+          var db = open.result;
+          var txs = db.transaction("anomalies", "readwrite");
+          var stores = txs.objectStore("anomalies");
+          stores.put(data);
+
+
+          $(".main").empty();
+
+          console.log("Got all anomalies: ");
+          stores.getAll().onsuccess = function (event) {
+              var data = { data: event.target.result };
+              var template = Handlebars.compile(document.getElementById("anomalies").innerHTML);
+              $(".main").html(template(data));
+          };
+
+    }
+
+
+    if ($(form).hasClass("vanne")) {
+        data.tstamp = Date.now();
+        data.user = JSON.parse(localStorage.getItem("params")).user;
+        data.campaign = JSON.parse(localStorage.getItem("params")).year_week;
+        var db = open.result;
+        var txs = db.transaction("vannes", "readwrite");
+        var stores = txs.objectStore("vannes");
+        stores.put(data);
+
+
+        $(".main").empty();
+
+        console.log("Got all vannes: ");
+        stores.getAll().onsuccess = function (event) {
+            var data = { data: event.target.result };
+            var template = Handlebars.compile(document.getElementById("vannes").innerHTML);
+            $(".main").html(template(data));
+        };
+    }
+
+
+    if ($(form).hasClass("niveau")) {
+        data.tstamp = Date.now();
+        data.user = JSON.parse(localStorage.getItem("params")).user;
+        data.campaign = JSON.parse(localStorage.getItem("params")).year_week;
+        var db = open.result;
+        var txs = db.transaction("niveaux", "readwrite");
+        var stores = txs.objectStore("niveaux");
+        stores.put(data);
+
+
+        $(".main").empty();
+
+        console.log("Got all niveaux: ");
+        stores.getAll().onsuccess = function (event) {
+            var data = { data: event.target.result };
+            var template = Handlebars.compile(document.getElementById("niveaux").innerHTML);
+            $(".main").html(template(data));
+        };
+    }
+
+
+    console.log(data);
+
+    
+
+};
+
+/*
+ * This is where things actually get started. We find the form element using
+ * its class name, then attach the `handleFormSubmit()` function to the 
+ * `submit` event.
+ */
+
+
+function handleFileSelect(evt) {
+
+    console.log(evt.target.name);
+
+    console.log(evt.target.id);
+
+    var preview = $(this).closest('div').find('.img-preview');
+
+    var hidden = $(this).closest('div').find('.hidden-file-img');
+
+    console.log(evt.target.files);
+
+    var files = evt.target.files; // FileList object
+    
+
+
+    // use the 1st file from the list
+    var f = files[0];
+
+    var reader = new FileReader();
+
+    // Closure to capture the file information.
+    reader.onload = (function (theFile) {
+        return function (e) {
+
+            $(hidden).val( e.target.result); //{ data: e.target.result, name: f.name };
+           
+            $(preview).attr('src', e.target.result);
+        };
+    })(f);
+
+    // Read in the image file as a data URL.
+    reader.readAsDataURL(f);
+    //console.log(reader.readAsDataURL(f))
+}
+
+
+
+function getLocation() {
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(showPosition);
+    } else {
+        return "Geolocation is not supported by this browser.";
+    }
+}
+
+function showPosition(position) {
+
+    $("input[name='coordinates']").val(position.coords.latitude + "," + position.coords.longitude);
+    console.log(position.coords);
+
+}
+
+function getUrldest() {
+
+    return (window.location.href.replace("index.html","") == "http://localhost:56343/" ? "index" : window.location.hash.slice(1));
+
+}
+
+new MutationObserver(function (mutations, observer) {
+
+    //gestion des mise element selectable
+    $(".selectable > tbody").selectable({
+        filter: "tr",
+        stop: function () {
+            $(".del").removeAttr("disabled");
+        }
+    });
+
+
+    $(".select-contact").change(function () {
+        console.log("contact");
+        var contact = $(this).find("option:selected").val();
+        localStorage.setItem("contact", contact);
+      
+        var result = contacts;
+
+                result.intervention = contact;
+
+                console.log(result);
+
+                var template = Handlebars.compile(document.getElementById("interventions").innerHTML);
+
+                $(".main").html(template(result));
+    });
+
+
+    document.getElementsByClassName('results-display')[0].innerHTML = null;
+
+
+    if ($(".main").find(".data-form").length){
+
+        form = $(".main").find(".data-form")[0];
+   
+        form.addEventListener('submit', handleFormSubmit);
+
+        var today = new Date();
+
+        if ($(".main").find("#year_week").length) document.getElementById('year_week').value = today.getFullYear() + "_" + today.getWeekNumber();
+
+        //if ($(".main").find("#imgfile").length) document.getElementById('imgfile').addEventListener('change', handleFileSelect, false);
+
+        //if ($(".input-file-img").length)
+
+          //  document.querySelector('.input-file-img').addEventListener('change', handleFileSelect, false);
+        
+        //{
+
+    //$(".input-file-img").each(function (index) {
+    //    document.querySelector('.input-file-img').addEventListener('change', handleFileSelect, false);
+
+    //        });
+
+
+        var imginputs = document.querySelectorAll('.input-file-img');
+
+        Array.from(imginputs).forEach(img => {
+            img.addEventListener('change', handleFileSelect, false);  });
+           
+
+        //}
+
+        if (localStorage.hasOwnProperty('params')) { }
+        else {
+           // console.log("no local");
+            if (!$(form).hasClass("param") && !$(form).hasClass("anomalie")) {
+                $(".main .data-form").toggle();
+                alert("Vous devez d'abord définir les paramètres de la campagne");
+                //console.log("pas param");
+            }
+        }
+
+    }
+
+    
+
+    //observer.disconnect();
+
+}).observe(document.querySelector('section.main'), { childList: true });
+
+//});
+
+

MobiParc/manifest.json

@@ -0,0 +1,22 @@
+{
+  "short_name": "MobiParc",
+  "name": "MobiParc",
+  "description": "Suivi mobile d'activite du Parc Departemental d'Erstein",
+  "display": "standalone",
+  "start_url": "./",
+  "theme_color": "#587b8c",
+  "background_color": "#FFF", 
+  "orientation": "portrait",
+   "icons": [
+        {
+            "src": "img/tools_128.png",
+            "sizes": "128x128",
+            "type": "image/png"
+        },
+        {
+            "src": "img/tools_512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

MobiParc/packages.config

@@ -1,5 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
+  <package id="Microsoft.AspNet.WebApi" version="5.2.3" targetFramework="net452" />
+  <package id="Microsoft.AspNet.WebApi.Client" version="5.2.3" targetFramework="net452" />
+  <package id="Microsoft.AspNet.WebApi.Client.fr" version="5.2.3" targetFramework="net452" />
+  <package id="Microsoft.AspNet.WebApi.Core" version="5.2.3" targetFramework="net452" />
+  <package id="Microsoft.AspNet.WebApi.Core.fr" version="5.2.3" targetFramework="net452" />
+  <package id="Microsoft.AspNet.WebApi.WebHost" version="5.2.3" targetFramework="net452" />
+  <package id="Microsoft.AspNet.WebApi.WebHost.fr" version="5.2.3" targetFramework="net452" />
   <package id="Microsoft.CodeDom.Providers.DotNetCompilerPlatform" version="1.0.0" targetFramework="net452" />
   <package id="Microsoft.Net.Compilers" version="1.0.0" targetFramework="net452" developmentDependency="true" />
+  <package id="Newtonsoft.Json" version="10.0.3" targetFramework="net452" />
 </packages>

MobiParc/sw.js

@@ -0,0 +1,61 @@
+// we'll version our cache (and learn how to delete caches in
+// some other post)
+let cacheName = 'v1.1::static';
+
+const pageCached = [
+          '/',
+		  '/index.html',
+		  '/manifest.json',
+          '/sw.js',
+          'data/contacts.json',
+          '/tools.ico',
+		  '/css/mobiparc.css',
+          '/js/mobiparc.js',
+          '/js/jquery-3.2.1.min.js',
+          '/js/jquery-ui.min.js',
+          '/js/handlebars.min.js',
+          '/img/tools_512.png',
+          '/img/tools_128.png',
+          '/img/tools.svg',
+
+];
+
+self.addEventListener('install', e => {
+  // once the SW is installed, go ahead and fetch the resources
+  // to make this work offline
+  e.waitUntil(
+    caches.open(cacheName).then(cache => {
+        return cache.addAll(pageCached).then(() => self.skipWaiting());
+    })
+  );
+});
+
+self.addEventListener('activate', function (e) {
+    //console.log('[ServiceWorker] Activate');
+    e.waitUntil(
+        caches.keys().then(keyList => {
+            return Promise.all(keyList.map(key => {
+                if (key !== cacheName) {
+                    //console.log('[ServiceWorker] Removing old cache', key);
+                    return caches.delete(key);
+                }
+            }));
+        })
+    );
+    return self.clients.claim();
+});
+
+
+// when the browser fetches a url, either response with
+// the cached object or go ahead and fetch the actual url
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    // ensure we check the *right* cache to match against
+    caches.open(cacheName).then(cache => {
+      return cache.match(event.request).then(res => {
+        return res || fetch(event.request)
+      });
+    })
+  );
+});
+