calcolo ore via js

[Verox7914]

Salve Ragazzi.
devo realizzare un sistema di gestione ore del personale, conosco un filo di php e di html ma aime' nulla di js, e dal gruppo php sono inviato di qui.... in quanto pare che quello che vorrei realizzare sia "client side" e quindi non fattibile con php.
quindi venendo al problema e la mia richiesta di help:
ho una pagina in cui inserisco tramite una form i valori di data, ingresso, uscita, pausa , permesso, tipologia permesso ed eventuale descizione.
e fin qui tutto ok, c'è e funziona (una banale form insomma)
Ora per me comincia il difficile/impossibile...
le ore dovrei farle inserire nel formato H:mm o HH:mm, (9:00 o 13:00 o 19:30)
ora dovrei fare un "calcolo online" delle ore della giornata eseguite dall'utente "picopallino", (uscita-ingresso-pausa) e permettergli di suddividerle per n lavori svolti che verranno selezionati tramite due select ,una in cui seleziono il n.di ore (max disponibili) e una dei lavori generata da una query verso una tabella mysql.

quindi una roba tipo :
ore totali risultanti = 8:30

4:00 ore lavoro1
3:00 ore lavoro2
1:30ore lavoro3
0:00 lavoro4
0:00 lavoro5

mi piacerebbe "se possibile", che fosse tutto nella stessa form/pagina...ma come posso farlo?
fondamentalmente quindi riepilogando in js dovrei:
1_ calcolare online la differenza di uscita-pausa-ingresso
2_ generare i valori della select a intervalli con 30 minuti di sensibilita fino al num max di ore effettuate il giorno x

il punto 2 è fatto fondamentalmente per evitare una "verifica dei dati" in quanto sono già calcolati preventivamente e comunque la farei poi serverside

inserisco il codice della form...

<div id="primaryContentContainer">
			<div id="primaryContent">
				<h2>Inserimento Ore giorno</h2>
                <form action="ore_day2.php" method="post" enctype="multipart/form-data" name="ore_day">
                <div align="center">
                <table width="311" border="0" padding="1">
                  <tr>
                    <td width="114"><div align="right">Giorno:</div></td>
                  <td colspan="2"><script>DateInput('orderdate', true, 'DD-MON-YYYY')</script></tr>
                  <tr>
                    <td><div align="right">Ingresso:</div></td>
                    <td width="75"><input name="ingresso" type="text" id="ingresso" size="5" maxlength="5" /></td>
                    <td width="108">(h:m)</td>
                  </tr>
                  <tr>
                    <td><div align="right">Uscita:</div></td>
                    <td><input name="uscita" type="text" id="uscita" size="5" maxlength="5" /></td>
                    <td>(h:m)</td>
                  </tr>
                  <tr>
                    <td><div align="right">Pausa:</div></td>
                    <td><input name="pausa" type="text" id="pausa" size="5" maxlength="5" /></td>
                    <td>(h:m)</td>
                  </tr>
                  <tr>
                    <td valign="top"><div align="right">Permesso:</div></td>
                    <td><input name="permesso_ore" type="text" id="permesso_ore" value="0" size="5" maxlength="5" default /></td>
                    <td>(h:m)</td>
                  </tr>
                  <tr>
                    <td valign="top">
                      <div align="right">Tipo Permesso:</div></td>
                    <td>


                      <label>
                        <input name="TipoPermessi" type="radio" id="TipoPermessi_0" value="Nessuno" checked="checked" />
                        Nessuno</label>
                      

                      <label>
                        <input type="radio" name="TipoPermessi" value="Rol" id="TipoPermessi_1" />
                        Rol</label>
                      

                      <label>
                        <input type="radio" name="TipoPermessi" value="Ferie" id="TipoPermessi_2" />
                        Ferie</label>
                      

                      <label>
                        <input type="radio" name="TipoPermessi" value="Malattia" id="TipoPermessi_3" />
                        Malattia</label>
                      

                    </p></td>
                    <td></td>
                  <tr>
                  </tr>
                  	<td></td>
                    <td colspan="2"><div align="right">
                        <input type="reset" name="reset" value="Reset Form" />
                        <input type="submit" name="submit" value="Avanti" />
                      </div></td>
                      </tr>
                </table>
                </div>
                </form>
        	    </div>
		</div>

vi prego, datemi qualche imput...

[Verox7914]

mm nessuno riesce a darmi almeno un indicazione??? io ci sto provando a scrivere qualcosa ma ... jscript è mio nemico..stasera...

[andr3a]

non è tanto chiaro quello che vuoi ottenere ... ricapitolando ...

hai un db che memorizza questi dati ... i dati vanno gestiti interamente lato server ... javascript cosa deve fare di preciso?

a - fare il submit dei dati senza ricaricare la pagina?
b - mostrare qualcosa senza passare per il db?
c - fare il submit e mostrare qualcosa?

a grandi linee direi che ti serve conoscere Ajax e prima ancora JavaScript ... ma direi che in questo caso l'uso di JS potrebbe essere superfluo o un di più non indispensabile.

[Verox7914]

mm..si scusa, forse non mi sono spiegato molto bene.. ci riprovo...

devo aggiungere o meglio continuare la form descritta sopra con dei campi che si calcolano "online", all'inserimento di quelli che ho postato.
ovvero devo agiungere un campo tipo text che mi mostrerà il risultato di uscita-pausa-ingresso (nel formato hh:mm) e sotto 5 select in cascata (con liste calcolate) che mi diano la disponibilità di ore da smistare sui relativi lavori che faccio selezionare da un db.
(la select con i lavori da db la so fare con php)
cioe per esempio:

ore calcolate = 8:15

valori disp a select_ore1 = 8,7,6,5,4,3,2,1
valori disp a select_ore2 = ore calcolate - select_ore1
e cosi via.

(mi piacerebbe, se possibile che ci fosse una sensibilità di 30 min sui valori disponibili.... qui li ho messi a ore..per comodità e comprensibilità)
da php mi hanno detto che con jscript è possibile...ma non lo conosco..ho usato solo qualche script free qualche volta..

tutta la form poi dovro inviarla e farò delle verifiche lato server per la convalida dei dati..e la scrittura verso la tabella relativa alla memorizz dei dati..

spero ora di essere stato + chiaro...
vi prego help me...

[Verox7914]

nessuno riesce a darmi qualche input almeno?
almeno per il calcolo....

[andr3a]

in JavaScript il costruttore Date è abbastanza semplice da utilizzare ed il calcolo di differenza date altrettanto, essendo intrinseco nell'operatore meno "-" ... esempio:

var	today = new Date,
	past = new Date;

past.setFullYear(today.getFullYear() - 1);

alert((today - past) / 24 / 60 / 60 / 1000);

quell'alert mostrerà i giorni di differenza ... 365

Quando sottrai data2 a data1 il risultato è in millisecondi, come usare il getTime di entrambi e fare la differenza.

/ 24 sono le ore al giorno
/ 60 i minuti per ogni ora
/ 60 i secondi per ogni ora
/ 1000 i millisecondi per avere un risultato in giorni

Nel tuo caso dovresti aggiungere una callback al metodo onkeyup dei campi dove viene inserito l'orario ... questo metodo dovrà verificare che il dato sia utilizzabile

if(/^\d{1,2}:\d{2}$/.test(dato)){
var time = dato.split(":");
time[0]; // saranno le ore
time[1]; // saranno i minuti
}

con un controllo analogo a tempo2 puoi settare due oggetti Date tramite setHour e setMinutes, dove per avere maggiore precisione potrai settare anche setSeconds a zero per entrambi.
A quel punto puoi fare la sottrazione avendo un risultato in millisecondi ... moltiplicare questi per 1000 * 60 * 60 * 24 e creare un nuovo oggetto Date con il valore (eventualmente aggiungi anche l'anno attuale) e sfruttare lo stesso per avere la differenza in ore e minuti tramite getHours e getMinutes.

Certo è che se non conosci niente di JavaScript o trovi qualche anima generosa che fa tutto quello che ti serve oppure la vedo difficile ... nonostante l'input.

Ricapitolando:
devi conoscere la gestione degli eventi in markup come onkeyup e devi conoscere il costruttore Date. Devi conoscere le RegExp per avere più controllo sui dati e devi conoscere l'abc del JavaScript per gestire e/o mostrare le informazioni.
JavaScript è un bel linguaggio ... non è un giocattolo, se non lo si conosce il consiglio che mi sento di dare è di non usarlo affatto soprattutto dove non è indispensabile come in questo caso dove i calcoli puoi farli lato server, ambiente che presumo tu conosca meglio.