diff --git a/web/src/views/analyze_sleep/waiting_for_server/index.js b/web/src/views/analyze_sleep/waiting_for_server/index.js index 4a5a1854..109df4cc 100644 --- a/web/src/views/analyze_sleep/waiting_for_server/index.js +++ b/web/src/views/analyze_sleep/waiting_for_server/index.js @@ -1,7 +1,9 @@ import React, { useEffect, useState } from 'react'; -import { Container, Row, Col, Spinner } from 'reactstrap'; +import { Container, Row, Col, Alert, ListGroup, ListGroupItem } from 'reactstrap'; + import { getLatestServerReleaseAssets } from 'requests/latest_release'; -import { ListGroup, ListGroupItem } from 'reactstrap'; + +import './style.css'; const WaitingForServer = () => { const [assets, setAssets] = useState([]); @@ -11,27 +13,32 @@ const WaitingForServer = () => { }, [setAssets]); return ( - -

Waiting for local server to be running...

+ + + + Waiting for local server to be running + -

Download latest server release

+

Download latest server release

- - + +

+ In order to upload your sleep file, we ask you to install our local server. This server will proceed to the + preprocessing, feature extraction and classification of your sleep EEG. Your data is processed locally since + we, at PolyCortex, believe that you should have full control over your data and its privacy. +

+ + + {assets.map((asset) => ( - {asset.name} + + {asset.name} ))}
- - - - - -
); }; diff --git a/web/src/views/analyze_sleep/waiting_for_server/style.css b/web/src/views/analyze_sleep/waiting_for_server/style.css new file mode 100644 index 00000000..8fdf829b --- /dev/null +++ b/web/src/views/analyze_sleep/waiting_for_server/style.css @@ -0,0 +1,23 @@ +.waiting_alert__text:after { + content: ' .'; + animation: dots 1s steps(5, end) infinite; +} + +@keyframes dots { + 0%, + 20% { + color: rgba(0, 0, 0, 0); + text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0); + } + 40% { + color: white; + text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0); + } + 60% { + text-shadow: 0.25em 0 0 white, 0.5em 0 0 rgba(0, 0, 0, 0); + } + 80%, + 100% { + text-shadow: 0.25em 0 0 white, 0.5em 0 0 white; + } +}