Skip to content

GitLab

Commit 00686ee2 authored by Omar Elkadi's avatar Omar Elkadi
Browse files

add Alert popup

parent 293c1a05
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 00686ee2
......@@ -15,10 +15,13 @@
"jquery": "^3.6.0",
"popper.js": "^1.16.1",
"sass-loader": "^10.1.1",
"sweetalert2": "^11.0.16",
"vue": "^3.0.11",
"vue-router": "^4.0.6"
"vue-router": "^4.0.6",
"vue-sweetalert2": "^4.3.1"
},
"devDependencies": {
"@types/jquery": "^3.5.5",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
......@@ -1549,6 +1552,15 @@
"@types/node": "*"
}
},
"node_modules/@types/jquery": {
"version": "3.5.5",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz",
"integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==",
"dev": true,
"dependencies": {
"@types/sizzle": "*"
}
},
"node_modules/@types/json-schema": {
"version": "7.0.7",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
......@@ -1618,6 +1630,12 @@
"@types/node": "*"
}
},
"node_modules/@types/sizzle": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
"integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
"dev": true
},
"node_modules/@types/source-list-map": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
......@@ -14104,6 +14122,14 @@
"node": ">=4.0.0"
}
},
"node_modules/sweetalert2": {
"version": "11.0.16",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.0.16.tgz",
"integrity": "sha512-9XStCZJMQpLQBAT/jr/4qZuA5Xwoupi/x5FagZYM1qGnyRqYecaJTPD1Cb5gc7G+9B5muH/JaDaBQGrvLpCmvQ==",
"funding": {
"url": "https://sweetalert2.github.io/#donations"
}
},
"node_modules/table": {
"version": "5.4.6",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
......@@ -15280,6 +15306,25 @@
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
"dev": true
},
"node_modules/vue-sweetalert2": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-4.3.1.tgz",
"integrity": "sha512-4ZsCpBupG9Q6RJsJ4z/+VkXp0+u5nWz9Z+TcsBU7sS7T47E/ZN3kZSwpCV1F+GdVzurYDcXNcKiwjQ3g7uXzqw==",
"dependencies": {
"sweetalert2": "10.x"
},
"peerDependencies": {
"vue": "*"
}
},
"node_modules/vue-sweetalert2/node_modules/sweetalert2": {
"version": "10.16.9",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-10.16.9.tgz",
"integrity": "sha512-oNe+md5tmmS3fGfVHa7gVPlun7Td2oANSacnZCeghnrr3OHBi6UPVPU+GFrymwaDqwQspACilLRmRnM7aTjNPA==",
"funding": {
"url": "https://sweetalert2.github.io/#donations"
}
},
"node_modules/vue-template-es2015-compiler": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
......@@ -17778,6 +17823,15 @@
"@types/node": "*"
}
},
"@types/jquery": {
"version": "3.5.5",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz",
"integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==",
"dev": true,
"requires": {
"@types/sizzle": "*"
}
},
"@types/json-schema": {
"version": "7.0.7",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
......@@ -17847,6 +17901,12 @@
"@types/node": "*"
}
},
"@types/sizzle": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
"integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==",
"dev": true
},
"@types/source-list-map": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
......@@ -27877,6 +27937,11 @@
"util.promisify": "~1.0.0"
}
},
"sweetalert2": {
"version": "11.0.16",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.0.16.tgz",
"integrity": "sha512-9XStCZJMQpLQBAT/jr/4qZuA5Xwoupi/x5FagZYM1qGnyRqYecaJTPD1Cb5gc7G+9B5muH/JaDaBQGrvLpCmvQ=="
},
"table": {
"version": "5.4.6",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
......@@ -28816,6 +28881,21 @@
}
}
},
"vue-sweetalert2": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-4.3.1.tgz",
"integrity": "sha512-4ZsCpBupG9Q6RJsJ4z/+VkXp0+u5nWz9Z+TcsBU7sS7T47E/ZN3kZSwpCV1F+GdVzurYDcXNcKiwjQ3g7uXzqw==",
"requires": {
"sweetalert2": "10.x"
},
"dependencies": {
"sweetalert2": {
"version": "10.16.9",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-10.16.9.tgz",
"integrity": "sha512-oNe+md5tmmS3fGfVHa7gVPlun7Td2oANSacnZCeghnrr3OHBi6UPVPU+GFrymwaDqwQspACilLRmRnM7aTjNPA=="
}
}
},
"vue-template-es2015-compiler": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
server/src/routes/patientRoutes.ts
View file @ 00686ee2
......@@ -6,73 +6,67 @@ import { extname } from "path";
//import * as bodyParser from "body-parser"; // not necessary, since body-parser is part of NodeJS
export class patientRoutes {
router: Router;
router: Router
constructor() {
this.router = Router();
this.routes();
}
routes() {
constructor() {
this.router = Router();
this.routes();
}
// configure a multer Storage path (folder + filename)
var storage = multer.diskStorage({
destination: function (req, file, cb) {
//uploads is the folder name
cb(null, "uploads");
},
filename: function (req, file, cb) {
var patientStudent = JSON.parse(req.body.patientStudent);
cb(
null,
patientStudent.MatrikelNumber + extname(file.originalname)
);
}
});
//create upload instance (will recive the file and the body from request)
var upload = multer({ storage: storage });
console.log("patient routes");
routes() {
// configure a multer Storage path (folder + filename)
var storage = multer.diskStorage({
destination: function (req, file, cb) {
//uploads is the folder name
cb(null, "uploads");
},
filename: function (req, file, cb) {
var patientStudent = JSON.parse(req.body.patientStudent);
cb(null, patientStudent.MatrikelNumber + extname(file.originalname));
}
});
//create upload instance (will recive the file and the body from request)
var upload = multer({ storage: storage });
// recives the file from request -> the name of the file in the single() must be the same on the client side in FormData
this.router.post("/ppatient", upload.single('sickNoteEvidence') , this.post);
this.router.get("/patient", this.get);
}
// recives the file from request -> the name of the file in the single() must be the same on the client side in FormData
this.router.post("/ppatient", upload.single("sickNoteEvidence"), this.post);
get(req: Request, res: Response) {
let vn = req.query.vorname;
console.log(vn);
this.router.get("/patient", this.get);
}
res.status(200).send("Vorname: " + vn);
}
get(req: Request, res: Response) {
let vn = req.query.vorname;
console.log(vn);
post(req: Request, res: Response) {
res.status(200).send("Vorname: " + vn);
}
//recived the body as a stringified JOSN
var body = req.body; // response body
// parse JSON to Objects
var patientStudent = JSON.parse(body.patientStudent)
var sickNote = JSON.parse(body.sickNoteData);
post(req: Request, res: Response) {
//recived the body as a stringified JOSN
var body = req.body; // response body
var sicknessReport = {
patientStudent,
sickNote
}
const file = req.file;
if (!file) {
console.log("not file error")
}
// parse JSON to Objects
var patientStudent = JSON.parse(body.patientStudent);
var sickNote = JSON.parse(body.sickNoteData);
res.status(200).send("the body and the file are recived" + JSON.stringify(body))
var sicknessReport = {
patientStudent,
sickNote
};
const file = req.file;
if (!file) {
console.log("not file error");
}
const path = './public/'+ 'sickNoteReport'+ patientStudent.MatrikelNumber+ '.json'
writeFile(path, JSON.stringify(sicknessReport), function(err) {
if (err) return console.log(err);
else return console.log("file generated in path: " + path);
});
res
.status(200)
.send("the body and the file are recived" + JSON.stringify(body));
}
const path = "./uploads/reports/" + patientStudent.MatrikelNumber + ".json";
}
\ No newline at end of file
writeFile(path, JSON.stringify(sicknessReport), function (err) {
if (err) return console.log(err);
else return console.log("file generated in path: " + path);
});
}
}
src/main.js
View file @ 00686ee2
import { createApp } from 'vue'
import App from './App.vue'
import VueSweetalert2 from 'vue-sweetalert2'
import 'sweetalert2/dist/sweetalert2.min.css'
// add routing script to the main
import router from './router'
createApp(App).use(router).mount('#app')
createApp(App).use(VueSweetalert2).use(router).mount('#app')
src/views/SickForm.vue
View file @ 00686ee2
......@@ -4,6 +4,7 @@
@submit.prevent="OnSubmit"
enctype="multipart/form-data"
>
<div class="form-row">
<div class="form-group col-md-5">
<label for="fname">Vorname</label>
......@@ -131,6 +132,7 @@
<script lang="ts">
import axios from 'axios'
import Swal from 'sweetalert2/dist/sweetalert2.js'
export default {
data () {
......@@ -404,17 +406,50 @@ export default {
},
methods: {
handleFileUpload () {
this.EvidenceFile = this.$refs.file.files[0]
// get the file from tag
const file = this.$refs.file.files[0]
// check the file validation (extention and size)
const allowedExtentions = ['jpg', 'pdf', 'png', 'jpeg']
const sizeLimit = 2000000 // 2 megabyte
const fileExtension = file.name.split('.').pop()
console.log(fileExtension)
if (!allowedExtentions.includes(fileExtension)) { // extention validation
this.$refs.file.value = null
Swal.fire({
title: 'Fehler!',
text: 'Die Datei muss jpg, jpeg, png oder pdf',
icon: 'error'
})
} else if (file.size > sizeLimit) { // size validation
this.$refs.file.value = null
Swal.fire({
title: 'Fehler!',
text: 'Die Datei ist zu Groß',
icon: 'error'
}
)
} else { // if valid then load the file in our valiable
Swal.fire({
title: 'Super!',
text: 'Die Datei wurde erfolgreich geladen',
icon: 'success'
})
this.EvidenceFile = file
}
},
async OnSubmit () {
async OnSubmit (event) {
var formData = new FormData()
// prepare and bulid the messege
// FormData is a dictionary type -> (key , value)
formData.append('patientStudent', JSON.stringify(this.patientStudent))
formData.append('sickNoteData', JSON.stringify(this.SickNote))
// add file to the message body
formData.append('sickNoteEvidence', this.EvidenceFile)
// perform the post request
var res = await axios.post('http://localhost:3000/ppatient', formData,
{
headers: {
......@@ -424,7 +459,8 @@ export default {
const data = res.data
console.log(data)
alert('submitted')
Swal.fire('Danke! Das Formular wurde schon gesandet')
event.target.reset()
}
}
}
......
tsconfig.json
View file @ 00686ee2
......@@ -5,7 +5,7 @@
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"target": "es",
"target": "es6",
"sourceMap": true,
"allowJs": true
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment