Skip to content

Commit

Permalink
Converted to viewmodel
Browse files Browse the repository at this point in the history
  • Loading branch information
@shantanugupta
shantanugupta committed Sep 26, 2023
1 parent 7c72f47 commit ea10ce1
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 81 deletions.
4 changes: 2 additions & 2 deletions src/components/Scheduler/DailySchedule/DailySchedule.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ const DailyScheduleComponent = (props) => {
<div className="col-lg-12">
<div className="form-group">
<div>
<label className="control-label font-weight-bold" htmlFor="recurrEvery">RECURS EVERY {state.freq_interval} DAYS</label>
<input id="recurrEvery" className="form-control text-uppercase"
<label className="control-label font-weight-bold" htmlFor="recurrEveryDay">RECURS EVERY {state.freq_interval} DAYS</label>
<input id="recurrEveryDay" className="form-control text-uppercase"
placeholder="DAY(S)" type="number" min="1" max="100" property_name="freq_interval"
value={state.freq_interval} onChange={(e) => handleChange(e)} />
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Scheduler/FrequencySchedule/FrequencySchedule.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const FrequencyScheduleComponent = props => {
value={state.freq_subday_interval}
onChange={(e) => handleChange(e)} />
{/* DURATION UNIT DROPDOWN */}
<select id="durationUnit" className="form-control ml-2" data-toggle="popover" data-trigger="hover" property_name="freq_subday_type"
<select className="form-control ml-2" data-toggle="popover" data-trigger="hover" property_name="freq_subday_type"
value={state.freq_subday_type} onChange={(e) => handleChange(e)}>
{
freqSubdayType.map(i => (
Expand Down
6 changes: 3 additions & 3 deletions src/components/Scheduler/MonthlyRelativeSchedule/MonthlyRelativeSchedule.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,12 @@ const MonthlyRelativeScheduleComponent = (props) => {
</option>))
}
</select>
<label className="control-label font-weight-bold mx-1" htmlFor="recurrEvery">OF EVERY</label>
<input id="recurrEvery" property_name="freq_recurrence_factor" className="form-control text-uppercase mx-1"
<label className="control-label font-weight-bold mx-1" htmlFor="recurrEveryMonthRelative">OF EVERY</label>
<input id="recurrEveryMonthRelative" property_name="freq_recurrence_factor" className="form-control text-uppercase mx-1"
value={state.freq_recurrence_factor} placeholder="MONTH" type="number" min="1" max="60"
onChange={(e) => handleChange(e)}
/>
<label className="control-label font-weight-bold" htmlFor="recurrEvery">MONTH(S)</label>
<label className="control-label font-weight-bold" htmlFor="recurrEveryMonthRelative">MONTH(S)</label>
</div>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Scheduler/MonthlySchedule/MonthlySchedule.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ const MonthlyScheduleComponent = props => {
<div className="row">
<div className="col-lg-12">
<div className="form-group form-inline">
<label className="control-label font-weight-bold" htmlFor="recurrEvery">{getGetOrdinal(state.freq_interval)} OF EVERY</label>
<label className="control-label font-weight-bold" htmlFor="recurrEvery">{state.freq_recurrence_factor} MONTH(S)</label>
<input id="recurrEvery" property_name="freq_interval" className="form-control text-uppercase col-lg-1 ml-1"
<label className="control-label font-weight-bold" htmlFor="recurrEveryMonth">{getGetOrdinal(state.freq_interval)} OF EVERY</label>
<label className="control-label font-weight-bold" htmlFor="recurrEveryMonthFactor">{state.freq_recurrence_factor} MONTH(S)</label>
<input id="recurrEveryMonth" property_name="freq_interval" className="form-control text-uppercase col-lg-1 ml-1"
value={state.freq_interval} placeholder="DAY" type="number" min="1" max="31"
onChange={(e) => handleChange(e)} />
<input id="recurrEvery" property_name="freq_recurrence_factor" className="form-control text-uppercase col-lg-2 ml-1"
<input id="recurrEveryMonthFactor" property_name="freq_recurrence_factor" className="form-control text-uppercase col-lg-2 ml-1"
value={state.freq_recurrence_factor} placeholder="MONTH" type="number" min="1" max="60"
onChange={(e) => handleChange(e)} />
</div>
Expand Down
150 changes: 101 additions & 49 deletions src/components/Scheduler/Scheduler.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,8 @@ const SchedulerComponent = () => {
const dateFormatyyyymmdd = "yyyy-MM-DD";
const timeFormathhMM = "HH:mm";

const [state, setState] = useState(blankSchedule);
const [eventState, setEventState] = useState([]);
const [endpoint, setEndpoint] = useState("https://localhost:7049/Scheduler/GenerateEvents");
const [saveEventOutput, setSaveEventOutput] = useState([]);

const [viewModel, setViewModel] = useState(blankViewModel)
const [state, setState] = useState(blankSchedule);

const handleChange = e => {
let name = e.target.attributes["property_name"].value;
Expand All @@ -46,25 +43,34 @@ const SchedulerComponent = () => {
setState(tempState);
}

const handleEndpointChange = e => {
const handleViewModelChange = e => {
let value = e.target.value;
setEndpoint(value);
setViewModel(value);
}

const generateEventsClick = e => {
var startTime = performance.now();

//var startTime = performance.now();
let events = generateEvents(state);
//var endTime = performance.now();
//console.log(`Generate event execution time: ${endTime - startTime} milliseconds. Events count: ${events.length}`);

var endTime = performance.now();
console.log(`Generate event execution time: ${endTime - startTime} milliseconds. Events count: ${events.length}`);

setEventState(events);
viewModel.events = events;
setViewModel(viewModel);
}

const saveEventsClick = async (e) => {
var saveEventOutput = await saveEvents(endpoint, state);
setSaveEventOutput(saveEventOutput);
let endpoint = viewModel.endpoint;
let saveEventOutput = await saveEvents(endpoint, state);

if (saveEventOutput!==undefined && saveEventOutput.entity !== undefined && saveEventOutput.entity.length > 0) {
viewModel.serverEvent = saveEventOutput.entity;
}
else if(saveEventOutput!==undefined && saveEventOutput.error !==undefined){
//handle error
}

viewModel.saveEventOutput
setViewModel(viewModel);
}

const validateScheduleClick = e => {
Expand Down Expand Up @@ -97,6 +103,16 @@ const SchedulerComponent = () => {
}
}

function blankViewModel(){
return {
endpoint:"https://localhost:7049/Scheduler/GenerateEvents",
saveEventOutput:[],
serverEvent:[],
events:[],
timeOut:5
}
}

const getDurationInterval = (key, value, duration_interval) => {
let description = '';

Expand Down Expand Up @@ -237,56 +253,92 @@ const SchedulerComponent = () => {
{state.description}
</div>
</div>
{/* Error messages */}
<div className="card mt-2 d-none">
<div className="card-header alert-danger">
Error:
{state.description}
</div>
</div>
{/* GENERATE EVENTS */}
<div className="mt-2">
<div className="form-group form-inline">
<input type="button" className="btn btn-primary" onClick={(e) => generateEventsClick(e)} value="Generate Events" />
<input type="button" className="btn btn-primary ml-2" onClick={(e) => validateScheduleClick(e)} value="Validate schedule" />

<input type="button" className="btn btn-primary ml-2" onClick={(e) => saveEventsClick(e)} value="Save events" />
<label htmlFor="endpointUrl" className="font-weight-bold ml-2">API endpoint to invoke</label>
<input type="text" id="endpointUrl" property_name="endpoint" className="form-control col ml-2" placeholder="Scheduler base url endpoint e.g. https://localhost:7049/"
value={endpoint} onChange={(e) => handleEndpointChange(e)} />
value={viewModel.endpoint} onChange={(e) => handleViewModelChange(e)} />
</div>
</div>
</div>
{/* LIST OF EVENTS */}
<div>
<table className="table table-stripe table-hover ">
<caption>No of events generated : {eventState.length}</caption>
<thead>
<tr>
<th scope="col">S.No.</th>
<th scope="col">Start date/time</th>
<th scope="col">End date/time</th>
</tr>
</thead>
<tbody>
{eventState.map(
(e, index) => (
<tr>
<th scope="row">{index + 1}</th>
<td>{moment(e.start).format("yyyy-MM-DD hh:mm A")}</td>
<td>{moment(e.end).format("yyyy-MM-DD hh:mm A")}</td>
</tr>
)
)}
</tbody>
</table>
<div className='form-inline'>
{/* JavaScript based event generation */}
<div className='col-6 align-top'>
<table className="table table-stripe table-hover ">
<caption>No of events generated(client side) : {viewModel.events.length}</caption>
<thead>
<tr>
<th scope="col">S.No.</th>
<th scope="col">Start date/time</th>
<th scope="col">End date/time</th>
</tr>
</thead>
<tbody>
{viewModel.events.map(
(e, index) => (
<tr>
<th scope="row">{index + 1}</th>
<td>{moment(e.start).format("yyyy-MM-DD hh:mm A")}</td>
<td>{moment(e.end).format("yyyy-MM-DD hh:mm A")}</td>
</tr>
)
)}
</tbody>
</table>
</div>
{/* Server side event generation */}
<div className='align-top'>
<table className="table table-stripe table-hover ">
<caption>No of events generated(server side) : {viewModel.serverEvent.length}</caption>
<thead>
<tr>
<th scope="col">S.No.</th>
<th scope="col">Start date/time</th>
<th scope="col">End date/time</th>
</tr>
</thead>
<tbody>
{viewModel.serverEvent.map(
(e) => (
<tr>
<th scope="row">{e.scheduleEventId}</th>
<td>{moment(e.startDate).format("yyyy-MM-DD hh:mm A")}</td>
<td>{moment(e.endDate).format("yyyy-MM-DD hh:mm A")}</td>
</tr>
)
)}
</tbody>
</table>
</div>
</div>
</div>
{/* JSON RECORD */}
<div className='card col-3 ml-2 p-2'>
<label className="font-weight-bold">Input JSON</label>
{
true &&
<ReactJson src={state} />
}
<label className="font-weight-bold mt-2">Output from Save events click</label>
{
true &&
<ReactJson src={saveEventOutput} />
}
<div>
<label className="font-weight-bold">Input JSON</label>
{
true &&
<ReactJson src={state} />
}
<label className="font-weight-bold mt-2">Output from Save events click</label>
{
true &&
<ReactJson src={viewModel.saveEventOutput} />
}
</div>
</div>
</div>
)
Expand Down
4 changes: 2 additions & 2 deletions src/components/Scheduler/WeeklySchedule/WeeklySchedule.component.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ const WeeklyScheduleComponent = (props) => {
<div className="col-lg-12">
<div className="form-group">
<div>
<label className="control-label font-weight-bold" htmlFor="recurrEvery">RECURS EVERY {state.freq_recurrence_factor} WEEK(S)</label>
<input id="recurrEvery" property_name="freq_recurrence_factor" className="form-control text-uppercase" value={state.freq_recurrence_factor}
<label className="control-label font-weight-bold" htmlFor="recurrEveryWeek">RECURS EVERY {state.freq_recurrence_factor} WEEK(S)</label>
<input id="recurrEveryWeek" property_name="freq_recurrence_factor" className="form-control text-uppercase" value={state.freq_recurrence_factor}
placeholder="WEEK(S)" type="number" min="1" max="100"
onChange={e => handleChange(e)} />
</div>
Expand Down
35 changes: 15 additions & 20 deletions src/components/Scheduler/scheduler.data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -418,7 +418,7 @@ export const generateEvents = (schedule) => {
return events;
};

export const validateSchedule = (schedule) =>{
export const validateSchedule = (schedule) => {

}

Expand All @@ -436,27 +436,22 @@ export const saveEvents = async (baseUrl, schedule) => {
};

const postJSON = async (endpoint, input) => {
try {

console.log(input);
const response = await fetch(endpoint, {
method: 'POST',
body: JSON.stringify(input),
headers: {
'Content-type': 'application/json',
}
});

console.log(response);

if (!response.ok) {
throw new Error('Api call failed');
const response = await fetch(endpoint, {
method: 'POST',
body: JSON.stringify(input),
headers: {
'Content-type': 'application/json',
}
});

const data = await response.json();
return data;
} catch (err) {
console.log(err);
throw new Error(err.message);
console.log(response);

if (!response.ok) {
return await response.text().then(text => { return JSON.parse(text) })
}

const data = await response.json();

return data;
};

0 comments on commit ea10ce1

Please sign in to comment.