Commit aa7963e0 authored by IT20161538's avatar IT20161538

new commit

parent f6bb20e9
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -267,7 +267,7 @@ def sideEffectTreatments(new_person_data): ...@@ -267,7 +267,7 @@ def sideEffectTreatments(new_person_data):
elif treatments_1_prediction == 9: elif treatments_1_prediction == 9:
treatments_1 = 'Focus your attention on a distracting activity such as reading, singing, listening to music, gardening, or exercising' treatments_1 = 'Lie down until the dizziness passes, then get up slowly,move slowly and carefully, get plenty of rest, drink plenty of fluids, especially water, avoid coffee, cigarettes, alcohol and drugs'
elif treatments_1_prediction == 10: elif treatments_1_prediction == 10:
...@@ -372,7 +372,7 @@ def sideEffectTreatments(new_person_data): ...@@ -372,7 +372,7 @@ def sideEffectTreatments(new_person_data):
elif treatments_2_prediction == 9: elif treatments_2_prediction == 9:
treatments_2 = 'Focus your attention on a distracting activity such as reading, singing, listening to music, gardening, or exercising' treatments_2 = 'Lie down until the dizziness passes, then get up slowly,move slowly and carefully, get plenty of rest, drink plenty of fluids, especially water, avoid coffee, cigarettes, alcohol and drugs'
elif treatments_2_prediction == 10: elif treatments_2_prediction == 10:
......
...@@ -7,29 +7,7 @@ import './DestinationStyles.css'; ...@@ -7,29 +7,7 @@ import './DestinationStyles.css';
const Destination = () => { const Destination = () => {
return( return(
<div className="destination"> <div className="destination"></div>
<h1>Popular Destination</h1>
<p>Tours give you the opportunity to see a lot,within a time frame.</p>
<DestinationData
className='first-des'
heading='Sydney Opera House'
text="The Sydney Opera House is a multi-venue performing arts centre in Sydney. Located on the foreshore of Sydney Harbour, it is widely regarded as one of the world's most famous and distinctive buildings and a masterpiece of 20th-century architecture."
img1={Mountain1}
img2={Mountain2}
/>
<DestinationData
className='first-des-reverse'
heading='Eiffel Tower'
text="The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. Locally nicknamed 'La dame de fer', it was constructed from 1887 to 1889 as the centerpiece of the 1889 World's Fair."
img1={Mountain3}
img2={Mountain4}
/>
</div>
) )
} }
......
import './FeaturesStyles.css'; import './FeaturesStyles.css';
import React from 'react'; import React from 'react';
import TripData from './FeaturesData'; import TripData from './FeaturesData';
import Trip1 from '../assets/5.jpg'; import Trip1 from '../assets/face.png';
import Trip2 from '../assets/6.jpg'; import Trip2 from '../assets/drug.jpg';
import Trip3 from '../assets/8.jpg'; import Trip3 from '../assets/sideeffects.png';
import Trip4 from '../assets/rehabilitation.jpg';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
...@@ -17,24 +18,24 @@ export default function Trip() { ...@@ -17,24 +18,24 @@ export default function Trip() {
<TripData <TripData
Link="/test" Link="/test"
image={Trip1} image={Trip1}
heading="Thisara" heading="Image-based Substance Abuse Detection"
/> />
<TripData <TripData
image={Trip3} image={Trip2}
heading="Ravindu" heading="Drug Type & Addiction Status"
/> />
<TripData <TripData
Link="/sideEffectsAndTreatments" Link="/sideEffectsAndTreatments"
image={Trip2} image={Trip3}
heading="Side Effects & Treatments" heading="Side Effects & Treatments"
/> />
<TripData <TripData
image={Trip1} image={Trip4}
heading="Rehabilitation Process" heading="Rehabilitation Status"
/> />
</div> </div>
......
...@@ -26,8 +26,8 @@ ...@@ -26,8 +26,8 @@
} }
.form{ .form{
width: 35vw; width: 37vw;
height: 950px; height: 915px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;
...@@ -71,8 +71,30 @@ input{ ...@@ -71,8 +71,30 @@ input{
margin-right:400px; margin-right:400px;
} }
.input-group1{ .input-group1 {
text-align: left;
}
align-items: left; .input-group1 p {
font-weight: bold;
margin-bottom: 5px;
}
.input-group1 ul {
list-style-type: none;
padding-left: 0;
}
.input-group1 li {
margin-bottom: 10px;
}
.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}
.required-star {
color: red;
} }
\ No newline at end of file
...@@ -13,6 +13,8 @@ function SideEffectsAndTreatments() { ...@@ -13,6 +13,8 @@ function SideEffectsAndTreatments() {
const [coOccurringSubstances, setCoOccurringSubstances] = useState(''); const [coOccurringSubstances, setCoOccurringSubstances] = useState('');
const [preExistingMedicalCondition, setPreExistingMedicalCondition] = useState(''); const [preExistingMedicalCondition, setPreExistingMedicalCondition] = useState('');
const [predictions, setPredictions] = useState(null); const [predictions, setPredictions] = useState(null);
const [formSubmitted, setFormSubmitted] = useState(false);
const mapGender = (selectedGender) => { const mapGender = (selectedGender) => {
switch (selectedGender) { switch (selectedGender) {
...@@ -93,6 +95,52 @@ function SideEffectsAndTreatments() { ...@@ -93,6 +95,52 @@ function SideEffectsAndTreatments() {
try { try {
// Form validation
if (!age) {
setFormSubmitted(true);
return;
}
if (!drugType) {
setFormSubmitted(true);
return;
}
if (!drugUsageMg) {
setFormSubmitted(true);
return;
}
if (!months) {
setFormSubmitted(true);
return;
}
if (!gender) {
setFormSubmitted(true);
return;
}
if (!routeOfAdministration) {
setFormSubmitted(true);
return;
}
if (!takingCooccurringSubstances) {
setFormSubmitted(true);
return;
}
if (!coOccurringSubstances) {
setFormSubmitted(true);
return;
}
if (!preExistingMedicalCondition) {
setFormSubmitted(true);
return;
}
//console.log('Parsed Data:', requestData); //console.log('Parsed Data:', requestData);
const genderValue = mapGender(gender); const genderValue = mapGender(gender);
const drugTypeValue = mapDrugTypeToValue(drugType); const drugTypeValue = mapDrugTypeToValue(drugType);
...@@ -133,18 +181,20 @@ function SideEffectsAndTreatments() { ...@@ -133,18 +181,20 @@ function SideEffectsAndTreatments() {
<h1 className='title'>Side Effect & Treatments</h1><br/> <h1 className='title'>Side Effect & Treatments</h1><br/>
<form onSubmit={handleSubmit} className='form'> <form onSubmit={handleSubmit} className='form'>
<div className='input-group'> <div className='input-group'>
<label>Age: </label> <label>Age <span className='required-star'> *</span>:</label>
<input type='number' placeholder='Age' value={age} onChange={(e)=>{setAge(e.target.value)}}/> <input type='number' placeholder='Age' value={age} onChange={(e) => {const inputValue = e.target.value;if (/^\d+$/.test(inputValue) || inputValue === '') {setAge(inputValue);}}}/>
{formSubmitted && !age && (<div className='error-message'>Age is Required!</div>)}
</div> </div>
<div className='input-group'> <div className='input-group'>
<label>Gender: </label> <label>Gender<span className='required-star'> *</span>: </label>
<input type='radio' name='gender' value='male' onChange={(e) => setGender(e.target.value)}/> <input type='radio' name='gender' value='male' onChange={(e) => setGender(e.target.value)}/>
<span>Male</span> <span>Male</span>
<input type='radio' name='gender' value='female' onChange={(e) => setGender(e.target.value)}/> <input type='radio' name='gender' value='female' onChange={(e) => setGender(e.target.value)}/>
<span>Female</span> <span>Female</span>
{formSubmitted && !gender && (<div className='error-message'>Gender is Required!</div>)}
</div> </div>
<div className='input-group'> <div className='input-group'>
<label>Drug Type: </label> <label>Drug Type<span className='required-star'> *</span>: </label>
<select value={drugType} name="drugtype" onChange={(e) => setDrugType(e.target.value)}> <select value={drugType} name="drugtype" onChange={(e) => setDrugType(e.target.value)}>
<option>Choose a Drug Type</option> <option>Choose a Drug Type</option>
<option>Heroin</option> <option>Heroin</option>
...@@ -154,17 +204,20 @@ function SideEffectsAndTreatments() { ...@@ -154,17 +204,20 @@ function SideEffectsAndTreatments() {
<option>Cocaine</option> <option>Cocaine</option>
<option>Methamphetamine</option> <option>Methamphetamine</option>
</select> </select>
{formSubmitted && !drugType && (<div className='error-message'>Drug Type is Required!</div>)}
</div> </div>
<div className='input-group'> <div className='input-group'>
<label>Measures of drug used per day(mg): </label> <label>Measures of drug used per day(mg)<span className='required-star'> *</span>: </label>
<input type='number' placeholder='mg' value={drugUsageMg} onChange={(e)=>{setDrugUsageMg(e.target.value)}}/> <input type='number' placeholder='mg' value={drugUsageMg} onChange={(e) => {const inputValue = e.target.value;if (/^\d+$/.test(inputValue) || inputValue === '') {setDrugUsageMg(inputValue);}}}/>
</div> </div>
{formSubmitted && !drugUsageMg && (<div className='error-message'>Measures of drug used per day is Required!</div>)}
<div className='input-group'> <div className='input-group'>
<label>Time Used(Month): </label> <label>Time Used(Month)<span className='required-star'> *</span>: </label>
<input type='number' placeholder='No of months' value={months} onChange={(e)=>{setMonths(e.target.value)}}/> <input type='number' placeholder='No of months' value={months} onChange={(e) => {const inputValue = e.target.value;if (/^\d+$/.test(inputValue) || inputValue === '') {setMonths(inputValue);}}}/>
{formSubmitted && !months && (<div className='error-message'>Time Used is Required!</div>)}
</div> </div>
<div className='input-group'> <div className='input-group'>
<label>Route of Administration: </label> <label>Route of Administration<span className='required-star'> *</span>: </label>
<select value={routeOfAdministration} name="route_of_administration " onChange={(e) => setRouteOfAdministration(e.target.value)}> <select value={routeOfAdministration} name="route_of_administration " onChange={(e) => setRouteOfAdministration(e.target.value)}>
<option>Choose a Route of Administration</option> <option>Choose a Route of Administration</option>
<option>Inhalation</option> <option>Inhalation</option>
...@@ -172,15 +225,17 @@ function SideEffectsAndTreatments() { ...@@ -172,15 +225,17 @@ function SideEffectsAndTreatments() {
<option>Smoking</option> <option>Smoking</option>
</select> </select>
</div> </div>
{formSubmitted && !routeOfAdministration && (<div className='error-message'>Route of Administration is Required!</div>)}
<div className='input-group'> <div className='input-group'>
<label>Taking Co-occurring Substances: </label> <label>Taking Co-occurring Substances<span className='required-star'> *</span>: </label>
<input type='radio' name='takingCooccurringSubstances' value='yes' checked={takingCooccurringSubstances === 'yes'} onChange={() => setTakingCooccurringSubstances('yes')}/> <input type='radio' name='takingCooccurringSubstances' value='yes' checked={takingCooccurringSubstances === 'yes'} onChange={() => setTakingCooccurringSubstances('yes')}/>
<span>Yes</span> <span>Yes</span>
<input type='radio' name='takingCooccurringSubstances' value='no' checked={takingCooccurringSubstances === 'no'} onChange={() => setTakingCooccurringSubstances('no')}/> <input type='radio' name='takingCooccurringSubstances' value='no' checked={takingCooccurringSubstances === 'no'} onChange={() => setTakingCooccurringSubstances('no')}/>
<span>No</span> <span>No</span>
</div> </div>
{formSubmitted && !takingCooccurringSubstances && (<div className='error-message'>Taking Co-occurring Substances is Required!</div>)}
<div className='input-group'> <div className='input-group'>
<label>Co-occurring Substances: </label> <label>Co-occurring Substances<span className='required-star'> *</span>: </label>
<select value={coOccurringSubstances} name="co-occurringsubstances " onChange={(e) => setCoOccurringSubstances(e.target.value)}> <select value={coOccurringSubstances} name="co-occurringsubstances " onChange={(e) => setCoOccurringSubstances(e.target.value)}>
<option>Choose a Co-occurring Substances</option> <option>Choose a Co-occurring Substances</option>
<option>Cannabis</option> <option>Cannabis</option>
...@@ -192,19 +247,35 @@ function SideEffectsAndTreatments() { ...@@ -192,19 +247,35 @@ function SideEffectsAndTreatments() {
<option>No</option> <option>No</option>
</select> </select>
</div> </div>
{formSubmitted && !coOccurringSubstances && (<div className='error-message'>Co-occurring Substances is Required!</div>)}
<div className='input-group'> <div className='input-group'>
<label>Any pre-existing medical conditions?: </label> <label>Any pre-existing medical conditions?<span className='required-star'> *</span>: </label>
<input type='radio' name='preExistingmedicalcondition' value='yes' checked={preExistingMedicalCondition === 'yes'} onChange={() => setPreExistingMedicalCondition('yes')}/> <input type='radio' name='preExistingmedicalcondition' value='yes' checked={preExistingMedicalCondition === 'yes'} onChange={() => setPreExistingMedicalCondition('yes')}/>
<span>Yes</span> <span>Yes</span>
<input type='radio' name='preExistingmedicalcondition' value='no' checked={preExistingMedicalCondition === 'no'} onChange={() => setPreExistingMedicalCondition('no')}/> <input type='radio' name='preExistingmedicalcondition' value='no' checked={preExistingMedicalCondition === 'no'} onChange={() => setPreExistingMedicalCondition('no')}/>
<span>No</span> <span>No</span>
</div> </div>
{formSubmitted && !preExistingMedicalCondition && (<div className='error-message'>Pre-existing medical conditions is Required!</div>)}
<div className='btn-area'> <div className='btn-area'>
<button type="submit" className='btn'>Predict</button> <button type="submit" className='btn'>Predict</button>
</div> </div>
<div className='input-group1'> <div className='input-group1'>
{predictions && (<p>Predictions: {JSON.stringify(predictions)}</p>)} {predictions && (
<div>
<p><h1>Predictions</h1></p>
<ul>
{Object.keys(predictions).map((key) => {
const predictionText = predictions[key];
return (
<li key={key}>
<strong>{key}:</strong> {predictionText}
</li>
);
})}
</ul>
</div>
)}
</div> </div>
</form> </form>
</div></div> </div></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment