Skip to content

Commit 96d9eda

Browse files
panos1998panos1998
committed
new css styles
1 parent 9146fd3 commit 96d9eda

File tree

4 files changed

+222
-290
lines changed

4 files changed

+222
-290
lines changed

‎static/Page2.css

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -230,14 +230,6 @@ body, h1, h2, h3, h4, h5, h6{
230230
.col-form-label.classRule-iugn4-test-Page4{
231231
width:100px !important;
232232
}
233-
#i0rc6{
234-
min-height:30px !important;
235-
width:auto !important;
236-
}
237-
#inci1{
238-
min-height:30px !important;
239-
width:auto !important;
240-
}
241233
#i56dk{
242234
min-height:30px !important;
243235
width:auto !important;
@@ -326,9 +318,6 @@ body, h1, h2, h3, h4, h5, h6{
326318
.classRule-im2v7-test-Page4{
327319
background-color:#a3ced0 !important;
328320
}
329-
body{
330-
background-color:#a3ced0 !important;
331-
}
332321
#idpelj{
333322
min-height:30px !important;
334323
width:auto !important;
@@ -339,6 +328,13 @@ body{
339328
.btn.btn-primary.classRule-incvnp-test-Assess.pointer{
340329
border-radius:19.75px !important;
341330
}
331+
.classRule-ipfjvj-test-Assess{
332+
background-color:#a3ced0 !important;
333+
}
334+
.classRule-ix9tq2-diaTool-Assess{
335+
padding:0 0 0 0 !important;
336+
background-color:#a3ced0 !important;
337+
}
342338
@media fadeEffect{
343339
0%{
344340
opacity:0;

‎static/Page2.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ document.getElementById('assess-button').onclick = (event) => {
3939
total_cal:input[9]
4040
}
4141
//send data for machine learning through http POST request at appropriate endpoint
42-
postData("/metrics/",data).then(data=>{
42+
postData("https://biomedicalapp.herokuapp.com/metrics/",data).then(data=>{
4343
let prob = data['prob']//the calculated diabetes risk probability
4444
writedata(data);
4545
//save data to localStorage

‎static/history.js

Lines changed: 47 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,38 @@ document.getElementById('staticBackdrop').addEventListener('show.bs.modal',(even
44
var button = event.relatedTarget;
55
//get the data of the result box we clicked
66
var details = {
7-
//save the useful data as key-value pairs
8-
"Weight": button.getAttribute('data-weight'),"BMI":button.getAttribute('data-bmi'),
9-
"Waist-circ":button.getAttribute('data-waist'), "Oxymetry": button.getAttribute("data-oxymetry"),
10-
"Grain": button.getAttribute("data-grain"),"Fruit": button.getAttribute('data-fruit'),
11-
"Vegetables":button.getAttribute('data-vegan'),"Dairy": button.getAttribute('data-dairy'),
12-
"Protein":button.getAttribute('data-protein'),"Total Calories":button.getAttribute("data-total_cal"),
13-
"Date":button.getAttribute('data-dt'),"Risk probability":button.getAttribute('data-prob')};
7+
//save the useful data as key-value pairs
8+
"Weight": button.getAttribute('data-weight'),"BMI":button.getAttribute('data-bmi'),
9+
"Waist-circ":button.getAttribute('data-waist'), "Oxymetry": button.getAttribute("data-oxymetry"),
10+
"Grain": button.getAttribute("data-grain"),"Fruit": button.getAttribute('data-fruit'),
11+
"Vegetables":button.getAttribute('data-vegan'),"Dairy": button.getAttribute('data-dairy'),
12+
"Protein":button.getAttribute('data-protein'),"Total Calories":button.getAttribute("data-total_cal"),
13+
"Date":button.getAttribute('data-dt'),"Risk probability":button.getAttribute('data-prob')};
1414
var list = document.getElementById('display-card').children[1]//select the list which lies inside display card
1515
list.style.setProperty('list-style', 'none', 'important')//remove li dots
1616
var display_card = document.getElementById('display-card');
1717
// select the display card
18-
let color = details['Risk probability']<0.5?"lightgreen":"coral"
18+
let color = details['Risk probability']<0.3?"lightgreen":"coral"
1919
display_card.style.setProperty("background-color",color,"important");
2020
console.log(list);
2121
console.log(display_card);
2222
for ([key, value] of Object.entries(details)){
23-
//for every key-value pair inside our dictionary
24-
var list_item = document.createElement('li');
25-
// create a list element
26-
list_item.appendChild(document.createTextNode(""+key+": "+value+""));
27-
//put the useful data context inside list_item
28-
list.appendChild(list_item);
29-
// finally append the element to the list parent
23+
//for every key-value pair inside our dictionary
24+
var list_item = document.createElement('li');
25+
// create a list element
26+
list_item.appendChild(document.createTextNode(""+key+": "+value+""));
27+
//put the useful data context inside list_item
28+
list.appendChild(list_item);
29+
// finally append the element to the list parent
3030
}
3131
}
32-
)
32+
)
3333
//case we close the modal, it is critical to delete the list content in order accomondate the next result context without problem ;)
3434
document.getElementById('staticBackdrop').addEventListener('hide.bs.modal', (event)=>{
3535
var list = document.getElementById('display-card').children[1]
3636
list.innerHTML="";
3737
}
38-
)
38+
)
3939
//this is the view button, it has 2 functionalities
4040
document.getElementById('iy4ml').onclick = (event) => {
4141
document.getElementById('history-container').style.setProperty('display','inline-block','important');
@@ -50,82 +50,36 @@ readlocalstorage()
5050
function readlocalstorage(){
5151
var retrievedata= JSON.parse(localStorage.getItem('records'))
5252
if (retrievedata === null){
53-
const kouti = document.getElementById('history-container')
54-
kouti.children[0].remove();
55-
console.log("empty array")}
53+
const kouti = document.getElementById('history-container')
54+
kouti.children[0].remove();
55+
console.log("empty array")}
5656
else {
57-
const container = document.getElementById('history-container');
58-
const record = document.getElementById('history-record');
59-
if(!Array.isArray(retrievedata)){
60-
retrievedata = [retrievedata]
61-
}
62-
//retrieve data and save each record value to its appropriate data-* attributes
63-
retrievedata.forEach(element => {
64-
const clone = record.cloneNode(true);
65-
for (const [key, value] of Object.entries(element)){
66-
clone.setAttribute('data-'+key+'', ''+value+'');
67-
if(clone.getAttribute('data-prob')<0.5){
68-
//some coloring depending on result
69-
clone.style.setProperty('background-color','lightgreen', 'important');
70-
}
71-
else {
72-
//clone the style for every box-result element
73-
clone.style.setProperty('border-color', 'coral','important');
74-
clone.style.setProperty('background-color', 'coral', 'important');
75-
}
76-
}
77-
//as button label place the probability
78-
clone.textContent = clone.getAttribute('data-prob');
79-
container.appendChild(clone);
80-
console.log(element)
81-
}
82-
);
83-
container.children[0].remove()
57+
const container = document.getElementById('history-container');
58+
const record = document.getElementById('history-record');
59+
if(!Array.isArray(retrievedata)){
60+
retrievedata = [retrievedata]
61+
}
62+
//retrieve data and save each record value to its appropriate data-* attributes
63+
retrievedata.forEach(element => {
64+
const clone = record.cloneNode(true);
65+
for (const [key, value] of Object.entries(element)){
66+
clone.setAttribute('data-'+key+'', ''+value+'');
67+
if(clone.getAttribute('data-prob')<0.5){
68+
//some coloring depending on result
69+
clone.style.setProperty('background-color','lightgreen', 'important');
70+
}
71+
else {
72+
//clone the style for every box-result element
73+
clone.style.setProperty('border-color', 'coral','important');
74+
clone.style.setProperty('background-color', 'coral', 'important');
75+
}
76+
}
77+
//as button label place the probability
78+
clone.textContent = clone.getAttribute('data-prob');
79+
container.appendChild(clone);
80+
console.log(element)
81+
}
82+
);
83+
container.children[0].remove()
8484
}
8585
}
86-
document.getElementById('hide-button').onclick = (event) => {
87-
document.getElementById('history-container').style.setProperty('display','none','important');
88-
};
89-
document.getElementById('delete-history-button').onclick = (event) => {
90-
document.getElementById('history-container').remove();
91-
localStorage.removeItem('records');
92-
document.getElementById('footer').style.setProperty('position','relative','important');
93-
};
94-
document.getElementById('ip1e').onclick = (event) => {
95-
event.preventDefault();
96-
{
97-
window.document.location = '/';
98-
}
99-
};
100-
document.getElementById('izxo').onclick = (event) => {
101-
event.preventDefault();
102-
{
103-
window.document.location = '/';
104-
}
105-
};
106-
document.getElementById('itked').onclick = (event) => {
107-
event.preventDefault();
108-
{
109-
window.document.location = '/assess/';
110-
}
111-
};
112-
document.getElementById('i5z9m').onclick = (event) => {
113-
event.preventDefault();
114-
{
115-
window.document.location = '/history/';
116-
}
117-
};
118-
document.getElementById('ijxfk').onclick = (event) => {
119-
event.preventDefault();
120-
{
121-
window.document.location = '/upload/';
122-
}
123-
};
124-
document.getElementById('i04p6').onclick = (event) => {
125-
event.preventDefault();
126-
{
127-
window.document.location = '/upload/';
128-
}
129-
};
130-
window.onload = () => {
131-
};

‎templates/html/Page2.html

Lines changed: 167 additions & 185 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)