Переписал приложение на Vue. Изменена верстка.

6 files changed, 501 insertions, 0 deletions

diff --git a/day9/task5_vue/src/App.vue b/day9/task5_vue/src/App.vue
new file mode 100644
index 0000000..3ce2035
--- /dev/null
+++ b/day9/task5_vue/src/App.vue
@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <Table v-bind:table-data="tableData"/>
+        <UploadFileButton/>
+        <AddNewEntryButton/>
+    </div>
+</template>
+
+<script>
+    import Table from "./components/Table.vue";
+    import UploadFileButton from "./components/UploadFileButton.vue";
+    import AddNewEntryButton from './components/AddNewEntryButton.vue';
+    import axios from 'axios';
+
+    export default {
+        name: "App",
+        components: {Table, UploadFileButton, AddNewEntryButton},
+
+        data() {
+            return {
+                tableData: []
+            }
+        },
+
+        mounted() {
+            axios
+                .request({
+                    url: '/api/get/',
+                    method: 'post',
+                    headers: {'Content-Type': 'application/json'},
+                    data: JSON.stringify({'type': 'full'})
+                })
+                .then(response => {
+                    this.tableData = response.data;
+                })
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/day9/task5_vue/src/components/AddNewEntryButton.vue b/day9/task5_vue/src/components/AddNewEntryButton.vue
new file mode 100644
index 0000000..fa52f8b
--- /dev/null
+++ b/day9/task5_vue/src/components/AddNewEntryButton.vue
@@ -0,0 +1,64 @@
+<template>
+    <button
+            @mouseenter="isHovered = true"
+            @mouseleave="isHovered = false"
+            @click="showCreateForm">
+        <div v-if="isHovered">Add new entry</div>
+        <div v-else>+</div>
+    </button>
+</template>
+
+<script>
+    import EditFormBox from "./EditFormBox.vue";
+
+    export default {
+        name: "AddNewEntryButton",
+        components: {EditFormBox},
+
+        data() {
+            return {
+                isHovered: false
+            }
+        },
+
+        methods: {
+            showCreateForm() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    button {
+        overflow: hidden;
+        white-space: nowrap;
+
+        position: fixed;
+
+        padding: 5px;
+        border-radius: 50px;
+        width: 100px;
+        height: 100px;
+        border: none;
+        background-color: #2871e2;
+        color: white;
+        font-size: 45px;
+
+        transition-property: width;
+        transition-duration: 0.6s;
+
+        bottom: 50px;
+        left: 50px;
+    }
+
+    button:hover {
+        width: 300px;
+        font-size: 30px;
+        background-color: #286bd6;
+    }
+
+    button:focus {
+        background-color: #2861c3;
+    }
+</style>
\ No newline at end of file
diff --git a/day9/task5_vue/src/components/EditFormBox.vue b/day9/task5_vue/src/components/EditFormBox.vue
new file mode 100644
index 0000000..53bfd8b
--- /dev/null
+++ b/day9/task5_vue/src/components/EditFormBox.vue
@@ -0,0 +1,210 @@
+<template>
+    <div class="backgroundTint shown">
+        <div class="contentBox shown">
+            <form id="tableForm" action="/api/update" method="post">
+                <div class="formRow">
+                    <div class="formRow-label">service_id</div>
+
+                    <div class="formRow-input" v-if="formType === 'update'">
+                        <input type="text" name="service_id" class="formInput" readonly="readonly" v-bind:value="tableRow['service_id']">
+                    </div>
+                    <div class="formRow-input" v-else-if="formType === 'create'">
+                        <input type="text" name="service_id" class="formInput" v-bind:value="tableRow['service_id']">
+                    </div>
+                </div>
+
+                <div class="formRow">
+                    <div class="formRow-label"> servtype </div>
+                    <div class="formRow-input">
+                        <input type="text" name="servtype" class="formInput" v-bind:value="tableRow['servtype']">
+                    </div>
+                </div>
+
+                <div class="formRow">
+                    <div class="formRow-label"> subtype </div>
+                    <div class="formRow-input">
+                        <input type="text" name="subtype" class="formInput" v-bind:value="tableRow['subtype']">
+                    </div>
+                </div>
+
+                <div class="formRow">
+                    <div class="formRow-label"> user_id </div>
+                    <div class="formRow-input">
+                        <input type="text" name="user_id" class="formInput" v-bind:value="tableRow['user_id']">
+                    </div>
+                </div>
+
+                <div class="formRow">
+                    <div class="formRow-label"> referrer_user_id </div>
+                    <div class="formRow-input">
+                        <input type="text" name="referrer_user_id" class="formInput" v-bind:value="tableRow['referrer_user_id']">
+                    </div>
+                </div>
+
+                <div class="formRow">
+                    <div class="formRow-label"> state </div>
+                    <div class="formRow-input">
+                        <select name="state" v-bind:value="tableRow['state']">
+                            <option>N</option>
+                            <option>A</option>
+                            <option>S</option>
+                            <option>D</option>
+                            <option>O</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="formRow">
+                    <div class="formRow-label"> creation_date </div>
+                    <div class="formRow-input">
+                        <input type="date" name="creation_date" class="formInput" v-bind:value="tableRow['creation_date']">
+                    </div>
+                </div>
+                <div class="formRow">
+                    <div class="formRow-label"> creation_time </div>
+                    <div class="formRow-input">
+                        <input type="time" name="creation_time" class="formInput" v-bind:value="tableRow['creation_time']">
+                    </div>
+                </div>
+
+                <div class="formRow">
+                    <div class="formRow-label"> creation_request_sent_date </div>
+                    <div class="formRow-input" style="display: flex; flex-direction: row">
+                        <input
+                                type="date" name="creation_request_sent_date"
+                                class="formInput" style="width: 50%;"
+                                v-bind:value="tableRow['creation_request_sent_date'].split(' ')[0]">
+                        <input
+                                type="time" name="creation_request_sent_time"
+                                class="formInput" style="width: 50%;"
+                                v-bind:value="tableRow['creation_request_sent_date'].split(' ')[1]">
+                    </div>
+                </div>
+
+                <div class="formRow">
+                    <div class="formRow-label"> notified_about_expiration </div>
+                    <div class="formRow-input">
+                        <input type="text" name="notified_about_expiration" class="formInput" v-bind:value="tableRow['notified_about_expiration']">
+                    </div>
+                </div>
+
+                <div class="formButtons" v-if="formType === 'update'">
+                    <button type="button" @click="cancelCallback">Cancel</button>
+                    <button type="submit">Update</button>
+                </div>
+                <div class="formButtons" v-else-if="formType === 'create'">
+                    <button type="button">Cancel</button>
+                    <button type="submit">Create</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "EditFormBox",
+        props: ['formType', 'cancelCallback', 'tableRow'],
+
+        data() {
+            return {
+                row: this.tableRow
+            }
+        },
+
+        mounted() {
+            console.log(this.row);
+        }
+    }
+</script>
+
+<style scoped>
+    .formRow {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .formRow-label {
+        font-size: 20px;
+        color: #404040;
+    }
+
+    .formRow-input > input, .formRow-input > select {
+        margin: 3px;
+        width: 100%;
+        border-radius: 5px;
+        border: none;
+        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+        padding: 5px;
+        font-size: 1.4em;
+
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+    }
+
+    .formRow-input > input[readonly="readonly"] {
+        background-color: #bebebe;
+        color: #4b4b4b;
+    }
+
+    .formInput[type="date"], .formInput[type="time"] {
+        padding: 5px;
+        font-size: 1.6em;
+    }
+
+    .formRow-input > select:hover, .formRow-input > input:not([readonly="readonly"]):hover {
+        background-color: #fbfbfb;
+    }
+
+    .formButtons {
+        display: flex;
+        flex-direction: row;
+        margin-top: 5px;
+    }
+
+    .formButtons > button {
+        margin: 5px;
+        width: 50%;
+        padding: 5px;
+        border: none;
+        border-radius: 7px;
+        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
+    }
+
+    .formButtons > button:hover {
+        background-color: #dadada;
+    }
+
+    .formButtons > button:focus {
+        background-color: #d5d5d5;
+    }
+
+    .contentBox {
+        padding: 20px;
+        width: 500px;
+        height: 695px;
+        background-color: #f0f0f0;
+        border-radius: 10px;
+        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+    }
+
+    .backgroundTint {
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.6);
+    }
+
+    .shown {
+        display: inline;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .hidden {
+        display: none;
+    }
+</style>
\ No newline at end of file
diff --git a/day9/task5_vue/src/components/Table.vue b/day9/task5_vue/src/components/Table.vue
new file mode 100644
index 0000000..519af25
--- /dev/null
+++ b/day9/task5_vue/src/components/Table.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <EditFormBox
+                v-bind:form-type="formType"
+                v-bind:cancel-callback="hideEditForm"
+                v-bind:table-row="tableRow"
+                v-if="isFormShown"
+        />
+        <table id="vueTable">
+            <thead>
+                <tr>
+                    <th v-for="header in tableData.headers">
+                        {{ header }}
+                    </th>
+                    <th></th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(row) in tableData.content">
+                    <td>{{ row[0] }}</td>
+                    <td v-for="(column) in row.slice(1)">
+                        {{ column }}
+                    </td>
+                    <td>
+                        <button @click="showEditForm(`${row[0]}`)">&#9998</button>
+                    </td>
+                    <td>
+                        <button @click="showEditForm(`${row[0]}`)">&#10006</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+    import EditFormBox from "./EditFormBox.vue";
+    import axios from 'axios';
+
+    export default {
+        name: "Table",
+        props: ['tableData'],
+        components: {EditFormBox},
+
+        data() {
+            return {
+                formType: null,
+                isFormShown: false,
+                tableRow: null
+            }
+        },
+
+        methods: {
+            showEditForm(serviceId) {
+                this.requestRowById(serviceId)
+                    .then(response => {
+                        this.tableRow = response.data;
+                        this.formType = 'update';
+                        this.isFormShown = true;
+                    });
+            },
+
+            hideEditForm() {
+                this.formType = null;
+                this.isFormShown = false;
+            },
+
+            requestRowById(serviceId) {
+                return axios.request({
+                    url: '/api/get/',
+                    method: 'post',
+                    headers: {'Content-Type': 'application/json'},
+                    data: JSON.stringify({'type': 'single_id', 'service_id': serviceId})
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    table {
+        border-spacing: 0;
+        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
+    }
+
+    th {
+        background-color: #6c7ae0;
+        padding: 7px 15px;
+        font-size: 19px;
+        color: white;
+    }
+
+    td {
+        padding: 6px;
+        color: #505050;
+    }
+
+    tbody > tr:hover, tbody > tr:nth-child(2n):hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    tbody > tr:nth-child(2n) {
+        background-color: #f8f6ff;
+    }
+</style>
\ No newline at end of file
diff --git a/day9/task5_vue/src/components/UploadFileButton.vue b/day9/task5_vue/src/components/UploadFileButton.vue
new file mode 100644
index 0000000..f544088
--- /dev/null
+++ b/day9/task5_vue/src/components/UploadFileButton.vue
@@ -0,0 +1,73 @@
+<template>
+    <div>
+        <form action="/api/upload" method="post" enctype="multipart/form-data">
+            <input type="file" name="csvFile" ref="csvFileInput"
+                   accept="text/csv" style="display: none;"
+                   onchange="form.submit()">
+        </form>
+        <button
+                @mouseenter="isHovered = true"
+                @mouseleave="isHovered = false"
+                @click="triggerUploadFile">
+            <div v-if="isHovered">Upload File</div>
+            <div v-else>
+                <img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">
+            </div>
+        </button>
+    </div>
+
+</template>
+
+<script>
+    export default {
+        name: "UploadFileButton",
+
+        data() {
+            return {
+                isHovered: false
+            }
+        },
+
+        methods: {
+            triggerUploadFile() {
+                console.log('Clicked');
+                console.log(this.$refs.csvFileInput);
+                this.$refs.csvFileInput.click();
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    button {
+        overflow: hidden;
+        white-space: nowrap;
+
+        position: fixed;
+
+        padding: 5px;
+        border-radius: 50px;
+        width: 100px;
+        height: 100px;
+        border: none;
+        background-color: #2871e2;
+        color: white;
+        font-size: 45px;
+
+        transition-property: width;
+        transition-duration: 0.6s;
+
+        bottom: 175px;
+        left: 50px;
+    }
+
+    button:hover {
+        width: 300px;
+        font-size: 30px;
+        background-color: #286bd6;
+    }
+
+    button:focus {
+        background-color: #2861c3;
+    }
+</style>
\ No newline at end of file
diff --git a/day9/task5_vue/src/index.js b/day9/task5_vue/src/index.js
new file mode 100644
index 0000000..4f30725
--- /dev/null
+++ b/day9/task5_vue/src/index.js
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+    render: h => h(App)
+}).$mount('#app');
\ No newline at end of file