olinox14
/
eligibilite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
							<!DOCTYPE html>
<html
  ng-app = "application"
  lang   = "en-US">

  <head>

    <!-- Page title -->
    <title>Manche Numérique</title>

    <!-- Meta tags -->
    <meta charset = "UTF-8">
    <meta name = "description" content = "Zeno-Labs">
    <meta name = "keywords"    content = "HTML,CSS,JavaScript">
    <meta name = "author"      content = "Francois Beaufils">

    <!-- Angulars Material CSS using RawGit to load directly from `bower-material/master` -->
    <link rel = "stylesheet" href = "css/angular-material.css">
    <link rel = "stylesheet" href = "css/theme.css">

    <!-- Favicon-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

    <!-- Material design CSS font http://zavoloklom.github.io/material-design-iconic-font/examples.html -->
    <link rel="stylesheet" href="css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Roboto font-->
    <link href='http://fonts.googleapis.com/css?family=Roboto:500,300,400' rel='stylesheet' type='text/css'>

    <!-- Specific CSS -->
    <link rel = "stylesheet" href = "css/main.css">

    <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
    <script type = "text/javascript" src = "js/proj4js/dist/proj4.js"></script>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>

    <!-- Angular Material Dependencies -->
    <script type = "text/javascript" src = "http://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
    <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
    <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
    <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.29/skrollr.min.js"></script>


    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/angular.typeahead.css" />
    <script src="js/bootstrap-typeahead.min"></script>
    <!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
    <script type = "text/javascript" src = "js/angular-material.js"></script>

    <script type = "text/javascript" src = "js/angular-adaptive-detection.js"></script>
    <script type = "text/javascript" src = "js/app.js"></script>
  </head>

  <body ng-controller = "mainController">

    <div class = "title">

      <div
        class = "data-loading"
        ng-if = "!loaded">

        <md-progress-circular
          class       = "md-warn md-hue-3"
          md-mode     = "indeterminate"
          md-diameter = "25">
        </md-progress-circular>

        <div class = "data-loading-txt">

          Téléchargement des données...
        </div>
      </div>

      <img
        src      = "img/logo.png"
        ng-if    = "loaded"
        ng-click = "toggleResultPane()"/>
    </div>

    <div class = "address-bar">

      <div class = "input-type">

        <input
          type             = "text"
          ng-model         = "address"
          ng-focus         = "closeRight()"
          class            =  "typeahead"
          options          = "typeAheadOpts"
          datasets         = "allAdresses"
          ng-keypress      = "($event.which === 13) ? onSubmitAddress():0"
          autofocus/>
      </div>

      <md-button
        aria-label = "submit"
        ng-click = "onSubmitAddress()"
        class    = "md-raised md-primary">

        <i class = "md-search md-2x"></i>
      </md-button>

      <i class = "md-menu md-2x" ng-click = "toggleRight()"></i>
    </div>

    <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
      <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Options</h1>

        <md-progress-circular
          id          = "layer-loading"
          class       = "md-warn md-hue-3 force-hidden"
          md-mode     = "indeterminate"
          md-diameter = "25">
        </md-progress-circular>
      </md-toolbar>
      <md-content class="md-padding">

        <div class = "section-title">

          Type de vue
        </div>

        <md-radio-group ng-model="mapType">

          <md-radio-button
            value      = "Carte"
            ng-click   = "changeMap('carte')"
            aria-label = "Carte">Carte
          </md-radio-button>

          <br/>

          <md-radio-button
            value      = "Satellite"
            ng-click   = "changeMap('satellite')"
            aria-label = "Satellite">Satellite
          </md-radio-button>
        </md-radio-group>

        <br/>
        <br/>

        <div class = "section-title">

          Montrer les zones de découpages
        </div>

        <md-checkbox ng-model="view.ftth" aria-label="Fibre optique">Fibre optique</md-checkbox>
        <br/>
        <md-checkbox ng-model="view.mimo" aria-label="Réseau Mimo">Réseau Mimo</md-checkbox>
        <br/>
        <md-checkbox ng-model="view.adsl" aria-label="ADSL">ADSL</md-checkbox>

      </md-content>
    </md-sidenav>

    <div id="map"></div>

    <div id="result">

      <div
        layout = "row"
        layout-margin
        class  = "result-container">

        <div
          flex
          flex-order = "1"
          class      = "result-box">

          <div class = "box-header">
            <div class = "box-logo">

              <img src = "img/fibre.png"/>
            </div>

            <div class = "box-title-description">

              <div class = "box-title">

                <span class = "solution">

                  Solution n°1:
                </span>
                <br>
                Fibre optique (FTTH)
              </div>
            </div>
          </div>

          <div
            class    = "box-body  box-body-ftth"
            ng-style = "{'border-color': colors.ftth}">

            <div class = "box-description">

              Une fibre optique est un fil en verre ou en plastique très fin qui a la propriété d'être un conducteur de la lumière et sert dans la transmission de données et de lumière. Elle offre un débit d'information nettement supérieur à celui des câbles coaxiaux et peuvent servir de support à un réseau « large bande » par lequel transitent aussi bien la télévision, le téléphone, la visioconférence ou les données informatiques.
            </div>

            <div class = "box-description-more">

              <a
                href   = "http://fr.wikipedia.org/wiki/Fibre_optique"
                target = "_blank">

                En savoir plus
              </a>
            </div>

            <hr>

            <div class = "box-eligibilite-title">

              éligibilité au pré-raccordement

              <span>

                <span
                  ng-if = "results.ftth.DATE_DEB_TRAV_PREV"
                  class = "box-eligibilite-yes">

                  OUI
                </span>

                <span
                  ng-if = "!results.ftth.DATE_DEB_TRAV_PREV"
                  class = "box-eligibilite-no">

                  NON
                </span>

                <button
                  ng-if       = "results.ftth.DATE_DEB_TRAV_PREV"
                  type        = "button"
                  class       = "btn btn-primary btn-lg"
                  data-toggle = "modal"
                  ng-click    = "initPopup()"
                  data-target = "#mn_inscription">

                  Inscription
                </button>
              </span>
            </div>

            <div class = "box-eligibilite">

              <div
                ng-if = "results.ftth !== undefined">

                <div
                  ng-if        = "results.ftth"
                  style        = "margin-top: 30px;"
                  ng-bind-html = "computeDateFtthAvailable(results.ftth.DATE_FIN_TRAV_PREV)">
                </div>

                <div
                  class = "box-description-more"
                  ng-if = "!results.ftth._advanced"
                  style = "margin-bottom: 30px;">

                  <a
                    href     = ""
                    ng-click = "results.ftth._advanced = true">

                    + détails
                  </a>
                </div>

                <div
                  ng-if        = "results.ftth._advanced"
                  ng-bind-html = "formatResults('ftth', results.ftth)">
                </div>
              </div>

              <div
                ng-if = "results.ftth === undefined"
                class = "box-eligibilite-spinner">

                <md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
              </div>
            </div>
          </div>
        </div>

        <div
          flex
          flex-order = "2"
          class      = "result-box">

          <div class = "box-header">
            <div class = "box-logo">

              <img src = "img/adsl.png"/>
            </div>

            <div class = "box-title-description">

              <div class = "box-title">

                <span class = "solution">

                  Solution n°2:
                </span>
                <br>
                ADSL (téléphone)
              </div>
            </div>
          </div>

          <div
            class    = "box-body  box-body-adsl"
            ng-style = "{'border-color': colors.adsl}">

            <div class = "box-description">

              L'ADSL est une technique de communication numérique qui permet d'utiliser une ligne téléphonique pour transmettre et recevoir des données numériques de manière indépendante du service téléphonique conventionnel via un filtre ADSL branché à la prise.
            </div>

            <div class = "box-description-more">

              <a
                href   = "http://fr.wikipedia.org/wiki/Asymmetric_Digital_Subscriber_Line"
                target = "_blank">

                En savoir plus
              </a>
            </div>


            <hr>

            <div class = "box-eligibilite-title">

              éligibilité

              <span>

                <span
                  ng-if = "results.adsl"
                  class = "box-eligibilite-yes">

                  OUI
                </span>

                <span
                  ng-if = "!results.adsl"
                  class = "box-eligibilite-no">

                  NON
                </span>
              </span>
            </div>

            <div class = "box-eligibilite">

              <div
                ng-if = "results.adsl !== undefined">

                <div
                  class = "box-eligibilite-none"
                  ng-if = "!results.adsl">

                  Non éligible
                </div>

                <div
                  class = "popup-line"
                  ng-if = "!results.adsl._advanced && results.adsl.LEGENDE">

                  <span class="popup-title">{{results.adsl.LEGENDE}}</span>
                </div>

                <div
                  class = "box-description-more"
                  ng-if = "!results.adsl._advanced"
                  style = "margin-bottom: 30px;">

                  <a
                    href     = ""
                    ng-click = "results.adsl._advanced = true">

                    + détails
                  </a>
                </div>

                <div
                  ng-if        = "results.adsl._advanced"
                  ng-bind-html = "formatResults('adsl', results.adsl)">
                </div>
              </div>

              <div
                ng-if = "results.adsl === undefined"
                class = "box-eligibilite-spinner">

                <md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
              </div>
            </div>
          </div>
        </div>

        <div
          flex
          flex-order = "3"
          class      = "result-box">

          <div class = "box-header">
            <div class = "box-logo">

              <img src = "img/mimo.png"/>
            </div>

            <div class = "box-title-description">

              <div class = "box-title">

                <span class = "solution">

                  Solution n°3:
                </span>
                <br>
                Réseau MiMo
              </div>
            </div>
          </div>

          <div
            class    = "box-body  box-body-mimo"
            ng-style = "{'border-color': colors.mimo}">

            <div class = "box-description">

              MiMo est une technique de multiplexage utilisée dans les réseaux sans fil et les réseaux mobiles permettant des transferts de données à plus longue portée et à plus grande vitesse qu’avec des antennes "classiques".
            </div>

            <div class = "box-description-more">

              <a
                href   = "http://fr.wikipedia.org/wiki/MIMO_(t%C3%A9l%C3%A9communications)"
                target = "_blank">

                En savoir plus
              </a>
            </div>

            <hr>

            <div class = "box-eligibilite-title">

              éligibilité

              <span>

                <span
                  ng-if = "results.mimo"
                  class = "box-eligibilite-yes">

                  OUI
                </span>

                <span
                  ng-if = "!results.mimo"
                  class = "box-eligibilite-no">

                  NON
                </span>
              </span>
            </div>

            <div class = "box-eligibilite">

              <div
                ng-if = "results.mimo">

                <p class="bg-warning">Votre éligibilité à la technologie MiMo est théorique. Seul le passage d'un antenniste pourra confirmer votre niveau de signal.</p>

                <div>
                Vous pouvez souscrire à une offre d'accès internet auprès de ce FAI:
                  <p class="bg-info">
                    <a
                      href = "https://www.ozone.net/"
                      target = "_blank">

                      Ozone.net
                    </a>
                    <br/>
                    <i class ="fa fa-phone"></i>
                    0 973 01 1000
                  </p>
                </div>
                <div
                  class = "box-description-more"
                  ng-if = "!results.mimo._advanced"
                  style = "margin-bottom: 30px;">

                  <a
                    href     = ""
                    ng-click = "results.mimo._advanced = true">

                    + détails
                  </a>
                </div>

                <div
                  ng-if        = "results.mimo_advanced"
                  ng-bind-html = "formatResults('mimo', results.mimo)">
                </div>
              </div>

              <div
                ng-if = "!results.ftth.DATE_DEB_TRAV_PREV && !results.adsl && !results.mimo">

                <p class="bg-warning">Nous vous invitons à contacter les services de <a href="http://www.manchenumerique.fr" >Manche Numérique</a> qui vous indiqueront la procédure pour une connecion internet par satellite et bénéficier d'une prise en charge de l'installationdu kit satellitaire par un antenniste.</p>

              </div>

              <div
                ng-if = "results.mimo === undefined"
                class = "box-eligibilite-spinner">

                <md-progress-circular class="md-warn md-hue-3" md-mode="indeterminate"></md-progress-circular>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div
      class          = "modal fade"
      id             = "mn_inscription"
      tabindex       = "-1"
      role           = "dialog"
      aria-labelledby="mn_inscriptionLabel">

      <div
        class = "modal-dialog"
        role  = "document">

        <div class = "modal-content">

          <div class = "modal-header">

            <button
              type         = "button"
              class        = "close"
              data-dismiss = "modal"
              aria-label   = "Close">

              <span aria-hidden = "true">&times;</span>
            </button>

            <h4
              class = "modal-title"
              id    = "mn_inscriptionLabel">

              FORMULAIRE DE DEMANDE DE PRÉ-RACCORDEMENT À LA FIBRE OPTIQUE
            </h4>
          </div>

          <div class = "modal-body">

            <div ng-if = "!postForm">

              Vous souhaitez être pré-raccordé au réseau de fibre optique, nous vous remercions de bien vouloir compléter ce formulaire. Après vérification de votre demande, Manche Numérique se chargera de transmettre votre demande ainsi que vos coordonnées à l’entreprise en charge des travaux de pré-raccordement pour une prise de rendez-vous.
            </div>

            <div
              class      = "mn-form"
              ng-if      = "!postForm"
              ng-include = "'./html/form.html'">

            </div>

            <div
              class      = "mn-form-in-progress"
              ng-if      = "postForm.inProgress">

                <i class="fa fa-circle-o-notch fa-spin"></i>
                <br/>
                Enregistrement en cours...
            </div>

            <div
              class      = "mn-form-error"
              ng-if      = "postForm.error">

                <i class="fa fa-exclamation-circle"></i>
                <br/>
                Error: {{postForm.error}}
            </div>

            <div
              class      = "mn-form-ok"
              ng-if      = "postForm.ok">

                <i class="fa fa-check-circle-o"></i>
                <br/>
                Votre demande a bien été prise en compte. Un mail de confirmation vous a été envoyé.
            </div>
          </div>

          <div class = "modal-footer">

            <button
              type         = "button"
              class        = "btn btn-default"
              data-dismiss = "modal">

              Fermer
            </button>

            <button
              type        = "button"
              ng-if       = "!postForm"
              ng-click    = "ready = true; isFormValid() ? postFormEl() : null"
              class       = "btn btn-primary">

              Valider
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>