data.json

@@ -544,7 +544,7 @@
 		},
 		"DAM": {
 			"label": "Distributeurs automatiques de titres Pass Pass",
-			"description": "Bornes permettant l'affichage, le rechargement et l'impression du contenu d'une carte ou ticket rechargeable Pass Pass, ainsi que l'achat de titres rechargeables Pass Pass."
+			"description": "Bornes permettant l'affichage, le rechargement et l'impression du contenu d'une carte ou ticket rechargeable, ainsi que l'achat de tickets rechargeables."
 		},
 		"SNCF": {
 			"label": "Correspondance SNCF",

index.htm

@@ -41,6 +41,8 @@
                     L'<strong>avant</strong> du métro se trouve à <strong>gauche</strong>, et l'<strong>arrière</strong> se trouve à <strong>droite</strong>.
                 </div>
                 <ul id="doorsList"></ul>
+                <h2>Services disponibles</h2>
+                <ul id="servicesList" class="list-group"></ul>
             </div>
 			<div class="content" id="aboutPage" style="display:none">
                 <p><strong>Transporte</strong>, mot-valise entre <em>Transpole</em> et <em>porte</em>, est une application simple répondant à un besoin simple : gagner du temps dans le métro de Lille. Elle permet, en indiquant sa station de destination, de savoir à quelle porte se placer dans le métro pour accéder directement en sortant à la sortie ou correspondance souhaitée.</p>

script.js

@@ -98,6 +98,7 @@ function renderStation(lineid, destination, station) {
     );
     page.find('div.alert-warning').css('display', doors.reverse ? 'block' : 'none');
     page.find('ul#doorsList').html(['1','2','3','4','5','6'].map(function(i) { return $.isEmptyObject(doors[i]) ? '' : '<li>Porte '+i+'<ul>'+doors[i].map(function(n) { return '<li>'+data.icons[n].label+'</li>'; }).join('')+'</ul>'; }).join(''));
+    page.find('ul#servicesList').html(s.services.map(function(n) { return '<li class="list-group-item">'+data.services[n].label+'<br /><span class="description">'+data.services[n].description+'</span></li>' }).join(""))
 }
 
 function renderErrorPage(message) {

style.css

@@ -93,5 +93,6 @@ hr {
 }
 #stationDetailPage ul#doorsList > li { font-weight: bold; }
 #stationDetailPage ul#doorsList > li li { font-weight: normal; }
+#stationDetailPage ul#servicesList span.description { font-size: 90%; color: #888; }
 
 .loader{color:#274e13;position:fixed;box-sizing:border-box;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;z-index:999999}.loader:after,.loader:before{box-sizing:border-box}.loader.is-active{background-color:rgba(255,255,255,0.75);width:100%;height:100%;left:0;top:0}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes blink{from{opacity:.5}to{opacity:1}}.loader[data-text]:before{position:fixed;left:0;top:50%;color:currentColor;font-family:Helvetica,Arial,sans-serif;text-align:center;width:100%;font-size:14px}.loader[data-text='']:before{content:'Loading'}.loader[data-text]:not([data-text='']):before{content:attr(data-text)}.loader[data-text][data-blink]:before{animation:blink 1s linear infinite alternate}.loader-default[data-text]:before{top:calc(50% - 63px)}.loader-default:after{content:'';position:fixed;width:48px;height:48px;border:solid 8px #38761d;border-left-color:transparent;border-radius:50%;top:calc(50% - 24px);left:calc(50% - 24px);animation:rotation 1s linear infinite}.loader-default[data-half]:after{border-right-color:transparent}.loader-default[data-inverse]:after{animation-direction:reverse}