source: spip-zone/_plugins_/rainette/trunk/demo/rainette.html @ 94404

Last change on this file since 94404 was 94404, checked in by eric@…, 4 years ago

Suite à la copie du trunk en branches/v2, on commite un premier ensemble de modifications correspondant au refactoring complet de Rainette v2 en v3.
Yahoo a été supprimé, tous les services ont été revus avec une configuration propre, une API nouvelle et simplifiée.
Le tableau des données a été standardisé avec une configuration propre.
L'API d'affichage est en cours de refactoring: conditions et infos sont ok.
Les prévisions ne sont pas encore disponibles.

File size: 8.3 KB
Line 
1#CACHE{1800}
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
3        "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
4<html xml:lang="#LANG" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml">
5<head>
6        <meta http-equiv='Content-Type' content='text/html; charset=#CHARSET' />
7        <title>Rainette - Demo</title>
8        <style type="text/css">
9                /* Layout Gala 24 */
10                html,body{margin:0;padding:0}
11                body{font: 76% arial,sans-serif}
12                p{margin:0 10px 10px}
13                a{display:block;color: #981793;padding:10px}
14                div#header h1{height:80px;line-height:80px;margin:0;
15                  padding-left:10px;background: #EEE;color: #79B30B}
16                div#content p{line-height:1.4}
17                div#navigation{background:#B9CAFF}
18                div#extra{background:#FF8539}
19                div#footer{background: #333;color: #FFF}
20                div#footer p{margin:0;padding:5px 10px}
21                div#wrapper{float:right;width:100%;margin-left:-200px}
22                div#content{margin-left:200px;}
23                div#navigation{float:left;width:200px}
24                div#extra{float:left;clear:left;width:200px}
25                div#footer{clear:both;width:100%}
26                /* Personnalisation pour la demo */
27                a.spip-admin-boutons {display: inline;}
28                div#header h1{color:#798F74}
29                div#content{padding-left:2em;padding-bottom:4em;}
30                div#extra{background:#fff;}
31                div#footer{padding:2em;}
32                .h2{text-align:center;border-bottom:2px solid #798F74;color:#798F74}
33                table{border:1px solid #000000;border-collapse:collapse;}
34                caption {background:#333;color:#eee;}
35                th {font-weight: bold;border-bottom:1px solid #000}
36                thead th {background: #DDD;}
37                th,td,caption {padding: 0.75em;border-right:1px solid #000;}
38                tbody tr:nth-child(even) th,
39                tbody tr:nth-child(even) td,
40                tbody tr.even th,
41                tbody tr.even td {background: #EEE;}
42                tbody tr td.erreur {background: #FBE3E4;}
43                tbody tr td.nonapi {background: #FFF6BF;}
44                .clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
45                .clearfix{display:inline-table;}
46                div.clearfix{margin-bottom:30px;}
47                div.notice{padding:1em;color: #514721;border:2px solid #FFD324;background-color:#FFF6BF;}
48                .menu{background-color:#fefefe;margin-bottom:2em;padding:0;}
49                .menu .h2{border:0;color:#000;}
50                .menu .menu-items{margin-bottom: 0;}
51                .menu-items {border-bottom:0 none;border-top: 1px solid #EEEEEE;list-style: none outside none;margin: 0 0 1.5em;padding: 0;}
52                .menu-items .item {border-bottom: 1px solid #EEEEEE;clear: both;list-style: square outside none;margin-left: 0;overflow: hidden;padding: 0.75em 0;}
53                .menu-items .item:hover {background-color: #EEEEEE;}
54                .menu-items .item a {text-decoration:none;padding:0 0 0 1em;}
55                .menu-items .item a:hover {text-decoration:underline;}
56                .menu-items .item .on {padding:0 0 0 1em;}
57        </style>
58        #INSERT_HEAD
59</head>
60
61#SET{service, #ENV{service, weather}}
62#SET{mode, #ENV{mode, conditions}}
63#SET{jeu, #ARRAY{
64                        'weather', 'FRXX0076',
65                        'owm', 'Paris,Fr',
66                        'wwo', 'Paris,France',
67                        'wunderground', 'Paris,France'}}
68#SET{lieu, #ENV{ville, #GET{jeu/#GET{service}}}}
69
70<body>
71        <div id="container">
72        <div id="header">
73                <h1>
74                        <img height="48" width="48" title="Plugin Rainette" alt="Plugin Rainette" src="#CHEMIN{rainette-64.png}"/>
75                        PLUGIN RAINETTE[ ((#PLUGIN{RAINETTE, version}))]
76                </h1>
77        </div>
78        <div id="wrapper">
79                <div id="content">
80                        <h2 class="h2">1.1 - UTILISATIONS DES INFORMATIONS METEO</h2>
81                        <a name="infos" href="#"></a>
82                        <div class="clearfix">
83                                <div class="clearfix">
84                                        <h3>Utilisation du mod&eacute;le <strong>rainette_infos</strong></h3>
85                                        [(#MODELE{rainette_infos,code=#GET{lieu},sous_modele=infos_ville, service=#GET{service}})]
86                                </div>
87                                <div class="clearfix">
88                                        <h3>Utilisation de la balise <strong>RAINETTE_INFOS</strong></h3>
89                                        <ul>
90                                                <li>Ville observ&eacute;e:&nbsp;[<strong>(#RAINETTE_INFOS{#GET{lieu}, ville, #GET{service}})</strong>]</li>
91                                                <li>Longitude, appel sans filtre unit&eacute;:&nbsp;[<strong>(#RAINETTE_INFOS{#GET{lieu}, longitude, #GET{service}})</strong>]</li>
92                                                <li>Latitude, appel avec filtre unit&eacute;:&nbsp;[<strong>(#RAINETTE_INFOS{#GET{lieu}, latitude, #GET{service}}|rainette_afficher_unite{angle, -1, #GET{service}})</strong>]</li>
93                                                <li>Appel sans type d'info pr&eacute;cis&eacute;e, on renvoie le tableau s&eacute;rialis&eacute;:&nbsp;[<strong>(#RAINETTE_INFOS{#GET{lieu}, '', #GET{service}})</strong>]</li>
94                                                <li>Appel sans argument, on renvoie une chaine vide:&nbsp;[<strong>(#RAINETTE_INFOS)</strong>]</li>
95                                        </ul>
96                                </div>
97                        </div>
98
99                        <h2 class="h2">1.2 - UTILISATIONS DES CONDITIONS METEO</h2>
100                        <a name="conditions" href="#"></a>
101                        <div class="clearfix">
102                                <h3>Utilisation du mod&eacute;le <strong>rainette_conditions</strong></h3>
103                                [(#MODELE{rainette_conditions,code=#GET{lieu},sous_modele=conditions_tempsreel, service=#GET{service}})]
104                        </div>
105
106
107                        <h2 class="h2">1.3 - UTILISATIONS DES PREVISIONS METEO</h2>
108                        <a name="previsions" href="#"></a>
109                        <div class="clearfix">
110<!--
111                                <div class="clearfix">
112                                        <h3>Utilisation du mod&eacute;le <strong>rainette_previsions</strong>, pour les jours &agrave; venir (jour=3, type=x_jours, sous-modele=previsions_24h)</h3>
113                                        [(#MODELE{rainette_previsions,code=#GET{lieu},type=x_jours,jour=5,sous_modele=previsions_24h, service=#GET{service}})]
114                                </div>
115                                <div class="clearfix">
116                                        <h3>Utilisation du mod&eacute;le <strong>rainette_previsions</strong>, pour le jour courant (jour=0, type=1_jour, sous-modele=previsions_12h)</h3>
117                                        <p>Avant 14h00 on affiche jour et nuit, apr&egrave;s 14h00 on affiche nuit et le lendemain matin</p>
118                                        [(#MODELE{rainette_previsions,code=#GET{lieu},type=1_jour,jour=0,sous_modele=previsions_12h, service=#GET{service}})]
119                                </div>
120                                <div class="clearfix">
121                                        <h3>Utilisation du mod&eacute;le <strong>rainette_previsions</strong>, pour le surlendemain (jour=2, type=1_jour, sous-modele=previsions_12h)</h3>
122                                        [(#MODELE{rainette_previsions,code=#GET{lieu},type=1_jour,jour=2,sous_modele=previsions_12h, service=#GET{service}})]
123                                </div>
124-->
125                        </div>
126
127                        <h2 class="h2">2.0 - COMPARAISON DES DONNEES DE CHAQUE SERVICE</h2>
128                        <a name="comparaison" href="#"></a>
129                        <p>
130                                L&eacute;gende du tableau :
131                                <ul>
132                                        <li><strong><del>API</del></strong>&nbsp;: indique que la donn&eacute;e ne fait pas partie des informations fournies par le service</li>
133                                        <li><strong>Indisponible</strong>&nbsp;: indique que la donn&eacute;e est fournie par le service mais indisponible pour le moment</li>
134                                </ul>
135                        </p>
136                        <div class="clearfix">
137                                #SET{donnees, #GET{mode}|rainette_dbg_comparer_services{#GET{jeu}}}
138                                #INCLURE{fond=demo/inc-comparer_services,
139                                        jeu=#GET{jeu},
140                                        donnees=#GET{donnees},
141                                        mode=#GET{mode}}
142                        </div>
143                </div>
144        </div>
145
146        <div id="navigation">
147        </div>
148
149        <div id="extra">
150                <div class="menu" id="services">
151                        <h2 class="h2">M&eacute;t&eacute;o d'un service</h2>
152                        <p>Choisissez un service pour afficher les mod&egrave;les informations, conditions et pr&eacute;visions (1.1, 1.2, 1.3)</p>
153                        <ul class="menu-items">
154                        <BOUCLE_services(DATA) {source table, #GET{jeu}}>
155                                [<li class="item">
156                                (#SELF|parametre_url{service, #CLE}
157                                        |lien_ou_expose{
158                                                [(#VAL{rainette:titre_service_}|concat{#CLE}|_T)],
159                                                [(#GET{service}|=={#CLE})]})
160                                </li>]
161                        </BOUCLE_services>
162                        </ul>
163                </div>
164
165                <div class="menu" id="modes">
166                        <h2 class="h2">Comparaison des services</h2>
167                        <p>Choisissez un mode pour comparer les données fournies par chaque service (2.0)</p>
168                        <ul class="menu-items">
169                        <BOUCLE_modes(DATA) {source table, #LISTE{infos, conditions, previsions}}>
170                                [<li class="item">
171                                (#SELF|parametre_url{mode, #VALEUR}
172                                        |lien_ou_expose{
173                                                [(#VALEUR|ucfirst)],
174                                                [(#GET{mode}|=={#VALEUR})]})
175                                </li>]
176                        </BOUCLE_modes>
177                        </ul>
178                </div>
179
180                <div class="menu" id="configuration">
181                        <h2 class="h2">Configuration des services</h2>
182                        <p>Choisissez un service pour vous rendre sur sa page de configuration</p>
183                        <ul class="menu-items">
184                        <BOUCLE_configurations(DATA) {source table, #GET{jeu}}>
185                                [<li class="item">
186                                (#URL_ECRIRE{configurer_rainette}|parametre_url{service, #CLE}
187                                        |lien_ou_expose{
188                                                [(#VAL{rainette:titre_service_}|concat{#CLE}|_T)]})
189                                </li>]
190                        </BOUCLE_configurations>
191                        </ul>
192                </div>
193
194        </div>
195
196        <div id="footer">
197                <p>Pour appeler la page de demo:</p>
198                <ul>
199                        <li><strong>http://monsite/spip.php?page=demo/rainette</strong> (Paris par d&eacute;faut) ou</li>
200                        <li><strong>http://monsite/spip.php?page=demo/rainette&amp;ville=FRXXnnnn&amp;service=xxx</strong> pour pr&eacute;ciser la ville voire le service</li>
201                </ul>
202        </div>
203</div>
204</body>
205</html>
Note: See TracBrowser for help on using the repository browser.