good

drunkwolfs · Jun 23, 2024 · f16fac1 · f16fac1
1 parent 3057b47
commit f16fac1
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 42 deletions.
diff --git a/common.js b/common.js
@@ -100,19 +100,31 @@ function addNumberInput(){
     }
 
     function initUserComboBox(){ 
-     var comboBox = document.getElementById('cmbUser');
-         for (var i = 0; i < users.length; i++) {
-           if (users[i][1] == 0){
-             continue;
-           }
-           var option = document.createElement('option');
-           option.text = users[i][0];
-           option.value = option.text;
-
-           comboBox.add(option);
-         }
+      var data = [];
+      for (var i = 0; i < users.length; i++) {
+        data.push({id: i, text: users[i][0]});
+      }
+      $(".js-example-basic-single").select2({
+        data: data, width : '100%', language: "ru", tags: true,
+        insertTag: function (data, tag) {
+          tag.isNew = true;
+          data.push(tag);
+        }
+      }).on("select2:close", function(e) {
+        if(e.params.hasOwnProperty('originalSelect2Event') &&
+         e.params.originalSelect2Event.data.isNew == true){
+          newUserAdded();
+        }
+       });
+       $('.js-example-basic-single').val(null).trigger('change');
        }
 
+      function newUserAdded(){
+        $(".js-example-basic-single").select2({disabled: true});
+        document.getElementById("deleteNewClientBtn").style.display = "block";
+        document.getElementById("telegramInput").style.display = "block";
+      }
+
 function initNumberCounter(){
     $(document).ready(function() {
         $('body').on('click', '.number-minus, .number-plus', function(){

diff --git a/home.css b/home.css
@@ -1,17 +1,46 @@
-table, th {
+.full-height-table{
+    height: 100vh;  /* Полная высота окна */
+    display: flex;
+    flex-direction: column;
+}
+
+.main-table {
+    height: 100vh;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    border-collapse: collapse;
+    width: calc(100% - 20px);
+    margin: 0 10px;
+    box-sizing: border-box;
+    }
+
+    .content-row{
+       flex-grow: 1;
+   } 
+
+   tr.navigation{
+    width: 100%;
+    /* flex-shrink: 1; */
+    min-height: 50px;
+}
+
+table.main-table, table.main-table > tbody > tr{
   border: 1px solid var(--tg-theme-link-color, #000);
-  border-collapse: collapse;
 }
 
-.main-table {
-  width: calc(100% - 20px);
-  margin: 0 10px;
-  box-sizing: border-box;
-  height: 100%;
+
+
+
+
+
+tr.navigation > td.navigation{
+    width: 50vw;
+    padding: 10px;
 }
 
-table th, table td {
-  padding: 10px;
+table.main-table > tbody > tr > td{
+  padding: 5px 10px 0 10px;
 }
 
 input {
@@ -124,11 +153,10 @@ button.close_btn {
     text-align: center;
     font-family: arial;
     color: var(--tg-theme-button-text-color, #ffffff);
+    border-bottom: 1px solid var(--tg-theme-link-color, #000);
     text-decoration: none;
 }
-.number-plus {
-border-bottom: 1px solid var(--tg-theme-link-color, #000);
-}
+
 .number-minus:hover, .number-plus:hover {
     background: var(--tg-theme-button-color, #50a8eb);
 }
@@ -155,8 +183,4 @@ border-bottom: 1px solid var(--tg-theme-link-color, #000);
     color: var(--tg-theme-text-color, #222);
     line-height: 28px;
     height: 28px
-}
-.navigation{
-    width: 50%;
-    padding: 10px;
 }
diff --git a/index.html b/index.html
@@ -12,6 +12,9 @@
     <title></title>
     <link rel="stylesheet" href="home.css">
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/i18n/ru.js"></script>
     <script type="text/javascript" src="https://telegram.org/js/telegram-web-app.js?1"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
     <script type="text/javascript" src="common.js"></script>
@@ -22,8 +25,10 @@
     </script>
   </head>
   <body>
-    <table class="main-table">
-      <tr>
+    <div class="full-height-table">
+      <table class="main-table">
+        <!-- <tbody> -->
+      <tr class="content-row">
         <td colspan="2">
           <div id="pages">
             <div id="select-items" style="display: block;">
@@ -45,34 +50,37 @@
             <div id="select-user" style="display: none;">
               <table>
                 <tr>
-                  <td><select id="cmbUser"></select></td>
-                  <td><div><button onclick="addClient()">Добавить</button></div></td>
+                  <td colspan="2">
+                    <label for="cmbUser2">Выбери или введи ФИО клиента
+                    <select class="js-example-basic-single" id="cmbUser2" name="state">
+                    </select></label>
+                  </td>
+                  <td><div id="deleteNewClientBtn" style="display: none;"><button onclick="deleteClient()">Удалить</button></div></td>
                 </tr>
                 <tr>
                   <td colspan="2">
-                    <form id="dataForm" onsubmit="submitForm(event)">
-                     <table id="elements" class="center">
+                     <table id="userElements" class="center">
                       <tbody>
-                       <tr>
-                          <td><label for="name">Имя:</label></td>
-                          <td><input type="text" id="name" name="name" required></td>
+                       <tr id="telegramInput" style="display: none;">
+                          <td><label for="name">Telegram:</label></td>
+                          <td><input type="text" id="name" name="name"></td>
                       </tr>
                       </tbody>
                       </table>
-                      <input type="submit" value="Добавить данные">
-                    </form>
                   </td>
                 </tr>
               </table>
             </div>
           </div>
         </td>
       </tr>
-      <tr>
-        <td class="navigation"><button id="prev">Закрыть</button></td>
-        <td class="navigation"><button id="next">Далее</button></td>
+      <tr class="navigation">
+        <td class="navigation"><button style="display: none;" id="prev">Назад</button></td>
+        <td class="navigation"><button style="display: block;" id="next">Далее</button></td>
       </tr>
+      <!-- </tbody> -->
     </table>
+    </div>
         <!-- Шаблонный счетчик количества товара -->
         <div id="hide-counter" style="display:none">
           <div class="number" data-step="1" data-min="1" data-max="100">
@@ -86,12 +94,18 @@
       </div>
     <script>
       initComboBox();
-      initUserComboBox()
+      initUserComboBox();
       initNumberCounter();
       var currentPage = 0;
       var maxPage = document.getElementById("pages").children.length-1;
       // Функция для загрузки контента
       function loadContent(page) {
+        if(page <= 0){
+          document.getElementById('prev').style.display = "none";
+        }
+        else{
+          document.getElementById('prev').style.display = "block";
+        }
         var pages = document.getElementById("pages").children;
         for(var i=0; i<=maxPage; i++){
           if(i!=page){