152 lines
4.0 KiB
Vue
152 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import axios from 'axios'; // The HTTP library, not a part of Vue
|
|
|
|
const route = useRoute();
|
|
const suppliedId: number = Number(route.params.id);
|
|
|
|
interface Member {
|
|
id: number;
|
|
ntnuUsername: string;
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string;
|
|
balance: number;
|
|
imagePreference: string;
|
|
}
|
|
|
|
let member = ref<Member>({
|
|
id: 1,
|
|
ntnuUsername: ' ',
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
balance: 0,
|
|
imagePreference: ''
|
|
});
|
|
|
|
const getMemberInfo = async (id: number) => {
|
|
try {
|
|
const url = "http://127.0.0.1:8000/member/" + id;
|
|
const response = await axios.get(url);
|
|
member.value = response.data;
|
|
} catch (error) {
|
|
console.error("Error fetching data: ", error);
|
|
}
|
|
}
|
|
|
|
const updateMemberInfo = async (id: number) => {
|
|
try {
|
|
const payload = {
|
|
ntnuUsername: member.value.ntnuUsername,
|
|
firstName: member.value.firstName,
|
|
lastName: member.value.lastName,
|
|
email: member.value.email
|
|
};
|
|
const url = "http://127.0.0.1:8000/member/" + id;
|
|
|
|
const config = {
|
|
method: 'put',
|
|
url: url,
|
|
data: payload
|
|
};
|
|
|
|
const response = await axios(config);
|
|
// The return value is the user data so we map it
|
|
member.value = response.data;
|
|
} catch (error) {
|
|
console.error("Error updating user data: ", error);
|
|
}
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await getMemberInfo(suppliedId);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="member-edit">
|
|
|
|
<h3>{{ member.firstName + " " + member.lastName + " : " + member.id }}</h3>
|
|
<form @submit.prevent>
|
|
<label for="fname">NTNU username</label><br>
|
|
<input type="text" id="ntnu-username" v-model="member.ntnuUsername"><br>
|
|
|
|
<label for="fname">First name</label><br>
|
|
<input type="text" id="first-name" v-model="member.firstName"><br>
|
|
|
|
<label for="fname">Last name</label><br>
|
|
<input type="text" id="last-name" v-model="member.lastName"><br>
|
|
|
|
<label for="fname">E-mail</label><br>
|
|
<input type="text" id="email" v-model="member.email"><br>
|
|
|
|
<button type="button" @click.prevent="updateMemberInfo(member.id)">Save</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.member-edit {
|
|
max-width: 1200px; /* Width of the form */
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background-color: #282828;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.member-edit h3 {
|
|
text-align: center;
|
|
color: #fff;
|
|
margin-bottom: 30px; /* Increased bottom margin for the heading */
|
|
}
|
|
|
|
.member-edit form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px; /* Increased gap between form elements */
|
|
}
|
|
|
|
.member-edit label {
|
|
color: #ddd;
|
|
font-size: 16px;
|
|
text-align: left; /* Left-aligned text */
|
|
margin-top: 4px;
|
|
margin-bottom: 0px; /* Slightly reduced bottom margin for labels */
|
|
}
|
|
|
|
.member-edit input[type="text"] {
|
|
width: 100%;
|
|
padding: 8px 8px 8px 8px; /* Increased vertical padding for input fields */
|
|
border: 1px solid #555;
|
|
background-color: #333;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
margin-bottom: 10px; /* Increased bottom margin for input fields */
|
|
}
|
|
|
|
.member-edit button {
|
|
background-color: #CBA135;
|
|
color: white;
|
|
padding: 8px; /* Increased vertical padding for the button */
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.member-edit button:hover {
|
|
background-color: #A7801A;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.member-edit {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
</style>
|