Skip to content

Commit

Permalink
rerun simulation modal window
Browse files Browse the repository at this point in the history
  • Loading branch information
AKostiv8 committed Nov 14, 2024
1 parent 21d2bc7 commit a11ec20
Show file tree
Hide file tree
Showing 25 changed files with 647 additions and 124 deletions.
4 changes: 2 additions & 2 deletions app/js/AppLogo.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export default function AppLogo({ onAnimationComplete }) {
const moveTimer = setTimeout(() => {
setMoveToTop(true);
// onAnimationComplete(); // Notify parent that animation is complete
}, 4000);
}, 2000);

// Set to final state after the transition (1 second after moveToTop)
const finalTimer = setTimeout(() => {
setFinalState(true);
onAnimationComplete();
}, 4750); // Delayed 1 second after moveTimer
}, 2750); // Delayed 1 second after moveTimer

return () => {
clearTimeout(moveTimer);
Expand Down
52 changes: 52 additions & 0 deletions app/js/EditIntakeData.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
const { useState, useEffect } = React;
const Intake = require('./components/Intake.js').default;

export default function EditIntakeData({id, init_shiny_data, coffee_type_options}) {
console.log("initShinyData: ", init_shiny_data);

const [intakes, setIntakes] = useState(init_shiny_data);

const handleIntakeChange = (updatedIntakes) => {
setIntakes(updatedIntakes);
Shiny.setInputValue(id, {intakes: updatedIntakes});
setShinyData(prevData => ({
...prevData,
intakes: updatedIntakes
}));
};

const handleAddIntake = () => {
const newIntakes = [...intakes, { type: {}, time: '', selected: true }];
setIntakes(newIntakes);
Shiny.setInputValue(id, {intakes: newIntakes});
setShinyData(prevData => ({
...prevData,
intakes: newIntakes
}));
};

const handleRemoveIntake = (indexToRemove) => {
const updatedIntakes = intakes.filter((_, index) => index !== indexToRemove);
setIntakes(updatedIntakes); // or however you're managing state
Shiny.setInputValue(id, {intakes: updatedIntakes});
};


return(
<div id={id}>

<Intake
intakes={intakes}
onIntakeChange={handleIntakeChange}
onAddIntake={handleAddIntake}
onRemoveIntake={handleRemoveIntake}
coffeeTypeOptions={coffee_type_options}
showInitIntake={false}
showEditIntake={true}
startCalc={() => {}}
/>

</div>
);

}
114 changes: 114 additions & 0 deletions app/js/EditUserData.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
const { useState, useEffect } = React;
const Dropdown = require('./components/Dropdown.js').default;
const GenderSwitch = require('./components/GenderSwitch.js').default;
const NumericSlider = require('./components/NumericSlider.js').default;
const CategoricalSlider = require('./components/CategoricalSlider.js').default;
const SmokerCheckbox = require('./components/SmokerCheckbox.js').default;

export default function EditUserdata({id, init_shiny_data, ethinicity_options, metabolism_options, unit_options}) {
console.log("initShinyData: ", init_shiny_data);

const [shinyData, setShinyData] = useState({
ethnicity: init_shiny_data.ethnicity,
gender: init_shiny_data.gender,
age: init_shiny_data.age,
height: init_shiny_data.height,
weight: init_shiny_data.weight,
unit: init_shiny_data.unit,
metabolism: init_shiny_data.metabolism,
smoker: init_shiny_data.smoker
});

const handleSliderChange = (identifier, value) => {
const updatedData = { ...shinyData, [identifier]: value };
setShinyData(prevData => ({
...prevData,
[identifier]: value
}));
Shiny.setInputValue(id, updatedData);
};





return(
<div id={id}>
<p className="user-input-title">Ethinicity:</p>
<Dropdown initialValue={init_shiny_data.ethnicity}
dropdownOptions={ethinicity_options}
onChange={
(value) => handleSliderChange('ethnicity', value)
}
/>
<p className="user-input-title">Gender:</p>
<GenderSwitch initialValue={init_shiny_data.gender}
onChange={
(value) => handleSliderChange('gender', value)
}
/>
<p className="user-input-title">Age:</p>
<NumericSlider
min={5}
max={105}
step={1}
initialValue={init_shiny_data.age}
onChange={
(value) => handleSliderChange('age', value)
}
unit="imperial"
measure=""
/>
<p className="user-input-title">Height:</p>
<NumericSlider
min={shinyData.unit.toLowerCase() == "imperial" ? 39 : 1.00}
max={shinyData.unit.toLowerCase() == "imperial" ? 87 : 2.20}
step={shinyData.unit.toLowerCase() == "imperial" ? 1 : 0.01}
initialValue={init_shiny_data.height}
onChange={
(value) => handleSliderChange('height', value)
}
unit="imperial"
measure={shinyData.unit.toLowerCase() == "imperial" ? "in" : "cm"}
/>

<p className="user-input-title">Weight:</p>
<NumericSlider
min={shinyData.unit.toLowerCase() == "imperial" ? 22 : 10}
max={shinyData.unit.toLowerCase() == "imperial" ? 462 : 210}
step={shinyData.unit.toLowerCase() == "imperial" ? 10 : 1}
initialValue={init_shiny_data.weight}
onChange={
(value) => handleSliderChange('weight', value)
}
unit="imperial"
measure={shinyData.unit.toLowerCase() == "imperial" ? "lbs" : "kg"}
/>

<p className="user-input-title">Metabolism:</p>
<CategoricalSlider
options={metabolism_options}
initialValue={init_shiny_data.metabolism}
onChange={
(value) => handleSliderChange('metabolism', value)
}
/>
<SmokerCheckbox
initialChecked={init_shiny_data.smoker}
onChange={
(value) => handleSliderChange('smoker', value)
}
/>
<p className="user-input-title">Unit:</p>
<CategoricalSlider
options={unit_options}
initialValue={init_shiny_data.unit}
onChange={
(value) => handleSliderChange('unit', value)
}
/>

</div>
);

}
26 changes: 20 additions & 6 deletions app/js/Stepper.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,18 +75,21 @@ export default function Stepper({id, initShinyData, ethinicityOptions, metabolis
<div className="step-content">
{step === 1 && (
<div className="step">
<p><span className="current-step">1</span>/2 <span className="step-title">Enter your data</span></p>
<p><span className="current-step">1</span>/2 <span className="step-title">Health Factors</span></p>
<p className="step-user-input-title">Ethinicity:</p>
<Dropdown initialValue={initShinyData.ethnicity}
dropdownOptions={ethinicityOptions}
onChange={
(value) => handleSliderChange('ethnicity', value)
}
/>
<p className="step-user-input-title">Gender:</p>
<GenderSwitch initialValue={initShinyData.gender}
onChange={
(value) => handleSliderChange('gender', value)
}
/>
<p className="step-user-input-title">Age:</p>
<NumericSlider
min={5}
max={105}
Expand All @@ -98,23 +101,31 @@ export default function Stepper({id, initShinyData, ethinicityOptions, metabolis
unit="imperial"
measure=""
/>
<p className="step-user-input-title">Height:</p>
<NumericSlider
min={1.00} max={2.20} step={0.01}
min={shinyData.unit.toLowerCase() == "imperial" ? 39 : 1.00}
max={shinyData.unit.toLowerCase() == "imperial" ? 87 : 2.20}
step={shinyData.unit.toLowerCase() == "imperial" ? 1 : 0.01}
initialValue={initShinyData.height}
onChange={
(value) => handleSliderChange('height', value)
}
unit="imperial"
measure="cm"
measure={shinyData.unit.toLowerCase() == "imperial" ? "in" : "cm"}
/>
<p className="step-user-input-title">Weight:</p>
<NumericSlider
min={10} max={210} step={1} initialValue={initShinyData.weight}
min={shinyData.unit.toLowerCase() == "imperial" ? 22 : 10}
max={shinyData.unit.toLowerCase() == "imperial" ? 462 : 210}
step={shinyData.unit.toLowerCase() == "imperial" ? 10 : 1}
initialValue={initShinyData.weight}
onChange={
(value) => handleSliderChange('weight', value)
}
unit="imperial"
measure="kg"
measure={shinyData.unit.toLowerCase() == "imperial" ? "lbs" : "kg"}
/>
<p className="step-user-input-title">Activity:</p>
<CategoricalSlider
options={metabolismOptions}
initialValue={initShinyData.metabolism}
Expand All @@ -128,6 +139,7 @@ export default function Stepper({id, initShinyData, ethinicityOptions, metabolis
(value) => handleSliderChange('smoker', value)
}
/>
<p className="step-user-input-title">Units:</p>
<CategoricalSlider
options={unitOptions}
initialValue={initShinyData.unit}
Expand All @@ -140,14 +152,16 @@ export default function Stepper({id, initShinyData, ethinicityOptions, metabolis
)}
{step === 2 && (
<div className="step">
<p onClick={() => setStep(1)}>1/<span className="current-step">2</span><span className="step-title">Enter intake data</span></p>
<p onClick={() => setStep(1)}>1/<span className="current-step">2</span><span className="step-title">Caffeine Intake</span></p>
<Intake
intakes={intakes}
onIntakeChange={handleIntakeChange}
onAddIntake={handleAddIntake}
onRemoveIntake={handleRemoveIntake}
coffeeTypeOptions={coffeeTypeOptions}
startCalc={handleNextStep}
showInitIntake={true}
showEditIntake={false}
/>
</div>
)}
Expand Down
50 changes: 35 additions & 15 deletions app/js/components/Intake.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
const { useState } = React;
const DropdownCoffeeType = require('./DropdownCoffeeType.js').default;

export default function Intake({ intakes, onIntakeChange, onAddIntake, onRemoveIntake, coffeeTypeOptions, startCalc }) {
export default function Intake({ intakes, onIntakeChange, onAddIntake, onRemoveIntake, coffeeTypeOptions, startCalc, showInitIntake, showEditIntake }) {

console.log("Intake window", intakes)

const handleChange = (index, event) => {
const { name, value, type, checked } = event.target;
const updatedIntakes = [...intakes];
Expand All @@ -14,9 +17,6 @@ export default function Intake({ intakes, onIntakeChange, onAddIntake, onRemoveI
};

const handleCoffeeTypeChange = (index, value) => {
console.log(value);
console.log(index);
console.log(intakes);
const updatedIntakes = [...intakes];
updatedIntakes[index].type = value;
onIntakeChange(updatedIntakes);
Expand All @@ -26,13 +26,16 @@ export default function Intake({ intakes, onIntakeChange, onAddIntake, onRemoveI
<div className="intake-container">
{intakes.map((intake, index) => (
<div className="intake-record" key={index}>
<input
className="intake-record-selected"
type="checkbox"
name="selected"
checked={intake.selected}
onChange={(event) => handleChange(index, event)}
/>
<label className="custom-checkbox">
<input
className="intake-record-selected"
type="checkbox"
name="selected"
checked={intake.selected}
onChange={(event) => handleChange(index, event)}
/>
<span className="checkbox-indicator"></span>
</label>
<DropdownCoffeeType
initialValue={intake.type}
dropdownOptions={coffeeTypeOptions}
Expand All @@ -53,10 +56,27 @@ export default function Intake({ intakes, onIntakeChange, onAddIntake, onRemoveI
</span>
</div>
))}
<div class="intake-button-group">
<button className="add-intake-btn" onClick={onAddIntake}>Add Intake</button>
<button onClick={startCalc}>Calculate</button>
</div>
{showInitIntake &&
(
<div class="intake-button-group">
<button className="add-intake-btn" onClick={onAddIntake}>Add Intake</button>
<button onClick={startCalc}>Submit</button>
</div>
)
}

{showEditIntake &&
(
<div className="intake-edit-container">
<hr/>
<div class="intake-button-group-edit">
<button className="edit-add-intake-btn" onClick={onAddIntake}>Add Intake</button>
<p>How much caffeine <br/> have you had today?</p>
</div>
</div>
)
}

</div>
);
}
Expand Down
4 changes: 3 additions & 1 deletion app/js/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import IntroScreen from './IntroScreen';
import EditUserdata from './EditUserdata';
import EditIntakeData from './EditIntakeData';

Rhino.registerReactComponents({ IntroScreen });
Rhino.registerReactComponents({ IntroScreen, EditUserdata, EditIntakeData });
6 changes: 6 additions & 0 deletions app/logic/constants.R
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,9 @@ COFFEE_TYPES <- list(
`Iced` = list(caffeine = 77, water = 150),
`Decaf` = list(caffeine = 2, water = 240)
)

#' @export
METABOLISM = c("low", "normal", "high")

#' @export
UNITS <- c("metric", "imperial")
4 changes: 4 additions & 0 deletions app/logic/helpers.R
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#' @export
CREATE_SHINT_INPUT_FROM_JS <- function(input_id) {
sprintf("Shiny.setInputValue('%s', Math.random());", input_id)
}
8 changes: 6 additions & 2 deletions app/main.R
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,13 @@ server <- function(id) {

# When user characteristics are received, apply them to the simulation
observeEvent(app_data$user_data, {
message("1. User data edited!")
set_individual(simulation, app_data$user_data)
})

# When user modifies caffeine intakes, update the simulation
observeEvent(app_data$intake_data, {
message("2. Intake data edited!")
set_intakes(simulation, app_data$intake_data)
})

Expand All @@ -58,8 +60,10 @@ server <- function(id) {

observeEvent(app_data$simulation_results, {
message("Simulation result received. Destroying intro screen.")
app_data$destroy_intro_screen <- TRUE
# app_data$destroy_intro_screen <- TRUE
result_screen$server("result_screen", app_data)
})
}, once = TRUE)


})
}
Loading

0 comments on commit a11ec20

Please sign in to comment.