Aplicació de facturació trimestral

De wikijoan
Salta a la navegació Salta a la cerca

Enunciat del problema

Formulari aplicacio facturacio.jpg

Tenim una empresa amb 4 delegacions, i volem portar el control de la facturació trimestral de cadascuna de les delegacions.

Fer una petita aplicació web amb les següents especificacions. La interfície web consta d'una taula a dalt, i un petit formulari a baix, tal com es veu a la imatge. La taula consta de tres camps i 4 files amb les següents dades:

  • capçalera: sucursal, nom, telefon, mail
  • dades:
    • Barcelona;Arnau Guinovart;93.345.54.45;aguinovart@gmail.com
    • Tarragona;Maria Peris;977.34.34.22;mperis@gmail.com
    • Lleida;Josep Anglerill;973.33.44.55;janglerill@gmail.com
    • Girona;Montserrat Sirera;972.44.55.66;msirera@gmail.com

El camp sucursal és un link. Quan cliquem sobre la sucursal s'executarà la funció de Javascript: escriure_formulari().

El formulari consta dels següents camps:

  • Sucursal. Camp de text que no es pot escriure (atribut readonly).
  • Nom. Camp de text que no es pot escriure (atribut readonly).
  • Any. Llista desplegable amb els quatre últims anys: 2021, 2020, 2019, 2018.
  • Trimestre. Llista desplegable amb els següents valors: 1T, 2T, 3T, 4T (que es correspon amb els 4 trimestres).
  • Facturació. Caixa de text. Regla de validació: número que admet dues posicions decimals.

Es tracta d'omplir semi-automàticament els camps del formulari clicant el link que hi ha a la taula. Quan cliquem sobre la sucursal en la taula se'ns omplirà automàticament els camps sucursal i nom del formulari. Aleshores seleccionarem un any i trimestre, posarem un valor decimal de facturació, i només quan totes les dades estiguin plenes (regla de validació global per a tot el formulari), enviaríem les dades al servidor.

Es fa una demostració a classe d'una possible solució.

Tasques

La teva solució ha d'incloure entre d'altres les següents millores:

  • fitxer d'estils CSS extern. Treballar la capa de disseny i maquetació. Concretament, la gestió de la validació dels camps del formulari.
  • fitxer de funcions javascript extern.
  • els events ambaddEventListener.
  • Crear les opcions dels anys i les opcions dels trimestres programàticament (createElement).
  • Posar automàticament l'any actual (segons la data del sistema), i els 3 anys anteriors, de forma programàtica.
  • Posar automàticament el trimestre anterior (segons la data del sistema). És a dir, si estem a desembre de 2021 (estem en el 4T), hem de posar l'any 2021 i el 3T (trimestre anterior). Si fóssim el gener de 2022 posaríem 2021 i 4T.

Opcional

Enviar les dades de facturació a la taula de la base de dades FACTURACIO, en un servidor web amb servidor mysql.

Solucion parcials

Per tal d'assignar de forma dinàmica els events a tots els links podem fer:

...
	var anchors = document.getElementsByTagName("a");

	for (var i=0; i<anchors.length; i++) { //recorrem tots els links
		//posem els events associats als links
		anchors[i].addEventListener("click", function () {escriure_formulari(this);});
	}
...
<body onload="carregar_events()">
...

i també ho podem fer d'una manera més genèrica, cercant els enllaços que hi ha dins de les cel.les:

...
	var taula = document.getElementById("taula_sucursals");
	var files = taula.rows;
	for (i=1;i<files.length; i++) {
		files[i].children[0].children[0].addEventListener("click", function(){escriure_formulari(this)});
	}
}
...

En aquest cas hem de pensar el nostre document com si fos XML (veure childNodes). És la manera més general de recórrer l'estructura d'una document web.

Per crear les opcions de la llista desplegable programàticament:

...
	//creem les opcions de la select
	var sel_year = document.getElementById("year");

	//Create and append the options
	for (var i = 0; i < 4; i++) {
	    var option = document.createElement("option");
	    option.value = year-i;
	    option.text = year-i;
	    console.log(year-i)
	    if (trimestre==4 && i==1) {
		    option.selected = "selected"
		} else if (i==year) {
		    option.selected = "selected"
		}
	    sel_year.appendChild(option);
	}
...

Entrega

Li ensenyaràs al professor la teva solució (nota de classe).

Entregaràs en el Classroom la teva solució, amb les captures de pantalla que siguin l'evidència de què has fet tu el codi, que has implementat les tasques que se't demanen, i que s'executa en la teva màquina.


creat per Joan Quintana Compte, desembre 2021