[bknr-cvs] hans changed trunk/projects/bos/payment-website/static/poi-ms. - bknr-cvs@common-lisp.net - mailman3.common-lisp.net

29 Nov 2008

Revision: 4097
Author: hans
URL: http://bknr.net/trac/changeset/4097
Refactor a bit.
Add overview page.
Add POI selector.
U   trunk/projects/bos/payment-website/static/poi-ms.css
U   trunk/projects/bos/payment-website/static/poi-ms.html
U   trunk/projects/bos/payment-website/static/poi-ms.js
Modified: trunk/projects/bos/payment-website/static/poi-ms.css
===================================================================

--- trunk/projects/bos/payment-website/static/poi-ms.css	2008-11-28 19:36:24 UTC (rev 4096)
+++ trunk/projects/bos/payment-website/static/poi-ms.css	2008-11-28 23:56:21 UTC (rev 4097)
@@ -2,6 +2,10 @@
 h2 { font-size: 160% }
 h3 { font-size: 120% }
+ul#media-list {
+    margin: 2em 0em 2em 0em;
+}
+
 ul#media-list li {
     position: relative;
     height: 44px;
@@ -18,6 +22,11 @@
     background-color: #0f0;
 }
+#poi-selector {
+    width: 300px;
+    font-size: 180%;
+}
+
 .map {
     position: relative;
 }
Modified: trunk/projects/bos/payment-website/static/poi-ms.html
===================================================================
--- trunk/projects/bos/payment-website/static/poi-ms.html	2008-11-28 19:36:24 UTC (rev 4096)
+++ trunk/projects/bos/payment-website/static/poi-ms.html	2008-11-28 23:56:21 UTC (rev 4097)
@@ -17,64 +17,16 @@
       <div id="bd">
    <div id="yui-main">
      <div class="yui-b" id="content">
-            <img src="/poi-image/sunbear-sanctuary/1" width="360"
-            height="360" float="left"/>Am 11.01 wurde in Samboja Lestari ein
-            kleiner weiblicher Malaienbär (indonesisch: Bruang Madu =
-            Honigbär) von einem Dorfbewohner abgegeben, die Mutter ist
-            wahrscheinlich getötet worden.  Bei der Ankunft war sie
-            ungefähr eine Woche alt und wog nur einen Kilo. Seitdem
-            wird sie von sechs Pflegern abwechselnd rund um die Uhr
-            gepflegt. Ihr wurde der Name Arkana gegeben, und
-            inzwischen wiegt sie schon 1,6 Kilo.  Ihre neue
-            "Mutter", also die Hauptbezugsperson ist Slamet
-            Mulyono. Täglich wird sie für eine Stunde in die Sonne
-            gebracht, mehrmals täglich wird ihre Temperatur gemessen,
-            die genau wie bei Menschen auch zwischen 36 und 37 Grad
-            liegt. Fällt die Temperatur, wird sie mit Eukalypusöl
-            (indonesisch: Minyak Kayu Putih) eingerieben. Auch nachdem
-            sie Milch bekommt, wird sie damit eingerieben, um den
-            Kreislauf anzuregen.  Wenn sie älter ist, wird sie Früchte
-            zu essen bekommen, das Hauptnahrungsmittel der
-            Malaienbären. Die Früchte, meistens Salak, Mango, Papaya,
-            Ananas und Zuckerrohr kommen aus dem ökologischen Garten
-            Samboja Lestaris Mehrmals täglich bekommt sie ein frisches
-            Nest aus verschieden Blättern, normalerweise frisst die
-            Mutter die Exkremente, und hält so das Nest sauber.
      </div>
    </div>
    <div class="yui-b">
-          <h1>Malaienbärgehege</h1>
+          <div id="small-map">
+            <img src="/infosystem/bilder/uebersichtskarte_klein.gif" width="118" height="62"/>
+          </div>
+          <select id="poi-selector" size="1">
+            <option>Überblick</option>
+          </select>
           <ul id="media-list">
-            <li>
-              <img src="/poi-image/sunbear-sanctuary/1" width="40" height="40"/>
-              20.03.2004<br/>
-              <a href="#">Arkana der kleine Malaienbär</a>
-            </li>
-            <li>
-              <img src="/poi-image/sunbear-sanctuary/2" width="40" height="40" />
-              20.03.2004<br/>
-              <a href="#">Ursus Malayanus</a>
-            </li>
-            <li>
-              <img src="/poi-image/sunbear-sanctuary/3" width="40" height="40" />
-              20.03.2004<br/>
-              <a href="#">Das Gehege</a>
-            </li>
-            <li>
-              <img src="/poi-image/sunbear-sanctuary/4" width="40" height="40" />
-              20.03.2004<br/>
-              <a href="#">Fütterungskäfig</a>
-            </li>
-            <li>
-              <img src="/poi-image/sunbear-sanctuary/5" width="40" height="40" />
-              20.03.2004<br/>
-              <a href="#">Futterzubereitung</a>
-            </li>
-            <li>
-              <img src="/poi-image/sunbear-sanctuary/6" width="40" height="40" />
-              20.03.2004<br/>
-              <a href="#">Erfrischung in den Tropen</a>
-            </li>
           </ul>
         </div>
       </div>
Modified: trunk/projects/bos/payment-website/static/poi-ms.js
===================================================================
--- trunk/projects/bos/payment-website/static/poi-ms.js	2008-11-28 19:36:24 UTC (rev 4096)
+++ trunk/projects/bos/payment-website/static/poi-ms.js	2008-11-28 23:56:21 UTC (rev 4097)
@@ -2,8 +2,7 @@
$(document).ready(init);
-var poi_id;
-var poi;
+var pois = {};
Date.prototype.renderDate = function() {
     return this.getDate() + '.' + this.getMonth() + '.' + (1900 + this.getYear());
@@ -17,55 +16,52 @@
var mediaHandlers = {
     image: {
-        icon: function (medium) { return IMG({ src: '/image/' + medium.id, width: 40, height: 40 }) },
-        action: function (medium) {
-            $('#content')
-            .empty()
-            .append(H2(null, medium.title),
-                    IMG({ src: '/image/' + medium.id }), BR(),
-                    H3(null, medium.subtitle),
-                    P(null, medium.description));
+        icon: function (medium) {
+            return IMG({ src: '/image/' + medium.id + '/thumbnail,,40,40', width: 40, height: 40 })
+        },
+        makeViewer: function (medium) {
+            return IMG({ src: '/image/' + medium.id });
         }
     },
     panorama: {
-        icon: function (medium) { return IMG({ src: '/static/panorama-icon.gif', width: 40, height: 40 }) },
-        action: function (medium) {
-            $('#content')
-            .empty()
-            .append(H2(null, medium.title),
-                    APPLET({ archive: '/static/ptviewer.jar',
-                             code: 'ptviewer.class',
-                             width: 400,
-                             height: 300},
-                           PARAM({ name: 'file', value: '/image/' + medium.id}),
-                           PARAM({ name: 'cursor', value: 'MOVE' })),
-                    H3(null, medium.subtitle),
-                    P(null, medium.description));
+        icon: function (medium) {
+            return IMG({ src: '/static/panorama-icon.gif', width: 40, height: 40 })
+        },
+        makeViewer: function (medium) {
+            return APPLET({ archive: '/static/ptviewer.jar',
+                            code: 'ptviewer.class',
+                            width: 400,
+                            height: 300},
+                          PARAM({ name: 'file', value: '/image/' + medium.id}),
+                          PARAM({ name: 'cursor', value: 'MOVE' }));
         }
     },
     movie: {
-        icon: function (medium) { return IMG({ src: '/static/movie-icon.gif', width: 40, height: 40 }) },
-        action: function (medium) {
-            $('#content')
-            .empty()
-            .append(H2(null, medium.title),
-                    OBJECT({ width: 360, height: 360 },
-                           PARAM({ name: "movie", value: medium.url }),
-                           EMBED({ src: medium.url, type: 'application/x-shockwave-flash',
-                                   width: 400, height: 300 })), BR(),
-                    H3(null, medium.subtitle),
-                    P(null, medium.description));
+        icon: function (medium) {
+            return IMG({ src: '/static/movie-icon.gif', width: 40, height: 40 })
+        },
+        makeViewer: function (medium) {
+            return OBJECT({ width: 360, height: 360 },
+                          PARAM({ name: "movie", value: medium.url }),
+                          EMBED({ src: medium.url, type: 'application/x-shockwave-flash',
+                                  width: 400, height: 300 }));
         }
     }
 };
-function selectMedium(fn, e) {
+function showMedium(e) {
+    var medium = e.data;
     $('#media-list *').removeClass('active');
     $(e.target).addClass('active');
-    fn();
+    $('#content')
+    .empty()
+    .append(H2(null, medium.title),
+            mediaHandlers[medium.mediumType].makeViewer(medium),
+            H3(null, medium.subtitle),
+            P(null, medium.description));
 }
-function loadMainInfo() {
+function loadMainInfo(poi) {
     var map = [];
     for (var y = -1; y < 3; y++) {
         var tiles = [];
@@ -81,6 +77,7 @@
     }
     map.push(IMG({ 'class': 'icon',
                    src: '/images/' + poi.icon + '.gif',
+                   width: 16, height: 16,
                    style: 'left: ' + (poi.x - ((Math.floor(poi.x / 90) - 1) * 90) - 8) + 'px; '
                                    + 'top: ' + (poi.y - ((Math.floor(poi.y / 90) - 1) * 90) - 8) + 'px'}));
@@ -89,40 +86,69 @@
                                  P(null, poi.description));
 }
-var B = createDOMFunc('b', null);
+function showPOI(e) {
+    var poi = pois[(e.target && e.target.value) || e.data];
-function loadPoi() {
-    document.title = poi.title;
-    $('.yui-b h1').html(poi.title);
-    loadMainInfo();
     $('#media-list').empty();
-    map(function (medium) {
-        if (mediaHandlers[medium.mediumType]) {
-            $('#media-list')
-            .append($(A({ href: '#' },
-                        LI(null,
-                           mediaHandlers[medium.mediumType].icon(medium),
-                           (new Date(medium.timestamp)).renderDate(),
-                           BR(),
-                           B(null, medium.title || medium.name))))
-                    .bind('click', null, partial(selectMedium, partial(mediaHandlers[medium.mediumType].action, medium))));
-        }
-    }, poi.media);
+    if (!poi) {
+        showOverview();
+    } else {
+        document.title = poi.title;
+        $('.yui-b h1').html(poi.title);
+        loadMainInfo(poi);
+        map(function (medium) {
+            if (mediaHandlers[medium.mediumType]) {
+                $('#media-list')
+                .append($(A({ href: '#' },
+                            LI(null,
+                               mediaHandlers[medium.mediumType].icon(medium),
+                               (new Date(medium.timestamp)).renderDate(),
+                               BR(),
+                               B(null, medium.title || medium.name))))
+                        .bind('click', medium, showMedium));
+            }
+        }, poi.media);
+    }
 }
+function showOverview() {
+
+    var elements = [];
+    elements.push(IMG({ src: '/infosystem/bilder/karte_uebersicht.jpg', width: 360, height: 360 }));
+    for (var i in pois) {
+        var poi = pois[i];
+        var link = A({ href: '#' },
+                     IMG({ 'class': 'icon',
+                            src: '/images/' + poi.icon + '.gif',
+                            width: 16, height: 16,
+                            title: poi.title,
+                            style: 'left: ' + (Math.round(poi.x / 30) - 8) + 'px; '
+                                   + 'top: ' + (Math.round(poi.y / 30) - 8) + 'px' }));
+        $(link).bind('click', poi.id, showPOI);
+        elements.push(link);
+    }
+
+    $('#content')
+    .empty()
+    .append(H2(null, 'XXuebersichtXX'),
+            DIV({ 'class': 'map' }, elements));
+}
+
 function loadData(data) {
     try {
-        var pois = data.pois;
+        for (var i in data.pois) {
+            var poi = data.pois[i];
+            pois[poi.id] = poi;
+            $('#poi-selector').append(OPTION({ value: poi.id }, poi.title));
+        }
+        $('#poi-selector').bind('change', null, showPOI);
-        for (var i in pois) {
-            if (pois[i].id == poi_id) {
-                poi = pois[i];
-                loadPoi();
-                return;
-            }
+        var poi_id = document.location.hash.replace(/#/, "");
+        if (poi_id) {
+            showPOI({ data: poi_id });
+        } else {
+            showOverview();
         }
-
-        alert('invalid poi id (not found)');
     }
     catch (e) {
         alert(e);
@@ -130,11 +156,5 @@
 }
function init() {
-    poi_id = document.location.hash.replace(/#/, "");
-
-    if (poi_id.match(/^[0-9]+$/)) {
-        loadJSONDoc('/poi-json').addCallback(loadData);
-    } else {
-        alert('invalid poi id');
-    }
+    loadJSONDoc('/poi-json').addCallback(loadData);
 }
\ No newline at end of file

    