@@ -50,14 +50,20 @@ export default function NewIntervalTicketModal(props: NewTicketModalProps) {
5050 const makerspace_equipments = makerspace_equipments_2 ?. flat ( 1 ) ;
5151
5252 const [ startDate , setStartDate ] = useState ( new Date ( ) ) ;
53- const [ scale , setScale ] = useState ( "days" ) ;
53+ const [ timeUnit , setTimeUnit ] = useState ( "USAGE" ) ; // USAGE | CALENDAR
54+ const [ scale , setScale ] = useState ( "days" ) ; // hours | days | weeks
5455 const [ interval , setInterval ] = useState ( "1" ) ;
5556
5657 function handleChangeScale ( _event : React . MouseEvent < HTMLElement > , value : string ) {
5758 if ( value !== null && value !== scale ) {
5859 setScale ( value ) ;
5960 }
6061 }
62+ function handleChangeTimeUnit ( _event : React . MouseEvent < HTMLElement > , value : string ) {
63+ if ( value !== null && value !== timeUnit ) {
64+ setTimeUnit ( value ) ;
65+ }
66+ }
6167
6268 function handleClose ( ) {
6369 setEquipment ( undefined ) ;
@@ -67,6 +73,7 @@ export default function NewIntervalTicketModal(props: NewTicketModalProps) {
6773 setImageUrl ( undefined ) ;
6874 setStartDate ( new Date ( ) ) ;
6975 setScale ( "days" ) ;
76+ setTimeUnit ( "calendar" )
7077 setInterval ( "1" ) ;
7178
7279 props . onClose ( ) ;
@@ -78,14 +85,18 @@ export default function NewIntervalTicketModal(props: NewTicketModalProps) {
7885 return ;
7986 }
8087 try {
88+ const intervalHours = scale === "days" ? Number ( interval ) * 24 : ( scale == "weeks" ? Number ( interval ) * 168 : interval )
8189 await createTicket ( {
8290 variables : {
8391 severity : severity ,
8492 instanceID : Number ( reportedInstance . id ) ,
8593 description : description ,
8694 startDate : startDate . toISOString ( ) ,
8795 imageUrl : imageUrl ,
88- intervalHours : scale === "days" ? Number ( interval ) * 24 : Number ( interval ) * 168
96+ intervalHours : intervalHours ,
97+ timeUnit : timeUnit ,
98+ hobbsTimeAtCreate : instance ?. hobbsTime
99+
89100 }
90101 } )
91102 } catch ( e ) {
@@ -127,6 +138,7 @@ export default function NewIntervalTicketModal(props: NewTicketModalProps) {
127138 {
128139 equipment
129140 ? < Autocomplete
141+ fullWidth
130142 key = { instances . length === 1 ? "auto-selected" : "manual-select" }
131143 renderInput = {
132144 ( params ) => (
@@ -159,21 +171,40 @@ export default function NewIntervalTicketModal(props: NewTicketModalProps) {
159171 disabled
160172 />
161173 }
162- < Autocomplete
163- renderInput = {
164- ( params ) => (
165- < TextField
166- { ...params }
167- label = "Severity"
168- placeholder = "Select Severity..."
169- required
170- />
171- )
172- }
173- options = { [ MaintenanceTicketSeverity . HIGH , MaintenanceTicketSeverity . MEDIUM , MaintenanceTicketSeverity . LOW ] }
174- value = { severity }
175- onChange = { ( event , newValue ) => setSeverity ( newValue ?? undefined ) }
176- />
174+ < Stack direction = { "row" } spacing = { 1 } >
175+ < Autocomplete
176+ renderInput = {
177+ ( params ) => (
178+ < TextField
179+ { ...params }
180+ label = "Severity"
181+ placeholder = "Select Severity..."
182+ required
183+ />
184+ )
185+ }
186+ options = { [ MaintenanceTicketSeverity . HIGH , MaintenanceTicketSeverity . MEDIUM , MaintenanceTicketSeverity . LOW ] }
187+ value = { severity }
188+ onChange = { ( event , newValue ) => setSeverity ( newValue ?? undefined ) }
189+ sx = { { flexGrow : 1 } }
190+ />
191+
192+ < ToggleButtonGroup
193+ exclusive
194+ value = { timeUnit }
195+ onChange = { handleChangeTimeUnit }
196+ >
197+ < ToggleButton value = "USAGE" >
198+ Usage
199+ </ ToggleButton >
200+ < ToggleButton value = "CALENDAR" >
201+ Calendar
202+ </ ToggleButton >
203+ </ ToggleButtonGroup >
204+
205+
206+ </ Stack >
207+
177208 < Stack direction = { "row" } justifyContent = { "space-between" } >
178209 < DatePicker
179210 value = { startDate }
@@ -196,11 +227,15 @@ export default function NewIntervalTicketModal(props: NewTicketModalProps) {
196227 width : "120px"
197228 } }
198229 />
230+
199231 < ToggleButtonGroup
200232 exclusive
201233 value = { scale }
202234 onChange = { handleChangeScale }
203235 >
236+ < ToggleButton value = "hours" >
237+ Hours
238+ </ ToggleButton >
204239 < ToggleButton value = "days" >
205240 Days
206241 </ ToggleButton >
0 commit comments