WIP: Добавлена верстка для взаимодействия с таблицей.

author: Andrew <saintruler@gmail.com> 2019-07-07 18:24:46 +0400
committer: Andrew <saintruler@gmail.com> 2019-07-07 18:24:46 +0400
commit: 64f9869d53bd4ec8b8867c8142a0deb919e143a4 (patch)
tree: bcd602f55fe71e7a100fd677a340841f545d408d
parent: f41cd316889dcbdc62e22e6622a6ecea4a435084 (diff)
1 files changed, 299 insertions, 36 deletions
diff --git a/day9/task5/index.html b/day9/task5/index.html
index 798fb92..1e7c9a5 100644
--- a/day9/task5/index.html
+++ b/day9/task5/index.html
@@ -3,6 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <title>"table_task1" table view</title>
+
+    <!--    table styling-->
     <style type="text/css">
         table {
             border-spacing: 0;
@@ -22,17 +24,71 @@
         }
     </style>
 
+    <!--    form styling-->
     <style type="text/css">
+        .formRow {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .formRow-label {
+            font-size: 13px;
+            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;
+
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+        }
+
+        .formRow-input > input:disabled {
+            background-color: #bebebe;
+            color: #4b4b4b;
+        }
+
         .formInput[type="date"], .formInput[type="time"] {
-            padding: 7px;
-            font-size: 1.3em;
+            padding: 5px;
+            font-size: 1.1em;
+        }
+
+        .formRow-input > select:hover, .formRow-input > input:not([disabled]):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);
         }
 
-        .formInput {
-            margin: 3px 0;
+        .formButtons > button:hover {
+            background-color: #dadada;
+        }
+
+        .formButtons > button:focus {
+            background-color: #d5d5d5;
         }
     </style>
 
+    <!--    table fields styling-->
     <style type="text/css">
         .odd { background-color: #dedede; }
         .even { background-color: #c5c5c5; }
@@ -41,44 +97,88 @@
             background-color: rgba(0, 0, 0, 0.3);
         }
     </style>
+
+    <!--    content box styling-->
+    <style type="text/css">
+        .contentBox {
+            padding: 20px;
+            width: 500px;
+            height: 520px;
+            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>
+
+    <!--    add new entry styling-->
+    <style type="text/css">
+        .newEntryBtn {
+            overflow: hidden;
+            white-space: nowrap;
+
+            position: fixed;
+            bottom: 50px;
+            left: 50px;
+
+            padding: 5px;
+            border-radius: 20px;
+            width: 40px;
+            height: 40px;
+            border: none;
+            background-color: #2871e2;
+            color: white;
+            font-size: 20px;
+
+            transition-property: width, font-size;
+            transition-duration: 0.6s;
+        }
+
+        .newEntryBtn:hover {
+            width: 150px;
+            font-size: 15px;
+            background-color: #286bd6;
+        }
+
+        .newEntryBtn:focus {
+            width: 200px;
+            font-size: 15px;
+            background-color: #2861c3;
+        }
+    </style>
 </head>
 
 <body onload="onPageLoad()">
-    <div>
-        <form action="/update">
-            <label> service_id <input type="text" name="service_id" class="formInput" disabled></label> <br>
-            <label> servtype <input type="text" name="servtype" class="formInput"></label> <br>
-            <label> subtype <input type="text" name="subtype" class="formInput"></label> <br>
-            <label> user_id <input type="text" name="user_id" class="formInput"></label> <br>
-            <label> referrer_user_id <input type="text" name="referrer_user_id" class="formInput"></label> <br>
-            <label>
-                state
-                <select name="state">
-                    <option>N</option>
-                    <option>A</option>
-                    <option>S</option>
-                    <option>D</option>
-                    <option>O</option>
-                </select>
-            </label><br>
-            <label> creation_date <input type="date" name="creation_date" class="formInput"></label> <br>
-            <label> creation_time <input type="time" name="creation_time" class="formInput"></label> <br>
-            <label>
-                creation_request_sent_date
-                <input type="date" name="creation_request_sent_date" class="formInput">
-                <input type="time" name="creation_request_sent_time" class="formInput">
-            </label> <br>
-            <label>
-                notified_about_expiration
-                <input type="text" name="notified_about_expiration" class="formInput">
-            </label> <br>
-
-            <button type="submit">Submit</button>
-        </form>
+    <div id="backgroundTint" class="backgroundTint hidden">
+        <div id="contentBox" class="contentBox hidden"></div>
     </div>
 
     <table id="table"></table>
 
+    <button type="button" class="newEntryBtn" id="newEntryBtn"
+        onclick="showCreateForm()"
+        onmouseenter="addNewRowOnHover()"
+        onmouseleave="addNewRowOnEndHover()"
+    > + </button>
+    </div>
+
     <script>
         const request = {
             get: function (url, callback) {
@@ -128,6 +228,96 @@
             'notified_about_expiration': `<input type="text">`
         };
 
+        const baseFormFields = `<form id="tableForm" action="/update">
+            <div class="formRow">
+                <div class="formRow-label">service_id</div>
+                <div class="formRow-input"><input type="text" name="service_id" class="formInput" disabled></div>
+            </div><div class="formRow">
+                <div class="formRow-label"> servtype </div>
+                <div class="formRow-input">
+                    <input type="text" name="servtype" class="formInput">
+                </div>
+            </div>
+
+            <div class="formRow">
+                <div class="formRow-label"> subtype </div>
+                <div class="formRow-input">
+                    <input type="text" name="subtype" class="formInput">
+                </div>
+            </div>
+
+            <div class="formRow">
+                <div class="formRow-label"> user_id </div>
+                <div class="formRow-input">
+                    <input type="text" name="user_id" class="formInput">
+                </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">
+                </div>
+            </div>
+
+            <div class="formRow">
+                <div class="formRow-label"> state </div>
+                <div class="formRow-input">
+                    <select name="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">
+                </div>
+            </div>
+            <div class="formRow">
+                <div class="formRow-label"> creation_time </div>
+                <div class="formRow-input">
+                    <input type="time" name="creation_time" class="formInput">
+                </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%;">
+                    <input type="time" name="creation_request_sent_time" class="formInput" style="width: 50%;">
+                </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">
+                </div>
+            </div>
+        </form>`;
+
+        const formCreateButtons = `<div class="formButtons">
+                <button type="button" onclick="hideForm()">Cancel</button>
+                <button type="submit">Create</button>
+            </div>`;
+
+        const formEditButtons = `<div class="formButtons">
+                <button type="button" onclick="hideForm()">Cancel</button>
+                <button type="submit">Update</button>
+            </div>`;
+
+        function elementFromHTML(html) {
+            let elem = document.createElement('div');
+            elem.innerHTML = html;
+            return elem.firstChild;
+        }
+
         function onPageLoad() {
             request.post('http://localhost:8000/get', renderTable, {'type': 'full'});
         }
@@ -189,6 +379,8 @@
                 row.push(`<button value="${row[0]}" onclick="removeField('${row[0]}')">&#10006</button>`);
 
                 let contentRow = document.createElement('tr');
+                contentRow.setAttribute('id', `row_${row[0]}`);
+
                 row.forEach((column, colIndex) => {
                     let color = (colIndex % 2 + rowIndex % 2) % 2 === 0 ? 'odd' : 'even';
                     let columnNode = document.createElement('td');
@@ -213,6 +405,7 @@
         }
 
         function setupEditFields(service_id) {
+            showEditForm();
             request.post('http://localhost:8000/get', (text) => {
                 let row = JSON.parse(text);
 
@@ -229,7 +422,77 @@
         }
 
         function removeField(service_id) {
-            console.log(service_id);
+            let tableBody = document.getElementById('table').childNodes[1];
+            for (let node of tableBody.childNodes) {
+                if (node.getAttribute('id') === `row_${service_id}`) {
+                    tableBody.removeChild(node);
+                    break
+                }
+            }
+        }
+
+        function showContentBox() {
+            let elem = document.getElementById('backgroundTint');
+            elem.classList.remove('hidden');
+            elem.classList.add('shown');
+
+            elem = document.getElementById('contentBox');
+            elem.classList.remove('hidden');
+            elem.classList.add('shown');
+        }
+
+        function hideContentBox() {
+            let elem = document.getElementById('backgroundTint');
+            elem.classList.remove('shown');
+            elem.classList.add('hidden');
+
+            elem = document.getElementById('contentBox');
+            elem.classList.remove('shown');
+            elem.classList.add('hidden');
+        }
+
+        function showForm() {
+            let newEntryBtn = document.getElementById('newEntryBtn');
+            newEntryBtn.style.display = 'none';
+
+            showContentBox();
+            let contentBox = document.getElementById('contentBox');
+            while (contentBox.firstChild)
+                contentBox.removeChild(contentBox.firstChild);
+
+            contentBox.appendChild(elementFromHTML(baseFormFields));
+            return contentBox;
+        }
+
+        showEditForm = () => {
+            let contentBox = showForm();
+            contentBox.appendChild(elementFromHTML(formEditButtons));
+        };
+
+        showCreateForm = () => {
+            let contentBox = showForm();
+            contentBox.appendChild(elementFromHTML(formCreateButtons));
+        };
+
+        function hideForm() {
+            let newEntryBtn = document.getElementById('newEntryBtn');
+            newEntryBtn.style.display = 'inline';
+
+            let contentBox = document.getElementById('contentBox');
+            while (contentBox.firstChild)
+                contentBox.removeChild(contentBox.firstChild);
+
+            hideContentBox();
+        }
+
+        function addNewRowOnHover() {
+            let btn = document.getElementById('newEntryBtn');
+            btn.innerText = 'Add new row';
+        }
+
+        function addNewRowOnEndHover() {
+            let btn = document.getElementById('newEntryBtn');
+            btn.innerText = '+';
         }
     </script>
 </body>
author	Andrew <saintruler@gmail.com>	2019-07-07 18:24:46 +0400
committer	Andrew <saintruler@gmail.com>	2019-07-07 18:24:46 +0400
commit	64f9869d53bd4ec8b8867c8142a0deb919e143a4 (patch)
tree	bcd602f55fe71e7a100fd677a340841f545d408d
parent	f41cd316889dcbdc62e22e6622a6ecea4a435084 (diff)