diff options
Diffstat (limited to 'day9/task5_vue/src')
| -rw-r--r-- | day9/task5_vue/src/App.vue | 42 | ||||
| -rw-r--r-- | day9/task5_vue/src/components/AddNewEntryButton.vue | 64 | ||||
| -rw-r--r-- | day9/task5_vue/src/components/EditFormBox.vue | 210 | ||||
| -rw-r--r-- | day9/task5_vue/src/components/Table.vue | 106 | ||||
| -rw-r--r-- | day9/task5_vue/src/components/UploadFileButton.vue | 73 | ||||
| -rw-r--r-- | day9/task5_vue/src/index.js | 6 |
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]}`)">✎</button> + </td> + <td> + <button @click="showEditForm(`${row[0]}`)">✖</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 |