1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < title > Welcome to the Dolittle Tacos kitchen management system.</ title >
5+ < style >
6+ p # error {
7+ color : red;
8+ display : none;
9+ }
10+ thead {
11+ font-weight : bold;
12+ }
13+ tbody tr td : nth-child (2 ) {
14+ text-align : right;
15+ }
16+ </ style >
17+ < script >
18+ function stringIsEmpty ( value ) {
19+ return value === undefined || value === null || value . trim ( ) . length === 0 ;
20+ }
21+
22+ function updateCounterTable ( ) {
23+ const table = document . querySelector ( 'tbody#counters' ) ;
24+ fetch ( '/counters' )
25+ . then ( response => response . json ( ) )
26+ . then ( counters => {
27+ console . log ( 'Fetched projection result' , counters ) ;
28+ table . replaceChildren ( ) ;
29+ for ( const { dish, numberOfTimesPrepared } of counters ) {
30+ const row = document . createElement ( 'tr' ) ;
31+ row . appendChild ( document . createElement ( 'td' ) ) . innerText = dish ;
32+ row . appendChild ( document . createElement ( 'td' ) ) . innerText = numberOfTimesPrepared ;
33+ table . appendChild ( row ) ;
34+ }
35+ } ) ;
36+ }
37+
38+ function prepareDishFromFrom ( event ) {
39+ event . preventDefault ( ) ;
40+
41+ const form = event . target ;
42+ const warning = form . querySelector ( 'p#error' ) ;
43+
44+ const chef = form . querySelector ( 'input#chef' ) . value ;
45+ const dish = form . querySelector ( 'input#dish' ) . value ;
46+
47+ if ( stringIsEmpty ( chef ) || stringIsEmpty ( dish ) ) {
48+ warning . style . display = 'initial' ;
49+ return ;
50+ }
51+
52+ warning . style . display = 'none' ;
53+
54+ const body = JSON . stringify ( { chef, dish } ) ;
55+ fetch ( '/prepare' , { method : 'POST' , headers : { 'Content-Type' : 'application/json' } , body } )
56+ . then ( response => response . json ( ) )
57+ . then ( result => {
58+ console . log ( 'Commit event result' , result ) ;
59+ setTimeout ( updateCounterTable , 250 ) ;
60+ } )
61+ . catch ( error => console . error ( error ) ) ;
62+ }
63+ </ script >
64+ </ head >
65+ < body onload ="updateCounterTable() ">
66+ < h1 > Welcome to the Dolittle Tacos kitchen management system.</ h1 >
67+
68+ < h2 > Register a prepared dish:</ h2 >
69+ < form onsubmit ="prepareDishFromFrom(event) ">
70+ < p >
71+ < input type ="text " id ="chef " name ="chef " placeholder ="Chef ">
72+ < input type ="text " id ="dish " name ="dish " placeholder ="Dish ">
73+ < input type ="submit " value ="Prepare ">
74+ </ p >
75+ < p id ="error "> Both 'Chef' and 'Dish' must be specified</ p >
76+ </ form >
77+
78+ < h2 > Previously prepared dishes:</ h2 >
79+ < table >
80+ < thead >
81+ < td > Dish:</ td >
82+ < td > Number of times prepared:</ td >
83+ </ thead >
84+ < tbody id ="counters ">
85+ </ tbody >
86+ </ table >
87+ </ body >
88+ </ html >
0 commit comments