Archief - /.NET /how to add a horizontal rule to indicate time frame (working hours)

All,

I have table which is build in .net, dynamically (server side), which shows me an overview of all people that need to work on a specific day for a specific area.

A list is fine, but I would like to visualize this for users. I have multiple working area's and up to 20 people working per working area per day, so putting it all into an outlook style calender overview is useless as it will become to complicated.

I now had the idea to add a HR per entry (tr) which would correspond to the hours they need to work. (some like a range bar)

you can download the image from my dropbox: https://www.dropbox.com/s/ou3noseaf16xdbl/rangebar hr.png

Attached the screenshot where i added the green lines in paint, to show what i'm trying to achieve. (The table is in Dutch but you can easily see what the working hours are)

I've been googling trying to find a control for a single range bar, but i haven't realy found anything. Based on my google results, i'm now looking at creating a HR (maybe within a div) and come up with some formula to put it in the correct spot (horizontally)

Does anybode know if such a control (preferrably in .net) exists or how to do this with an HR I'm already aware of the CSS options of an HR

Waarom doe je dit niet met css en een <span>? Wat ik zou doen is tijd omzetten naar een percentage (12 uur is bv 100%) en de width van je balk laten afhangen van het aantal gewerkte uren en de margin-left van je balk het start uur.

<div class='tijdsbalk'><span class='urengewerkt' style='width:20%; margin-left:20%;'></span>
</div>
<style>.urengewerkt {background-color:green;height:2px;display:inline-block;position:relative</style>

Anyway, ik schrijf nu maar wat uit de losse pols, maar als je het zo aanpakt zie ik de moeilijkheid er niet echt in. In C# genereer je zoiets door te werken met LiteralControls.

Dus...

int startuurInPercent = ((startuur - 7) / 12) * 100;
int aantaluurInPercent = aantaluur / 12 * 100;

this.Page.Controls.add(new LiteralControl(String.Format("<div class='tijdsbalk'><span class='urengewerkt' style='width:{0}%; margin-left:{1}%;'></span></div>", aantaluurInPercent, startuurInPercent));

Nogmaals, losse pols, je moet zelf even kijken.

TheBud,

Bedankt voor je reactie, klinkt inderdaad een prima oplossing en zelfs iets simpeler dan wat ik in gedachte had.
Ik moet alleen de formule nog wat uitwerken sinds het eerste start en laatste einduur kan variëren, maar daar kom ik wel uit.
(Of ik dan een literal of label zou gebruiken dat ga ik nog even in het midden laten, tenzij je me kan vertellen waarom een literal beter is)

Het zal in ieder geval wel performanter zijn dan een echte control gebruiken.

Laatste vraag hierover: idealiter zou ik een indicatie willen geven om de uren te markeren (een verticaal streepje of het uurtal of zoiets)
Enig idee hoe ik dat hierin kan verwerken?


Thx!

nickyboy zei:

TheBud,

Bedankt voor je reactie, klinkt inderdaad een prima oplossing en zelfs iets simpeler dan wat ik in gedachte had.
Ik moet alleen de formule nog wat uitwerken sinds het eerste start en laatste einduur kan variëren, maar daar kom ik wel uit.
(Of ik dan een literal of label zou gebruiken dat ga ik nog even in het midden laten, tenzij je me kan vertellen waarom een literal beter is)

Het zal in ieder geval wel performanter zijn dan een echte control gebruiken.

Laatste vraag hierover: idealiter zou ik een indicatie willen geven om de uren te markeren (een verticaal streepje of het uurtal of zoiets)
Enig idee hoe ik dat hierin kan verwerken?


Thx!

Klik om te vergroten...

Op zich is een literal performanter maar veel maakt het niet uit. Je kan het inderdaad ook prima met webcontrols doen.

Over je tijdsnotaties, HTML en CSS weer werken met spans en percentages:

<div class='tijdsbalk'>
<span class='urengewerkt' style='width:20%; margin-left:20%;'></span>
<span class='tijdsnotatie' margin-left:20%;'>10<span>
<span class='tijdsnotatie' margin-left:40%;'>12<span>
<span class='tijdsnotatie' margin-left:60%;'>14<span>
<span class='tijdsnotatie' margin-left:80%;'>16<span>
</div>
<style>
.tijdsbalk { position:relative; }
.urengewerkt {background-color:green;height:2px;display:inline-block;position:relative }
.tijdsnotatie {background-url:'VerticalBeam.jpg';height:20px;width:10px;position:absolute;top:-5px; }
</style>

Weerom, uit de losse pols, niet gecontroleerd of dit daadwerkelijk werkt. Ik weet niet goed hoe een % reageert met position absolute. Moet je waarschijnlijk even mee spelen.

Hierover, Literal vs Webcontrol zou ik wel even nadenken, dit hangt voornamelijk af van hoe dynamisch dit moet. Als je verschillende schalen hebt (Eentje van 4 uur, 8 uur, etc) dan zou ik je div aanpassen naar een panel en je tijdsnotaties genereren met een for loop.

Thx TheBud!

ik had ongeveer hetzelfde in gedachten maar ipv met een absolute span (hier tijdsnotatie) over de relative div (hier urengewerkt) dacht ik om verschillende span's achter elkaar te zetten (relative) als dat geen spaties geeft.

Daarnaast moet ik inderdaad een loop maken daar de uren vrij dynamisch gaan zijn.