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):
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:
......@@ -372,7 +372,7 @@ def sideEffectTreatments(new_person_data):
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:
......
......@@ -7,29 +7,7 @@ import './DestinationStyles.css';
const Destination = () => {
return(
<div className="destination">
<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>
<div className="destination"></div>
)
}
......
import './FeaturesStyles.css';
import React from 'react';
import TripData from './FeaturesData';
import Trip1 from '../assets/5.jpg';
import Trip2 from '../assets/6.jpg';
import Trip3 from '../assets/8.jpg';
import Trip1 from '../assets/face.png';
import Trip2 from '../assets/drug.jpg';
import Trip3 from '../assets/sideeffects.png';
import Trip4 from '../assets/rehabilitation.jpg';
import { Link } from "react-router-dom";
......@@ -17,24 +18,24 @@ export default function Trip() {
<TripData
Link="/test"
image={Trip1}
heading="Thisara"
heading="Image-based Substance Abuse Detection"
/>
<TripData
image={Trip3}
heading="Ravindu"
image={Trip2}
heading="Drug Type & Addiction Status"
/>
<TripData
Link="/sideEffectsAndTreatments"
image={Trip2}
image={Trip3}
heading="Side Effects & Treatments"
/>
<TripData
image={Trip1}
heading="Rehabilitation Process"
image={Trip4}
heading="Rehabilitation Status"
/>
</div>
......
......@@ -26,8 +26,8 @@
}
.form{
width: 35vw;
height: 950px;
width: 37vw;
height: 915px;
display: flex;
flex-direction: column;
justify-content: start;
......@@ -71,8 +71,30 @@ input{
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() {
const [coOccurringSubstances, setCoOccurringSubstances] = useState('');
const [preExistingMedicalCondition, setPreExistingMedicalCondition] = useState('');
const [predictions, setPredictions] = useState(null);
const [formSubmitted, setFormSubmitted] = useState(false);
const mapGender = (selectedGender) => {
switch (selectedGender) {
......@@ -93,6 +95,52 @@ function SideEffectsAndTreatments() {
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);
const genderValue = mapGender(gender);
const drugTypeValue = mapDrugTypeToValue(drugType);
......@@ -133,18 +181,20 @@ function SideEffectsAndTreatments() {
<h1 className='title'>Side Effect & Treatments</h1><br/>
<form onSubmit={handleSubmit} className='form'>
<div className='input-group'>
<label>Age: </label>
<input type='number' placeholder='Age' value={age} onChange={(e)=>{setAge(e.target.value)}}/>
<label>Age <span className='required-star'> *</span>:</label>
<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 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)}/>
<span>Male</span>
<input type='radio' name='gender' value='female' onChange={(e) => setGender(e.target.value)}/>
<span>Female</span>
{formSubmitted && !gender && (<div className='error-message'>Gender is Required!</div>)}
</div>
<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)}>
<option>Choose a Drug Type</option>
<option>Heroin</option>
......@@ -154,17 +204,20 @@ function SideEffectsAndTreatments() {
<option>Cocaine</option>
<option>Methamphetamine</option>
</select>
{formSubmitted && !drugType && (<div className='error-message'>Drug Type is Required!</div>)}
</div>
<div className='input-group'>
<label>Measures of drug used per day(mg): </label>
<input type='number' placeholder='mg' value={drugUsageMg} onChange={(e)=>{setDrugUsageMg(e.target.value)}}/>
<label>Measures of drug used per day(mg)<span className='required-star'> *</span>: </label>
<input type='number' placeholder='mg' value={drugUsageMg} onChange={(e) => {const inputValue = e.target.value;if (/^\d+$/.test(inputValue) || inputValue === '') {setDrugUsageMg(inputValue);}}}/>
</div>
{formSubmitted && !drugUsageMg && (<div className='error-message'>Measures of drug used per day is Required!</div>)}
<div className='input-group'>
<label>Time Used(Month): </label>
<input type='number' placeholder='No of months' value={months} onChange={(e)=>{setMonths(e.target.value)}}/>
<label>Time Used(Month)<span className='required-star'> *</span>: </label>
<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 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)}>
<option>Choose a Route of Administration</option>
<option>Inhalation</option>
......@@ -172,15 +225,17 @@ function SideEffectsAndTreatments() {
<option>Smoking</option>
</select>
</div>
{formSubmitted && !routeOfAdministration && (<div className='error-message'>Route of Administration is Required!</div>)}
<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')}/>
<span>Yes</span>
<input type='radio' name='takingCooccurringSubstances' value='no' checked={takingCooccurringSubstances === 'no'} onChange={() => setTakingCooccurringSubstances('no')}/>
<span>No</span>
</div>
{formSubmitted && !takingCooccurringSubstances && (<div className='error-message'>Taking Co-occurring Substances is Required!</div>)}
<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)}>
<option>Choose a Co-occurring Substances</option>
<option>Cannabis</option>
......@@ -192,19 +247,35 @@ function SideEffectsAndTreatments() {
<option>No</option>
</select>
</div>
{formSubmitted && !coOccurringSubstances && (<div className='error-message'>Co-occurring Substances is Required!</div>)}
<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')}/>
<span>Yes</span>
<input type='radio' name='preExistingmedicalcondition' value='no' checked={preExistingMedicalCondition === 'no'} onChange={() => setPreExistingMedicalCondition('no')}/>
<span>No</span>
</div>
{formSubmitted && !preExistingMedicalCondition && (<div className='error-message'>Pre-existing medical conditions is Required!</div>)}
<div className='btn-area'>
<button type="submit" className='btn'>Predict</button>
</div>
<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>
</form>
</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