olinox14
/
eligibilite


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
							<!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>
    <script src="js/typeahead.js"></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"
          placeholder          = "Pour tester votre éligibilité, merci de saisir une adresse"
          ng-model             = "address"
          ng-focus             = "closeRight()"
          class                = "typeahead"
          options              = "typeAheadOpts"
          datasets             = "allAdresses"
          typeahead-on-select  = "onSubmitAddress($item, $model, $label)"
          uib-typeahead        = "address for address in suggestLocation($viewValue)"
          typeahead-loading    = "loadingLocations"
          typeahead-no-results = "noResults"
          autofocus/>

        <div
          ng-show = "loadingLocations"
          class   = "loading-typeahead-results">

          <i
            class   = "glyphicon glyphicon-refresh">
          </i>

          Recherche en cours...
        </div>


        <div
          ng-show = "noResults"
          class   = "no-typeahead-results">

          <i class = "glyphicon glyphicon-remove"></i>

          Aucun résultat trouvé!
        </div>

        <!--

        <input
          type="text"
          class="form-control"
          ng-model="asyncSelected"
          placeholder="Locations loaded via $http"
          uib-typeahead="address for address in getLocation($viewValue)"
          typeahead-loading="loadingLocations"
          typeahead-no-results="noResults" />
          -->
      </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      = "Satellite"
            ng-click   = "changeMap('satellite')"
            aria-label = "Satellite">Satellite
          </md-radio-button>

          <br/>

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

                Fibre optique (FTTH)
              </div>

              <div class = "box-desc">

                Le Ftth (Fiber To The Home) “signifie la fibre optique jusqu'à l'abonné”. Cette technologie présente des atouts majeurs (un débit  très fortement  augmenté - de l’ordre de 100 Mbit/s - et symétrique)  et ouvre des possibilités nouvelles en termes d 'usages numériques.

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

                  En savoir plus
                </a>
              </div>
            </div>
          </div>

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

            <hr>

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

              éligibilité au pré-raccordement

              <span>

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

                  OUI
                </span>

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

                  NON
                </span>

                <button
                  ng-if       = "results.ftth.date"
                  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 = "formatDateFTTH(results.ftth.date)">
                </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">

                ADSL (téléphone)
              </div>

              <div class = "box-desc">

                L'ADSL est une technologie permettant l'accès à internet haut débit par le biais de la ligne téléphonique, constituée  de fils de cuivre.  Cette  ligne  téléphonique  relie  votre domicile  au central téléphonique  de France Télécom.
                <a
                  href   = "http://fr.wikipedia.org/wiki/Asymmetric_Digital_Subscriber_Line"
                  target = "_blank">

                  En savoir plus
                </a>
              </div>
            </div>
          </div>

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

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


            </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">

                Réseau MiMo
              </div>

              <div class = "box-desc">

                Cette technologie hertzienne, déployée par Manche Numérique, permet de desservir les zones non-éligibles à I'ADSL dites "zones blanches" et les zones qui seront déployées ultérieurement par la fibre optique.  Le MiMo permet un accès à internet et à un service de téléphonie. Cette technologie offre des débits de l'ordre de 10 Mbit/s descendants et de 3 Mbit/s montants.

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

                  En savoir plus
                </a>
              </div>
            </div>
          </div>

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

            <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>