ui coloring complete

anshu-krishna · anshu-krishna · commit 6d5285fb6e59 · 2022-01-27T15:16:12.000+05:30
diff --git a/example/client/component/api-fetch.js b/example/client/component/api-fetch.js
@@ -48,7 +48,10 @@ class APIFetch extends HTMLElement {
 				}
 				param = {...param, ...d};
 			}
-			this.#rcntr.innerHTML = JSON.stringify(await this.#api.fetchRaw(fname, param), null, 4);
+			let resp = await this.#api.fetchRaw(fname, param);
+			this.#rcntr.innerHTML = JSON.stringify(resp, null, 4);
+
+			this.#root.querySelector('#resp_cntr').style.background =  (resp.status === 0) ? '#4caf50' : '#f44336';
 			
 			let paramjson = JSON.stringify(param);
 			let hasparam = Object.entries(param).length === 0;
@@ -144,6 +147,7 @@ pre {
 #out_cntr > section {
 	box-shadow: 0 0 0.5em black;
 	padding: 0.5em 1em;
+	background: #e0f2f1;
 }
 </style><div id="cntr">
 	<header>API Function: <button id="fetch">Execute 🗘</button></header>

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,10 @@ class APIFetch extends HTMLElement {`
`48`	`48`	`}`
`49`	`49`	`param = {...param, ...d};`
`50`	`50`	`}`
`51`		`- this.#rcntr.innerHTML = JSON.stringify(await this.#api.fetchRaw(fname, param), null, 4);`
	`51`	`+ let resp = await this.#api.fetchRaw(fname, param);`
	`52`	`+ this.#rcntr.innerHTML = JSON.stringify(resp, null, 4);`
	`53`	`+`
	`54`	`+ this.#root.querySelector('#resp_cntr').style.background = (resp.status === 0) ? '#4caf50' : '#f44336';`
`52`	`55`
`53`	`56`	`let paramjson = JSON.stringify(param);`
`54`	`57`	`let hasparam = Object.entries(param).length === 0;`
`@@ -144,6 +147,7 @@ pre {`
`144`	`147`	`#out_cntr > section {`
`145`	`148`	`box-shadow: 0 0 0.5em black;`
`146`	`149`	`padding: 0.5em 1em;`
	`150`	`+ background: #e0f2f1;`
`147`	`151`	`}`
`148`	`152`	`</style><div id="cntr">`
`149`	`153`	`<header>API Function: <button id="fetch">Execute 🗘</button></header>`