5555
5656< main class ="container ">
5757
58- < div class ="col-lg-8 mx-auto p-3 py-md-5 ">
58+ < div class ="col-lg-12 mx-auto p-3 py-md-5 ">
5959
6060 < div class ="text-center ">
6161 < a class ="text-decoration-none mb-3 " href ="/ "> < h1 > Mob Timer</ h1 > </ a >
7171 < span id ="timer-next-user " class ="text-muted " title ="next person "> </ span >
7272 </ div >
7373
74+ < div id ="goal "> </ div >
75+
7476 < div >
7577 < div class ="mt-3 " style ="justify-content: center ">
7678 < div class ="btn-group ">
108110 </ ul >
109111 </ div >
110112
113+ <!--<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#goalModal">🎯</button>-->
114+ < div class ="btn-group ">
115+ < button class ="btn btn-outline-secondary dropdown-toggle " type ="button " data-bs-toggle ="dropdown " aria-expanded ="false "> 🎯</ button >
116+ < ul class ="dropdown-menu ">
117+ < li > < a class ="dropdown-item " data-bs-toggle ="modal " data-bs-target ="#goalModal "> Set new goal</ a > </ li >
118+ < li > < a class ="dropdown-item " onclick ="deleteGoal() "> Delete current goal</ a > </ li >
119+ </ ul >
120+ </ div >
121+
111122 < button type ="button " class ="btn btn-outline-secondary " data-bs-toggle ="modal " data-bs-target ="#configurationModal "> ⚙️</ button >
112123 </ div >
113124 </ div >
114125
126+ <!-- Goal Modal -->
127+ < div class ="modal fade " id ="goalModal " tabindex ="-1 " role ="dialog " aria-labelledby ="goalModalLabel " aria-hidden ="true ">
128+ < div class ="modal-dialog " role ="document ">
129+ < div class ="modal-content ">
130+ < div class ="modal-header ">
131+ < h5 class ="modal-title " id ="goalModalLabel "> Set a goal for your mob session</ h5 >
132+ < button type ="button " class ="btn-close " data-bs-dismiss ="modal " aria-label ="Close " id ="goalModalClose "> </ button >
133+ </ div >
134+ < div class ="modal-body ">
135+ < div class ="input-group mb-3 ">
136+ < span class ="input-group-text "> Set your goal</ span >
137+ < input type ="text " class ="form-control " placeholder ="goal " id ="goal-input ">
138+ </ div >
139+ </ div >
140+ < div class ="modal-footer ">
141+ < button type ="button " class ="btn btn-secondary " data-bs-dismiss ="modal "> Close</ button >
142+ < button type ="button " class ="btn btn-primary " onclick ="saveGoal() "> Save goal</ button >
143+ </ div >
144+ </ div >
145+ </ div >
146+ </ div >
115147
116148
117- <!-- Modal -->
149+ <!-- Setting Modal -->
118150 < div class ="modal fade " id ="configurationModal " tabindex ="-1 " role ="dialog " aria-labelledby ="configurationModalLabel " aria-hidden ="true ">
119151 < div class ="modal-dialog " role ="document ">
120152 < div class ="modal-content ">
@@ -234,6 +266,11 @@ <h5>Integration with the mob tool</h5>
234266 : date . toLocaleString ( ) ;
235267 }
236268
269+ let goalDiv = document . getElementById ( 'goal' ) ;
270+ function updateGoal ( data ) {
271+ goalDiv . innerText = data !== null ? `🎯 ${ data } ` : '' ;
272+ }
273+
237274 let timerDiv = document . getElementById ( 'timer' ) ;
238275 function updateRemainingTime ( data ) {
239276 document . title = `${ data } #${ room } ` ;
@@ -320,6 +357,7 @@ <h5>Integration with the mob tool</h5>
320357 let requestUser = null ;
321358 let requestNextUser = null ;
322359 let requestTimer = null ;
360+ let goal = null ;
323361
324362
325363 function renderTimer ( ) {
@@ -495,6 +533,25 @@ <h5>Integration with the mob tool</h5>
495533 prependToHistory ( timerRequest ) ;
496534 } ) ;
497535
536+ eventSource . addEventListener ( 'GOAL_REQUEST' , ( event ) => {
537+ console . log ( 'handling event GOAL_REQUEST ' + event . data ) ;
538+ let goalRequest = JSON . parse ( event . data ) ;
539+ let requested = goalRequest [ "requested" ] ;
540+ let newGoal = goalRequest [ "goal" ] ;
541+ let user = goalRequest [ "user" ] ;
542+
543+ if ( newGoal === null && user === null ) {
544+ console . log ( 'Resetting state' ) ;
545+
546+ goal = null ;
547+ updateGoal ( null ) ;
548+ return ;
549+ }
550+
551+ updateGoal ( newGoal )
552+ goal = newGoal ;
553+ } ) ;
554+
498555 checkAudioPlayback ( ) ;
499556
500557 function sendTimer ( type , timer , user ) {
@@ -509,7 +566,49 @@ <h5>Integration with the mob tool</h5>
509566 xhr . send ( json ) ;
510567 }
511568
569+ function saveGoal ( ) {
570+ goalInput = document . getElementById ( 'goal-input' ) ;
571+ goalModalClose = document . getElementById ( 'goalModalClose' ) ;
572+ if ( goalInput . value !== "" ) {
573+ sendGoal ( goalInput . value )
574+ goalInput . value = ""
575+ goalModalClose . click ( ) ;
576+ } else {
577+ console . log ( "Did not save goal as goal was empty." )
578+ }
579+ }
580+
581+ function sendGoal ( goal ) {
582+ let method = "PUT" ;
583+ let url = "/" + room + "/goal" ;
584+ const user = localStorage . getItem ( 'user' ) ;
585+ let json = `{"goal": "${ goal } ","user": "${ user } "}` ;
512586
587+ console . log ( `${ method } ${ url } ${ json } ` )
588+ var xhr = new XMLHttpRequest ( ) ;
589+ xhr . open ( method , url ) ;
590+ xhr . setRequestHeader ( "Content-Type" , "application/json" ) ;
591+ xhr . send ( json ) ;
592+ }
593+
594+ function deleteGoal ( ) {
595+ goalModalClose = document . getElementById ( 'goalModalClose' ) ;
596+ sendDeleteGoal ( ) ;
597+ goalModalClose . click ( ) ;
598+ }
599+
600+ function sendDeleteGoal ( ) {
601+ let method = "DELETE" ;
602+ let url = "/" + room + "/goal" ;
603+ let user = localStorage . getItem ( 'user' ) ;
604+ let json = `{"user": "${ user } "}` ;
605+
606+ console . log ( `${ method } ${ url } ${ json } ` )
607+ var xhr = new XMLHttpRequest ( ) ;
608+ xhr . open ( method , url ) ;
609+ xhr . setRequestHeader ( "Content-Type" , "application/json" ) ;
610+ xhr . send ( json ) ;
611+ }
513612
514613 function syncAndSetInitialValue ( inputElementId , storageId , defaultValue , onChange ) {
515614 const callOnChange = ( ) => {
0 commit comments