post rules

package-lock.json

@@ -22,7 +22,8 @@
         "vite": "^5.2.10",
         "vue": "^3.4.25",
         "vue-navigation-bar": "^6.1.0",
-        "vue-router": "^4.3.2"
+        "vue-router": "^4.3.2",
+        "vue-sweetalert2": "^5.0.5"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -35,6 +36,7 @@
         "sass": "^1.75.0",
         "sass-loader": "^14.2.1",
         "style-loader": "^4.0.0",
+        "sweetalert2": "^11.10.8",
         "tailwindcss": "^3.4.3",
         "unplugin-auto-import": "^0.16.1",
         "unplugin-vue-components": "^0.25.2",
@@ -12386,6 +12388,15 @@
         "node": ">= 10"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.10.8",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.8.tgz",
+      "integrity": "sha512-oAkYROBfXBY+4sVbQEIcN+ZxAx69lsmz5WEBwdEpyS4m59vOBNlRU5/fJpAI1MVfiDwFZiGwVzB/KBpOyfLNtg==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/table": {
       "version": "6.8.2",
       "resolved": "https://registry.npmmirror.com/table/-/table-6.8.2.tgz",
@@ -13317,6 +13328,17 @@
       "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
       "dev": true
     },
+    "node_modules/vue-sweetalert2": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.5.tgz",
+      "integrity": "sha512-Q7+TjQxNwGruT2jfPaSKMz18HHWs81r4umEwlrrtOf/QL5Iwl1T+tUaNkcvKB7Rf9rYftubt7NnOMjfDMnDH3A==",
+      "dependencies": {
+        "sweetalert2": "11.x"
+      },
+      "peerDependencies": {
+        "vue": "*"
+      }
+    },
     "node_modules/vue-template-compiler": {
       "version": "2.7.16",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz",

package.json

@@ -22,7 +22,8 @@
     "vite": "^5.2.10",
     "vue": "^3.4.25",
     "vue-navigation-bar": "^6.1.0",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.2",
+    "vue-sweetalert2": "^5.0.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -35,6 +36,7 @@
     "sass": "^1.75.0",
     "sass-loader": "^14.2.1",
     "style-loader": "^4.0.0",
+    "sweetalert2": "^11.10.8",
     "tailwindcss": "^3.4.3",
     "unplugin-auto-import": "^0.16.1",
     "unplugin-vue-components": "^0.25.2",

src/components/Criteria.vue

@@ -62,7 +62,23 @@ export default {
       this.allFormData[index] = data; // Update the specific form's data
     },
     submit() {
-      console.log('All form data:', this.allFormData[0].attribute);
+      console.log('All form data:', this.allFormData);
+      const requestOptions = {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ "data": this.allFormData })
+      };
+    fetch('http://192.168.88.238:8080/api/v1/rules', requestOptions)
+    .then(response => response.json())
+    .then(data => {
+      this.$swal({
+        position: "top-end",
+        icon: "success",
+        title: "Your work has been saved",
+        showConfirmButton: false,
+        timer: 1000
+      })
+    });
       // Here you can handle all the data, such as sending it to a server
     },
 

src/main.js

@@ -2,6 +2,9 @@ import {  createApp } from 'vue'
 //in your `main.js` file
 import 'bootstrap/dist/css/bootstrap.min.css'
 import '@coreui/coreui/dist/css/coreui.min.css'
+import VueSweetalert2 from 'vue-sweetalert2';
+import 'sweetalert2/dist/sweetalert2.min.css';
+
 import CoreuiVue from '@coreui/vue';
 import App from './App.vue'
 import { CIcon } from '@coreui/icons-vue';
@@ -31,4 +34,5 @@ const app = createApp(App)
 app.provide('icons', icon)
 app.component('CIcon', CIcon)
 app.use(router);
+app.use(VueSweetalert2);
 app.use(CoreuiVue).mount('#app')