update

wolfrepos · Feb 8, 2024 · adcb686 · adcb686
1 parent 9bcf60d
commit adcb686
Show file tree

Hide file tree

Showing 5 changed files with 265 additions and 236 deletions.
diff --git a/test/spendbook/.DS_Store b/test/spendbook/.DS_Store
diff --git a/test/spendbook/index.html b/test/spendbook/index.html
@@ -1,153 +1,156 @@
 <!DOCTYPE html>
-<html>
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
-  <script src="https://telegram.org/js/telegram-web-app.js"></script>
-  <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
-  <script src="./js/dropDowns.js"></script>
+<html lang="en">
   <head>
+      <meta charset="UTF-8">
+      <title>Spend book page</title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" type="text/css" href="./styles.css" />
-  </head>
-  <script>
-    $(document).ready(function () {
-      const searchParams = new URLSearchParams(window.location.search);
-      const chatId = searchParams.get("chatId");
-
-      const dropdownButton = $('.select-button')
-      const dropdownMenu = $('.select-options')
-      const dropdownInput = $('.hidden-input')
-
-      dropdownButton.on('click', function () {
-        dropdownMenu.toggleClass('select-options-visible');
-        $(this).toggleClass('dropdown__button_active');
-      });
-
-      // $(document).on('click', function (e) {
-      //   if ( e.target !== dropdownButton ){
-      //     dropdownButton.classList.remove('dropdown__button_active');
-      //     dropdownMenu.classList.remove('dropdown__list_visible');
-      //   }
-      // })
-
-      $(document).on('keydown', function (e) {
-        if( e.key === 'Tab' || e.key === 'Escape' ) {
-          dropdownButton.removeClass('dropdown__button_active');
-          dropdownMenu.removeClass('select-options-visible');
-        }
-      })
-
-      fetch(`https://spendbook.ru/categories?chatId=${chatId}`)
-        .then((response) => response.json())
-        .then((userCategories) => {
-          const categoriesFiltered = categories.filter(
-            (c) => !userCategories.includes(c)
-          );
-          const finalCategories = userCategories.concat(categoriesFiltered);
-          $.each(finalCategories, function (key, str) {
-            // $("#category").append(`<option value="${str}">${str}</option>`);
-            $('#custom-dropdown').append(`<li class="select-option" data-value="${str}">${str}</li>`)
-          });
-        })
-        .catch((error) => {
-          $.each(categories, function (key, str) {
-            // $("#category").append(`<option value="${str}">${str}</option>`);
-            $('#custom-dropdown').append(`<li class="select-option" data-value="${str}">${str}</li>`)
-          })
-
-        });
-
-      $(document).on('click', '.select-option', function() {
-        $('.select-options .select-option').each(function (){
-          if ($(this).hasClass('selected')) {
-            $(this).removeClass('selected')
-          }
-        })
-
-        $(this).addClass('selected')
-        dropdownButton.html($(this).text())
-        dropdownInput.val($(this).attr('data-value'))
-        dropdownMenu.removeClass('select-options-visible')
-
-        if (dropdownInput.val() === categories[categories.length-1]) {
-          $(".custom-category").show();
-          // $("#custom_input").show();
-        } else {
-          $(".custom-category").hide();
-          // $("#custom_input").hide();
-        }
-
-        collectData()
-      });
-
-      function collectData() {
-        var category = $(".hidden-input").val();
-        if (category === categories[categories.length-1]) {
-          category = $("#custom_input").val();
-        }
-        const rawAmountValue = parseInt($("#amount").val(), 10);
-        const absAmountValue = Math.abs(rawAmountValue)
-        $("#amount").val(absAmountValue);
-        const data = {
-          category: category,
-          amount: absAmountValue,
-          description: $("#text").val(),
-          date: $("#date_input").val(),
-          timeOffset: new Date().getTimezoneOffset(),
-        };
-        Object.keys(data).forEach(
-          (key) =>
-            (data[key] =
-              data[key] === "any" || data[key] === "" ? null : data[key])
-        );
-        if (data.category && data.amount) {
-          enableSubmit(true);
-        } else {
-          enableSubmit(false);
-        }
-        return data;
-      }
-
-      function formatDate(date) {
-        var d = new Date(date),
-        month = "" + (d.getMonth() + 1),
-        day = "" + d.getDate(),
-        year = d.getFullYear();
-
-        if (month.length < 2) month = "0" + month;
-        if (day.length < 2) day = "0" + day;
-
-        return [year, month, day].join("-");
-      }
-
-      $("#date_input").val(formatDate(new Date()));
-
-      // $(".dropdown__input_hidden").on("change", collectData);
-      $("#custom_input").on("input", collectData);
-      $("#amount").on("input", collectData);
-      $("#date_input").on("change", collectData);
-
-      $(".custom-category").hide();
-      // $("#custom_input").hide();
-
-      const mainButton = window.Telegram.WebApp.MainButton;
-      mainButton.text = "Отправить";
-      mainButton.enable();
-      mainButton.onClick(function () {
-        window.Telegram.WebApp.sendData(JSON.stringify(collectData()));
-      });
-
-      function enableSubmit(activate) {
-        if (activate) {
-          mainButton.show();
-        } else {
-          mainButton.hide();
-        }
-      }
-    });
-  </script>
 
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
+      <script src="https://telegram.org/js/telegram-web-app.js"></script>
+      <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
+      <script src="./js/dropDowns.js"></script>
+      <script>
+          $(document).ready(function () {
+              $('#overlay').fadeOut()
+
+              const searchParams = new URLSearchParams(window.location.search);
+              const chatId = searchParams.get("chatId");
+
+              const dropdownButton = $('.select-button')
+              const dropdownMenu = $('.select-options')
+              const dropdownInput = $('.hidden-input')
+
+              dropdownButton.on('click', function () {
+                  dropdownMenu.toggleClass('select-options-visible');
+                  $(this).toggleClass('dropdown__button_active');
+              });
+
+              // $(document).on('click', function (e) {
+              //   if ( e.target !== dropdownButton ){
+              //     dropdownButton.classList.remove('dropdown__button_active');
+              //     dropdownMenu.classList.remove('dropdown__list_visible');
+              //   }
+              // })
+
+              $(document).on('keydown', function (e) {
+                  if( e.key === 'Tab' || e.key === 'Escape' ) {
+                      dropdownButton.removeClass('dropdown__button_active');
+                      dropdownMenu.removeClass('select-options-visible');
+                  }
+              })
+
+              fetch(`https://spendbook.ru/categories?chatId=${chatId}`)
+                  .then((response) => response.json())
+                  .then((userCategories) => {
+                      const categoriesFiltered = categories.filter(
+                          (c) => !userCategories.includes(c)
+                      );
+                      const finalCategories = userCategories.concat(categoriesFiltered);
+                      $.each(finalCategories, function (key, str) {
+                          // $("#category").append(`<option value="${str}">${str}</option>`);
+                          $('#custom-dropdown').append(`<li class="select-option" data-value="${str}">${str}</li>`)
+                      });
+                  })
+                  .catch((error) => {
+                      $.each(categories, function (key, str) {
+                          // $("#category").append(`<option value="${str}">${str}</option>`);
+                          $('#custom-dropdown').append(`<li class="select-option" data-value="${str}">${str}</li>`)
+                      })
+
+                  });
+
+              $(document).on('click', '.select-option', function() {
+                  $('.select-options .select-option').each(function (){
+                      if ($(this).hasClass('selected')) {
+                          $(this).removeClass('selected')
+                      }
+                  })
+
+                  $(this).addClass('selected')
+                  dropdownButton.html($(this).text())
+                  dropdownInput.val($(this).attr('data-value'))
+                  dropdownMenu.removeClass('select-options-visible')
+
+                  if (dropdownInput.val() === categories[categories.length-1]) {
+                      $(".custom-category").show();
+                      // $("#custom_input").show();
+                  } else {
+                      $(".custom-category").hide();
+                      // $("#custom_input").hide();
+                  }
+
+                  collectData()
+              });
+
+              function collectData() {
+                  var category = $(".hidden-input").val();
+                  if (category === categories[categories.length-1]) {
+                      category = $("#custom_input").val();
+                  }
+                  const rawAmountValue = parseInt($("#amount").val(), 10);
+                  const absAmountValue = Math.abs(rawAmountValue)
+                  $("#amount").val(absAmountValue);
+                  const data = {
+                      category: category,
+                      amount: absAmountValue,
+                      description: $("#text").val(),
+                      date: $("#date_input").val(),
+                      timeOffset: new Date().getTimezoneOffset(),
+                  };
+                  Object.keys(data).forEach(
+                      (key) =>
+                          (data[key] =
+                              data[key] === "any" || data[key] === "" ? null : data[key])
+                  );
+                  if (data.category && data.amount) {
+                      enableSubmit(true);
+                  } else {
+                      enableSubmit(false);
+                  }
+                  return data;
+              }
+
+              function formatDate(date) {
+                  var d = new Date(date),
+                      month = "" + (d.getMonth() + 1),
+                      day = "" + d.getDate(),
+                      year = d.getFullYear();
+
+                  if (month.length < 2) month = "0" + month;
+                  if (day.length < 2) day = "0" + day;
+
+                  return [year, month, day].join("-");
+              }
+
+              $("#date_input").val(formatDate(new Date()));
+
+              // $(".dropdown__input_hidden").on("change", collectData);
+              $("#custom_input").on("input", collectData);
+              $("#amount").on("input", collectData);
+              $("#date_input").on("change", collectData);
+
+              $(".custom-category").hide();
+              // $("#custom_input").hide();
+
+              const mainButton = window.Telegram.WebApp.MainButton;
+              mainButton.text = "Отправить";
+              mainButton.enable();
+              mainButton.onClick(function () {
+                  window.Telegram.WebApp.sendData(JSON.stringify(collectData()));
+              });
+
+              function enableSubmit(activate) {
+                  if (activate) {
+                      mainButton.show();
+                  } else {
+                      mainButton.hide();
+                  }
+              }
+          });
+      </script>
+  </head>
   <body>
-
   <dotlottie-player src="https://lottie.host/31eb8f50-5493-47de-939a-adffa6bd4317/wbaxE0xVId.json" background="transparent" speed="1" style="width: 100%; height: 100px; text-align: center;" loop autoplay></dotlottie-player>
 
   <form class="form">
@@ -187,5 +190,9 @@
           <input type="date" id="date_input" class="text-field">
       </div>
   </form>
+
+  <div id="overlay" class="overlay">
+      Loading...
+  </div>
   </body>
 </html>
diff --git a/test/spendbook/js/dropDowns.js b/test/spendbook/js/dropDowns.js
@@ -20,18 +20,3 @@ const incomeCategories = [
   // Должно быть последним
   "Ввести свою категорию",
 ];
-
-const months = [
-  { text: "Январь", value: "1" },
-  { text: "Февраль", value: "2" },
-  { text: "Март", value: "3" },
-  { text: "Апрель", value: "4" },
-  { text: "Май", value: "5" },
-  { text: "Июнь", value: "6" },
-  { text: "Июль", value: "7" },
-  { text: "Август", value: "8" },
-  { text: "Сентябрь", value: "9" },
-  { text: "Октябрь", value: "10" },
-  { text: "Ноябрь", value: "11" },
-  { text: "Декабрь", value: "12" },
-];