Commit b84af512 authored by lueyuw's avatar lueyuw
Browse files

final version 1.0

parents aedd77eb 13e400ca
# icu-diary-3
# vue-admin-template
> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint
**Live demo:** http://panjiachen.github.io/vue-admin-template
**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`**
## Build Setup
```bash
# clone the project
git clone https://github.com/PanJiaChen/vue-admin-template.git
# enter the project directory
cd vue-admin-template
# install dependency
# Build Setup (frontend)
```
npm install
# develop
npm run dev
```
This will automatically open http://localhost:9528
## Build
```bash
# build for test environment
npm run build:stage
# build for production environment
npm run build:prod
# Running the backend server (open a new terminal tab)
```
# make sure postgresql is downloaded, command is below if needed
brew install postgresql
# if database update is needed for mac
brew postgresql-upgrade-database
## Advanced
# make sure postgresql is running for mac
brew services restart postgresql
```bash
# preview the release environment effect
npm run preview
# use db script to create database
./bin/db create
# preview the release environment effect + static resource analysis
npm run preview -- --report
# use db script to reset database if needed
./bin/db reset
# code format check
npm run lint
# code format check and auto fix
npm run lint -- --fix
# make sure to have a virtual environment before running
python backend/app.py
```
Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information
## Demo
![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
## Extra
If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
## Related Project
- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
## Browsers support
Modern browsers and Internet Explorer 10+.
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
| --------- | --------- | --------- | --------- |
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
# User types
You can create a new account of any type (Clinician, Patient, Family&Friends) using "Create Account" for testing/debugging.
......@@ -151,15 +151,16 @@ def validate_login():
return jsonify(False)
@ app.route('/message', methods=["POST"])
@ app.route('/vue-admin-template/user/form', methods=["POST"])
def send_messages():
"""Send messages to different users."""
connection = get_db()
message = flask.request.json["form"]["message"]
# add into database somehow
file_list = flask.request.json["form"]["fileList"]
sender = flask.session["username"]
receiver = flask.request.json["receiver"]
data = request.get_json()
message = data["message"]
# file_list = data["form"]["fileList"]
sender = data["username"]
receiver = data["receiver"]
connection.execute(
"INSERT INTO messages (?, ?, ?)",
......@@ -169,7 +170,7 @@ def send_messages():
return
@ app.route('/message', methods=["GET"])
@ app.route('/vue-admin-template/user/form', methods=["GET"])
def receive_messages():
"""Receive messages from different messages."""
connection = get_db()
......@@ -186,7 +187,9 @@ def receive_messages():
for message in messages:
m = {
"message": message["text"],
"fileList": [message["filename"]]
"fileList": [message["filename"]],
"sender": message["sender"],
"receiver": message["receiver"]
}
return_messages.append(m)
context = {
......
{"username": ""}
\ No newline at end of file
{"username": "gmail@gmail.com", "userType": "Family&Friends"}
\ No newline at end of file
......@@ -4,41 +4,70 @@
style="width: 100%"
:cell-style="tableColor"
:header-cell-style="headerColor"
@row-clicked="rowClickHandler"
>
<el-table-column prop="display_pic_url" label="Display Pic">
<template slot-scope="scope">
<img style="width: 90px; height: 90px" :src="scope.row.display_pic_url"/>
</template>
</el-table-column>
<el-table-column prop="name" label="Name" width="180" sortable> </el-table-column>
<el-table-column prop="date_admitted" label="Date Admitted" width="180" sortable>
</el-table-column>
<el-table-column prop="address" label="Address"> </el-table-column>
<el-table-column prop="address" width="300" label="Address"> </el-table-column>
<el-table-column prop="famiy_admin" label="Family Admin"> </el-table-column>
<el-table-column prop="relation" label="Relation"> </el-table-column>
<el-table-column
label="Operations">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleViewFeed(scope.$index, scope.row)">View Feed</el-button>
<el-button
size="mini"
type="info"
@click="handleNewMessage(scope.$index, scope.row)">New Message</el-button>
</template>
</el-table-column>
</el-table>
</template>
<style>
.clickable-rows {
tbody tr td {
cursor: pointer;
}
.el-table__expanded-cell {
cursor: default;
}
}
</style>
<script>
export default {
data() {
return {
tableData: [
{
display_pic_url: 'https://image.freepik.com/free-photo/portrait-american-woman_53876-34038.jpg',
name: "Aleeza White",
date_admitted: "10/1/2021",
address: "416 W Huron St., Ann Arbor",
famiy_admin: "Joe White",
relation: "Father",
},
{
display_pic_url: 'https://image.freepik.com/free-photo/smiley-senior-man-nursing-home-holding-smartphone_23-2148740000.jpg',
name: "Ronald Fox",
date_admitted: "10/3/2021",
address: "2602 Lakeland Terrace, Ann Arbor",
famiy_admin: "Alice Fox",
relation: "Spouse",
},
{
display_pic_url: 'https://image.freepik.com/free-photo/worldface-spanish-guy-white-background_53876-137665.jpg',
name: "Mark K. Watson",
date_admitted: "10/6/2021",
address: "1578 Forest Avenue, Ann Arbor",
famiy_admin: "Kate Peterson",
relation: "Sibling",
},
],
};
......@@ -52,6 +81,12 @@ export default {
return "background-color: rgba(80, 115, 173, 0.5); color: white;";
}
},
handleViewFeed($index, row) {
this.$router.push({path: '/blog/blog'});
},
handleNewMessage($index, row) {
this.$router.push({path: '/form/index'});
}
},
};
</script>
<template>
<div class="app-container">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="Message:">
<el-input v-model="form.desc" type="textarea" />
<div id="app">
<el-card class="box-card" style="width:700px;margin:auto;">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="To:">
<el-input v-model="form.receiver" type="textbox" placeholder="Patient's email"/>
</el-form-item>
<el-form-item label="Upload Media">
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
accept="image/jpeg,image/png,text/plain, application/pdf"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:auto-upload="false"
:before-upload="handleUploadbefore"
:file-list="fileList"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">Drop file here or <em>click to upload (PDF, JPEG, PNG) </em></div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
<el-button @click="onCancel">Cancel</el-button>
</el-form-item>
</el-form>
<el-form-item label="Message:">
<el-input v-model="form.desc" type="textarea" />
</el-form-item>
<el-form-item label="Upload Media">
<el-upload
class="upload-demo"
drag
action="https://jsonplaceholder.typicode.com/posts/"
accept="image/jpeg,image/png,text/plain, application/pdf"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:auto-upload="false"
:before-upload="handleUploadbefore"
:file-list="fileList"
list-type="picture">
<i class="el-icon-upload"></i>
<div class="el-upload__text">Drop file here or <em>click to upload (PDF, JPEG, PNG) </em></div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
<el-button @click="onCancel">Cancel</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
......@@ -37,12 +44,34 @@ export default {
form: {
message: '',
fileList: [],
receiver: '',
}
}
},
methods: {
onSubmit() {
this.$message('submit!')
sender_username = localStorage.getItem('username');
let data = {
username: sender_username,
receiver: this.receiver,
message: this.message,
};
fetchAdd(data, "vue-admin-template/user/form")
.then((response) => {
if (response.message === false) {
this.$alert("Please enter a valid receiver.");
} else {
this.$alert("Message Sent!");
}
})
.catch(() => {
this.$notify({
title: "Failure",
message: "Error occurred. Please try again.",
type: "info",
duration: 2000,
});
});
},
onCancel() {
this.$message({
......@@ -76,5 +105,18 @@ export default {
line-height: 18x;
}
}
body {
margin: 0px;
}
#app {
position: relative;
width: 100%;
height: 75vh;
display:flex;
justify-content: center;
align-items: center;
}
</style>
......@@ -97,7 +97,7 @@
label-width="200px"
style="width: 400px; margin-left: 50px"
>
<el-form-item label="Username (email)" prop="username">
<el-form-item label="Email Address" prop="username">
<el-input v-model="resetInfo.username" />
</el-form-item>
<el-form-item
......@@ -155,7 +155,11 @@
label-width="200px"
style="width: 400px; margin-left: 50px"
>
<el-form-item label="Username" prop="username">
<el-form-item label="Full Name" prop="fullname">
<el-input v-model="newAccount.fullname" />
</el-form-item>
<el-form-item label="Email Address" prop="username">
<el-input v-model="newAccount.username" />
</el-form-item>
<el-form-item
......@@ -213,6 +217,10 @@ export default {
// } else {
// callback();
// }
if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value)))
{
callback(new Error("Please enter a valid email"));
}
callback();
};
const validatePassword = (rule, value, callback) => {
......@@ -235,6 +243,9 @@ export default {
password: "",
},
loginRules: {
fullname: [
{ required: true, trigger: "blur"},
],
username: [
{ required: true, trigger: "blur", validator: validateUsername },
],
......@@ -324,19 +335,9 @@ export default {
fetchAdd(data, "create")
.then((response) => {
if (response.data === false) {
this.$notify({
title: "Failure",
message: "Username is occupied. Please try with another.",
type: "info",
duration: 2000,
});
this.$alert("Username is occupied. Please try with another.");
} else {
this.$notify({
title: "Success",
message: "Create Account Successfully",
type: "success",
duration: 2000,
});
this.$alert("Created Account Successfully!");
}
})
.catch(() => {
......
Supports Markdown
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