[DHTML] Reserverings overzicht weergeven

[klaaz]

Ik ben bezig met een vliegtuig reserveringssysteem welke ik wil voorzien van de mogelijkheid om dubbele boekingen te doen. Daarmee bedoel ik dat een reeds geboekt vliegtuig ook door een andere geboekt kan worden en dat indien de eerste reservering terug getrokken wordt, de tweede reservering actueel wordt.

Nu is dit technisch allemaal geen probleem (PHP/MySQL).

Ik wil echter de huidige weergave, waarbij ik gebruik maak van tabellen om de reserveringen weer te geven wijzigen in een meer flexibel format. In de tabellen is het lastig om bijvoorbeeld tegelijkertijd de actuele en achterliggende boeking te visualiseren. In bijvoorbeeld DHTML kan dit volgens mij veel beter.

Hier wil ik naar toe:

In dit voorbeeld is de reservering van K. Wiegers een achterliggende reservering (backup reservering?) Mocht de reservering van H. Petersen en R. Bakker terug getrokken worden, dan wordt de reservering van K. Wiegers actueel.

Ik denk er over om de gehele tabel (zie afbeelding) met afzonderlijke div's op te bouwen, en de reserveringen daar over heen te leggen. Achterliggende boekingen lichter van kleur, de actuele in harde kleuren. Door het gebruik van Ajax zal de verwerking ook veel sneller zijn dan met tabellen lijkt me. Nu al kan door in de tabel te klikken een reservering gemaakt worden, dit soort handigheidjes wil ik uiteraard meenemen.

Is het verstandig deze aanpak te hanteren of zijn er nog betere methodes om dit te realiseren? Ik heb kort naar de mogelijkheid gekeken om de grid gewoon te tekenen, of zelfs een achtergrondafbeelding met lijntjes te gebruiken. Dit laatste maakt het overzicht echter minder flexibel in de situaties waarin een vliegtuig wordt toegevoegd of verwijderd.

Ik vind op het net weinig informatie over deze toepassing.

Welke aanpak zouden jullie kiezen?

[ Voor 4% gewijzigd door klaaz op 15-07-2006 12:46 ]

[Zoefff]

Ik heb een tijd geleden een opzetje voor iemand (ook een topic op GoT) gemaakt met defenitionlists en absoluut gepositioneerde afspraken, zie http://crew.tweakers.net/Zoefff/web/agenda.htm. Iedere afspraak is dus een onderdeel van de dt met de begintijd. De 'duur' van de afspraak (hoogte van de dd) geef je per afspraak aan in de CSS

Met een beetje javascript kan je dan misschien nog wel wat leuke dingen realiseren zoals afspraken die onmouseover naar de voorgrond komen, etc.

De tabel helemaal nabouwen met divs zou ik in ieder geval níet doen. Je zit dan jezelf in de maling te nemen, want dan kan je net zo goed een tabel gebruiken. In principe zou dat in dit geval ook prima kunnen natuurlijk, het is min of meer tabulaire data

edit:

Dat was dit topic

[ Voor 8% gewijzigd door Zoefff op 15-07-2006 13:16 ]

[Annie]

Het wordt natuurlijk vervelend wanneer twee boekingen dezelfde tijden omvatten; de achterliggende boeking zal je dan niet zien.
Waarom geef je het niet weer op dezelfde wijze als Outlook? Dus beide boekingen naast elkaar in de kolom. Het verschil in kleur kan dan nog steeds aangeven wat de hoofdboeking is.

[klaaz]

Zoeff: dank je wel voor je tips en voorbeeld!

Annie: da's een oplossing, maar ik wil het systeem zo maken dat je in dat geval wel kan zien dat er wat achter zit. Vervolgens zou je met een mouse over de tweede laag zichtbaar kunnen maken. Ik wil nml graag de breedte van de kolom gebruiken om de namen erin zichtbaar te houden. Maar ik houdt het in overweging.

[Zoefff]

Uit nieuwsgierigheid heb ik mijn idee met een tabel even uitgevoerd. Absoluut gepositioneerde div's binnen een tabelcel die daar uit kunnen breken als een afspraak langer dan 1 'unit' (half uur) is. Raar probleempje waar ik in Fx tegenaan liep is dat als je een td relatief positioneert dat een absoluut gepositioneerde div alsnog t.o.v. het body element wordt gepositioneert, in plaats van t.o.v. de td, zoals je zou verwachten (en in IE wel gebeurt). Om die reden staat er eerst een span in de td, en daarin een absoluut gepositioneerde div

Cascading Stylesheet:

* { 
    margin:0;
    padding:0;
}
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:0.7em;
    padding:2em;
}

col.ph-aaa, col.ph-bbb, col.ph-ccc { width:10em; }
col.tijd { width: 3em;  }


table {
    background-color:#dfeef5;
}

table thead {
    background-color:#00558e;
    color:white;
}

table td {
    padding:0 0.2em;
    height:2.8em;
    background-color:#afc3cc;
}

table td.tijd {
    background-color:black;
    color:white;
}

table td span { 
    position:relative; 
    height:2.4em;
    display:block;
}

table td div {
    border:2px solid;
    min-height:1.9em;
    width:9.3em;
    position:absolute;
    left:0;
    top:0;
    padding:0.2em 0 1.3em 0;
}

table td div p {
    height:100%;
    padding:0.1em 0.3em;
    background-color:#dddddd;
}

/* hoogte voor x units  (1 'unit' = half uur) */
table td div.units-5 { height:12.7em; }
table td div.units-10 { height:27.8em; }

table td div.priority-2 {
    opacity:.6;
}

table td div#afspraak-1 { background-color:#00558e; }
table td div#afspraak-2 { background-color:#00558e; }
table td div#afspraak-3 { background-color:#339933; }

HTML:

<table cellspacing="2">
    
    <colgroup span="4">
        <col class="tijd">
        <col class="ph-aaa">
        <col class="ph-bbb">
        <col class="ph-ccc">
    </colgroup>

    <thead>
        <tr>
            <th>Tijd</th>
            <th>PH-AAA</th>
            <th>PH-BBB</th>
            <th>PH-CCC</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td class="tijd">09:00</td>
            <td><span><div id="afspraak-1" class="units-5 priority-1"><p>H. Jansen</p></div></span></td>
            <td><span><div id="afspraak-2" class="units-10 priority-2"><p>K. Wiegers</p></div></span></td>
            <td></td>
        </tr>
        <tr>
            <td class="tijd">09:30</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="tijd">10:00</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td class="tijd">10:30</td>
            <td></td>
            <td><span><div id="afspraak-3" class="units-5 priority-1"><p>H. Pietersen<br>R. Bakker</p></div></span></td>
            <td></td>
        </tr>
        <tr>
            <td class="tijd">11:00</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        ... etc. ...

        <tr>
            <td class="tijd">15:00</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    
</table>

Voorbeeld op http://crew.tweakers.net/Zoefff/web/agenda-table.htm. Wel in Fx bekijken, want in IE kloppen de afmetingen net niet helemaal en werkt de opacity (natuurlijk) niet. Kan je wel fixen met een filter o.i.d.

Mocht je het op deze manier doen, dan is het misschien wel verstandig om het een en ander toch af te laten handelen door javascript. De kleuren en opacity zou je bijvoorbeeld automatisch kunnen laten genereren als er meerdere afspraken binen een kolom staan o.i.d.

[klaaz]

Nieuwsgierig mannetje ben jij...

Hier ga ik even mee spelen, ziet er goed maar vooral begrijpelijk uit! Thanks!

[klaaz]

OK, ik loop tegen het volgende nadeel aan, de DIV's zijn in de cellen gepositioneerd. Het zou flexibeler zijn als deze een absolute positionering zouden krijgen. M.a.w. eerst de tabel opbouwen, en daarna de de div's er overheen leggen. Dit bevorder natuurlijk ook de snelheid van opnieuw opbouwen (Ajax), omdat de tabel niet opnieuw hoeft worden opgebouwd.

Ik zal eens kijken wat ik hier mee kan, dat wordt wel even stoeien denk ik...

[Zoefff]

Maar ik heb ze natuurlijk bewust de divs binnen de cellen (absoluut) gepositioneerd i.p.v. binnen de tabel. Voordeel is dat als je de pagina bekijkt zonder css dat het dan nog (redelijk) duidelijk is welke afspraken op welke tijd staan. En wanneer je de tabel of tabelcellen iets groter / kleiner maakt blijven de afspraken gewoon op de juiste plaats staan, terwijl je dit allemaal zal moeten veranderen als je ze absoluut positioneert binnen de tabel en niet in een cel

[klaaz]

Ik ben al druk aan het pielen

Voordeel tov mijn eerste aanpak met alleen tabellen is dat het een stuk korter wordt qua code, en natuurlijk het overzicht er gewoon gelikter uitziet. Ik ga hem even (half) implementeren en dan eens kijken hoe het werkt, en wat eventueel de consequenties zijn als ik ze er achteraf overheen leg. Dat vereist natuurlijk heel wat rekenwerk om de posities te kunnen bepalen. Voordeel is wel dat ik in een later stadium met javascript allerlei leuke functies in kan bouwen, en dat de scherm opbouw natuurlijk veel sneller verloopt als ik gebruik maak van Ajax.

In ieder geval bedankt voor je hulp, het bleek dat mijn kennis van CSS nog wel wat extra steun kon gebrui ken

[-FoX-]

Ik ben momenteel ook een gelijkaardig systeem aan het ontwerpen, maar ben er ook nog niet helemaal uit. In tegenstelling tot de TS is het bij mij de bedoeling om overlappende boekingen naast elkaar weer te geven ipv over elkaar. Dat maakt het weer net iets makkelijker, lijkt me, maar behoudt ook het overzicht.

Nu heb ik ook Zoefff's voorbeeldje eens bekeken, en dat komt al aardig in de buurt van wat ik wil bereiken. Maar het design uit de TS vond ik wel mooi passen. Is dit ook te bereiken met de DD/DL/DT aanpak? Hoe?

Alles is dan wel erg gebasseerd op coordinaten (in pixels), kan dit geen probleem opleveren als het erg uitgebreid wordt?

[Verwijderd]

Zoefff schreef op zaterdag 15 juli 2006 @ 13:08:
Ik heb een tijd geleden een opzetje voor iemand (ook een topic op GoT) gemaakt met defenitionlists en absoluut gepositioneerde afspraken, zie http://crew.tweakers.net/Zoefff/web/agenda.htm. Iedere afspraak is dus een onderdeel van de dt met de begintijd. De 'duur' van de afspraak (hoogte van de dd) geef je per afspraak aan in de CSS

Met een beetje javascript kan je dan misschien nog wel wat leuke dingen realiseren zoals afspraken die onmouseover naar de voorgrond komen, etc.

De tabel helemaal nabouwen met divs zou ik in ieder geval níet doen. Je zit dan jezelf in de maling te nemen, want dan kan je net zo goed een tabel gebruiken. In principe zou dat in dit geval ook prima kunnen natuurlijk, het is min of meer tabulaire data

edit:

Dat was dit topic

En dat werkte perfect!