MG-10 - Scripts management (#14)

* add validation errors to js Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * add users scripts to javascript file Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * update things, channels and groups Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * update entity dependency templates Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * update formatting to 2 spaces Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * update js formatting Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * update bootstrap Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * split javascript files Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * update endpoints returns Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * add clipboard js file Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> * remove unused param Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com> --------- Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>
absmach · Nov 29, 2023 · 512485f · 512485f
1 parent 944914b
commit 512485f
Show file tree

Hide file tree

Showing 40 changed files with 6,657 additions and 8,904 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,20 +1,15 @@
 {
-  "plugins": [
-    "prettier-plugin-go-template"
-  ],
+  "plugins": ["prettier-plugin-go-template"],
   "overrides": [
     {
-      "files": [
-        "*.html"
-      ],
+      "files": ["*.html"],
       "options": {
         "parser": "go-template"
       }
     }
   ],
   "goTemplateBracketSpacing": true,
-  "useTabs": true,
-  "printWidth": 80,
+  "printWidth": 100,
   "semi": true,
   "tabWidth": 2,
   "jsxSingleQuote": false,

diff --git a/ui/api/endpoint.go b/ui/api/endpoint.go
@@ -273,8 +273,7 @@ func createUserEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": usersAPIEndpoint},
+			code: http.StatusCreated,
 		}, nil
 	}
 }
@@ -291,8 +290,7 @@ func createUsersEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": usersAPIEndpoint},
+			code: http.StatusCreated,
 		}, nil
 	}
 }
@@ -353,8 +351,7 @@ func updateUserEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": usersAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -375,8 +372,7 @@ func updateUserTagsEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": usersAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -400,8 +396,7 @@ func updateUserIdentityEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": usersAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -712,8 +707,7 @@ func createThingEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": thingsAPIEndpoint},
+			code: http.StatusCreated,
 		}, nil
 	}
 }
@@ -730,8 +724,7 @@ func createThingsEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": thingsAPIEndpoint},
+			code: http.StatusCreated,
 		}, nil
 	}
 }
@@ -792,8 +785,7 @@ func updateThingEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": thingsAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -814,8 +806,7 @@ func updateThingTagsEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": thingsAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -832,8 +823,7 @@ func updateThingSecretEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": thingsAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -854,8 +844,7 @@ func updateThingOwnerEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": thingsAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -1003,8 +992,7 @@ func createChannelEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": channelsAPIEndpoint},
+			code: http.StatusCreated,
 		}, nil
 	}
 }
@@ -1021,8 +1009,7 @@ func createChannelsEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": channelsAPIEndpoint},
+			code: http.StatusCreated,
 		}, nil
 	}
 }
@@ -1084,8 +1071,7 @@ func updateChannelEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": channelsAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -1257,8 +1243,7 @@ func createGroupEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": groupsAPIEndpoint},
+			code: http.StatusCreated,
 		}, nil
 	}
 }
@@ -1275,8 +1260,7 @@ func createGroupsEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": groupsAPIEndpoint},
+			code: http.StatusCreated,
 		}, nil
 	}
 }
@@ -1338,8 +1322,7 @@ func updateGroupEndpoint(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": groupsAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -1547,8 +1530,7 @@ func updateBootstrap(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": bootstrapAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -1569,8 +1551,7 @@ func updateBootstrapConnections(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": bootstrapAPIEndpoint + "/" + req.id},
+			code: http.StatusOK,
 		}, nil
 	}
 }
@@ -1593,8 +1574,7 @@ func updateBootstrapCerts(svc ui.Service) endpoint.Endpoint {
 		}
 
 		return uiRes{
-			code:    http.StatusSeeOther,
-			headers: map[string]string{"Location": bootstrapAPIEndpoint + "/" + req.thingID},
+			code: http.StatusOK,
 		}, nil
 	}
 }

diff --git a/ui/web/static/js/clipboard.js b/ui/web/static/js/clipboard.js
@@ -3,21 +3,21 @@
 
 //function to copy the ID to the clipboard
 function copyToClipboard(button) {
-	var clientIDElement = button.previousElementSibling.firstChild;
-	var clientId = clientIDElement.textContent;
+  var clientIDElement = button.previousElementSibling.firstChild;
+  var clientId = clientIDElement.textContent;
 
-	navigator.clipboard.writeText(clientId).then(
-		function () {
-			//change the copy icon to indicate success
-			button.innerHTML = `<i class="fas fa-check success-icon">`;
-			setTimeout(function () {
-				//revert the copy icon after a short delay
-				button.innerHTML = `<i class ="far fa-copy">`;
-			}, 1000);
-		},
-		function (error) {
-			//handle error
-			console.error("failed to copy to clipboard: ", error);
-		},
-	);
+  navigator.clipboard.writeText(clientId).then(
+    function () {
+      //change the copy icon to indicate success
+      button.innerHTML = `<i class="fas fa-check success-icon">`;
+      setTimeout(function () {
+        //revert the copy icon after a short delay
+        button.innerHTML = `<i class ="far fa-copy">`;
+      }, 1000);
+    },
+    function (error) {
+      //handle error
+      console.error("failed to copy to clipboard: ", error);
+    },
+  );
 }
diff --git a/ui/web/static/js/errors.js b/ui/web/static/js/errors.js
@@ -0,0 +1,13 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+export function displayErrorMessage(errorMessage, divName) {
+  const errorDiv = document.getElementById(divName);
+  errorDiv.style.display = "block";
+  errorDiv.innerHTML = errorMessage;
+}
+
+export function removeErrorMessage(divName) {
+  const errorDiv = document.getElementById(divName);
+  errorDiv.style.display = "none";
+}
diff --git a/ui/web/static/js/forms.js b/ui/web/static/js/forms.js
@@ -0,0 +1,63 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+// config parameters are: formId, url, alertDiv, modal
+export function submitCreateForm(config) {
+  const form = document.getElementById(config.formId);
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    const formData = new FormData(form);
+
+    fetch(config.url, {
+      method: "POST",
+      body: formData,
+    })
+      .then(function (response) {
+        switch (response.status) {
+          case 409:
+            showAlert("entity already exists!", config.alertDiv);
+            break;
+          case 400:
+            showAlert("invalid file contents!", config.alertDiv);
+            break;
+          case 415:
+            showAlert("invalid file type!", config.alertDiv);
+            break;
+          default:
+            form.reset();
+            config.modal.hide();
+            window.location.reload();
+        }
+      })
+      .catch((error) => {
+        console.error("error submitting form: ", error);
+      });
+  });
+}
+
+export function submitUpdateForm(config) {
+  fetch(config.url, {
+    method: "POST",
+    body: JSON.stringify(config.data),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  }).then((response) => {
+    switch (response.status) {
+      case 409:
+        showAlert("entity already exists!", config.alertDiv);
+        break;
+      default:
+        window.location.reload();
+    }
+  });
+}
+
+function showAlert(errorMessage, alertDiv) {
+  const alert = document.getElementById(alertDiv);
+  alert.innerHTML = `
+	<div class="alert alert-danger alert-dismissable fade show d-flex flex-row justify-content-between" role="alert">
+	  <div>${errorMessage}</div>
+	  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
+	</div> `;
+}