Group 7

<!-- Main Component  ### FIRST FILE OF FRONT END --> 
<template>
    <div class="container">
        <!-- <button v-on:click="reload">Refresh</button> -->
        <br />

        <p />
        <div class="post">
            <h1 v-if="bookDetails[0].Type == 'BookList'">Book List</h1>
            <h1 v-if="bookDetails[0].Type == 'UserList'">Transaction List</h1>
            <button
                v-if="bookDetails[0].Type == 'UserList'"
                class="topright"
                v-on:click="reload()"
            >
                Back to Book List
            </button>
            <div
                class="post"
                v-for="details in bookDetails"
                v-bind:key="details.TransactionID"
            >
                <div class="bottomleft" v-if="details.Type == 'BookList'">
                    ISBN: {{ details.SerialNumber }}
                </div>

                <div class="bottomleft" v-else>
                    txnID: {{ details.TransactionID }}
                </div>

                <div class="bottomright" v-if="details.Type == 'BookList'">
                    Available: {{ details.NumberOfBook }}
                </div>
                <div class="bottomright" v-else>
                    ReturnDate: {{ details.ReturnDate.slice(0, 10) }}
                </div>

                <p class="title" v-if="details.Type == 'BookList'">
                    {{ details.BookTitle }}
                </p>
                <p class="title" v-else>ISBN: {{ details.SerialNumber }}</p>

                <div class="topleft" v-if="details.Type == 'BookList'">
                    Author: {{ details.Author }}
                </div>

                <div class="topright" v-else>
                    BorrowDate: {{ details.BorrowDate.slice(0, 10) }}
                </div>

                <div class="topleft" v-if="details.Type == 'UserList'">
                    Penalty: {{ details.Penalty }}php
                </div>
            </div>
        </div>

        <div class="borrow-post">
            <h2>Borrow</h2>
            <label for="borrow-post"></label>
            <input
                type="firstName"
                id="firstName"
                v-model="firstName"
                placeholder="First Name"
            />
            <input
                type="lastName"
                id="lastName"
                v-model="lastName"
                placeholder="Last Name"
            />
            <br />
            <input type="ISBN" id="ISBN" v-model="isbn" placeholder="ISBN" />
            <input
                type="Quantity"
                id="Quantity"
                v-model="quantity"
                placeholder="Quantity"
            />
            <br />
            <br />
            <button v-on:click="borrowPost()">BORROW BOOK</button>
        </div>

        <div class="status-post">
            <h2>txnStatus</h2>
            <label for="status-post"></label>
            <input
                type="firstName"
                id="firstName"
                v-model="firstName"
                placeholder="First Name"
            />
            <input
                type="lastName"
                id="lastName"
                v-model="lastName"
                placeholder="Last Name"
            />
            <br />
            <br />
            <button v-on:click="checkStatus()">CHECK STATUS</button>
        </div>

        <br />
        <hr />
        <p class="error" v-if="error">{{ error }}</p>
        <img
            class="memberList"
            src="../assets/memberList.png"
            alt="Girl in a jacket"
        />
    </div>
</template>

<script>
import PostService from "../PostService";

export default {
    name: "PostComponent",
    data() {
        return {
            bookDetails: [],
            error: "",
            text: "",
        };
    },
    async created() {
        try {
            this.bookDetails = await PostService.getPost(
                "BookList",
                "Arnieno",
                "Maraan"
            );
        } catch (err) {
            this.err = err.message;
        }
    },
    methods: {
        async borrowPost() {
            await PostService.borrowPost(
                (this.type = "Borrow"),
                this.firstName,
                this.lastName,
                this.isbn,
                this.quantity
            );
            this.bookDetails = await PostService.getPost(
                "BookList",
                "asd",
                "asd"
            );
            console.warn(this.bookDetails);
        },
        async checkStatus() {
            await PostService.getPost(
                this.type == "UserList",
                this.firstName,
                this.lastName
            );
            this.bookDetails = await PostService.getPost(
                "UserList",
                this.firstName,
                this.lastName
            );
        },
        async reload() {
            this.bookDetails = await PostService.getPost(
                "BookList",
                "asd",
                "asd"
            );
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div.container {
    max-width: 800px;
    margin: 0 auto;
}

p.error {
    border: 1px solid #ff5b5f;
    background-color: #ffc5c1;
    padding: 10px;
    margin-bottom: 15px;
}

div.post {
    position: relative;
    border: 1px solid #5bd658;
    background-color: #bcffb8;
    padding: 10px 10px 30px 10px;
    margin-bottom: 15px;
}

div.created-at {
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px 15px 5px 15px;
    background-color: darkgreen;
    color: white;
    font-size: 13px;
}

p.title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0;
}

.topright {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 18px;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
}

.bottomright {
    position: absolute;
    bottom: 8px;
    right: 16px;
    font-size: 18px;
}

.bottomleft {
    position: absolute;
    bottom: 8px;
    left: 16px;
    font-size: 18px;
}

.borrow-post {
    position: absolute;
    top: 150px;
    left: 220px;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.borrow-post h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
}

.status-post {
    position: absolute;
    bottom: 0px;
    left: 220px;
    width: 400px;
    padding: 40px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.status-post h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #fff;
    text-align: center;
}

.memberList {
    width: 50%;
    height: auto;
    margin-top: 100px;
}
</style>


<!-- App.vue  ######## SECOND FILE OF FRONT END-->
<template>
    <particles-bg type="tadpole" :bg="true" />
    <h1>Library System</h1>
    <img class="logo" alt="Vue logo" src="./assets/logo.png" />
    <PostComponent msg="Welcome to Your Vue.js App" />
</template>

<script>
import PostComponent from "./components/PostComponent.vue";
import { ParticlesBg } from "particles-bg-vue";

export default {
    name: "App",
    components: {
        PostComponent,
        ParticlesBg,
    },
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}

.logo {
    width: 25%;
    height: auto;
}
</style>