1. #1

    Registered
    04/11/03
    Location
    Balen
    Posts
    43
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0

    /.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/ou3noseaf1...gebar%20hr.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
    'everything has an ending, but a sausage, has two!'
    no votes  

  2. #2

    Registered
    28/08/02
    Location
    Leuven
    Posts
    3,026
    iTrader
    46 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/45
    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.
    Last edited by TheBud; 11-04-2014 at 02:13.
    no votes  

  3. #3

    Registered
    04/11/03
    Location
    Balen
    Posts
    43
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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!
    Last edited by nickyboy; 11-04-2014 at 09:36.
    'everything has an ending, but a sausage, has two!'
    no votes  

  4. #4

    Registered
    28/08/02
    Location
    Leuven
    Posts
    3,026
    iTrader
    46 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/45
    Quote Originally Posted by nickyboy View Post
    This quote is hidden because you are ignoring this member. Show
    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!
    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;posi tion: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.
    no votes  

  5. #5

    Registered
    04/11/03
    Location
    Balen
    Posts
    43
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/0
    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.
    'everything has an ending, but a sausage, has two!'
    no votes  

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in