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

1 files changed, 210 insertions, 0 deletions

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