93 fix error message when server not available (#103)

* [Fix] #93, offline message improvement

* [Task] #93, removed background in status module when no data is present

* [Task] #61, add cut class to map for styling

* [Fix] #93 fix tests, be more specific on url, and let test fail non silently when csrf is not found

src/client/components/Status.tsx

@@ -50,7 +50,7 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 		<ul>
 			<li>datapoints: {entries.length - statusData.ignoredEntries}<i>({statusData.ignoredEntries})</i></li>
 			<li>Ø upload: {statusData.uploadMean}s </li>
-			<li>Ø speed: GPS: {statusData.speedGPSMean}km/h Calc: {statusData.speedCalcMean == "NaN" ? " - " : statusData.speedCalcMean	}km/h </li>
+			<li>Ø speed: GPS: {statusData.speedGPSMean}km/h Calc: {statusData.speedCalcMean == "NaN" ? " - " : statusData.speedCalcMean}km/h </li>
 			<li></li>
 		</ul>
 	)

src/client/css/start.css

@@ -57,6 +57,10 @@
 			position: relative;
 			z-index: 0;
 
+			&.emptyData::after {
+				content: none;
+			}
+
 			&::after {
 				content: "";
 				position: absolute;

src/client/pages/Start.tsx

@@ -144,9 +144,9 @@ function Start() {
           </Button>
         </div>
 
-        <div className="grid-item map"><Map entries={entries} /></div>
+        <div className="grid-item map cut"><Map entries={entries} /></div>
         <div className="grid-item theme"><ModeSwitcher /></div>
-        <div className="grid-item status cut-after"><Status entries={entries} /></div>
+        <div className={`grid-item status ${entries.length ? "cut-after" : 'emptyData'}`}><Status entries={entries} /></div>
         <div className="grid-item images">
           <div className="image">image1</div>
           <div className="image">image2</div>

src/tests/login.test.ts

@@ -25,7 +25,7 @@ describe('Login', () => {
     try {
       response = await axios({
         method: "post",
-        url: "/login/csrf",
+        url: "http://localhost:80/login/csrf",
         headers: { 
           "content-type": "application/x-www-form-urlencoded",
           "x-requested-with": "XMLHttpRequest"
@@ -34,6 +34,7 @@ describe('Login', () => {
       serverStatus = response.status;
     } catch (error) {
       console.error(error);
+      throw Error("fail");
     }
 
 
@@ -79,7 +80,8 @@ describe('Login', () => {
 
   it('test invalid credentials to return error', async () => {
     try {
-      userDataWithToken.csrfToken = csrfToken
+      userDataWithToken.csrfToken = csrfToken;
+      console.log("csrfToken %o", userDataWithToken.csrfToken);
       await axios.post('http://localhost:80/login', qs.stringify(userDataWithToken));
     } catch (error) {
       const axiosError = error as AxiosError;