update

wolfrepos · Aug 22, 2023 · 1c92b65 · 1c92b65
1 parent 74969fc
commit 1c92b65
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 51 deletions.
diff --git a/avtokg/create/index.html b/avtokg/create/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+  <head>
+		<link rel="stylesheet" type="text/css" href="../../css/main.css"> 
+  </head>
+<body>
+<div>
+  <form>
+    <label for="brand">Марка</label>
+    <select id="brand" name="brand">
+    </select>
+
+    <label for="model">Модель</label>
+    <select id="model" name="model" disabled>
+    </select>
+
+    <label for="price">Цена в $</label>
+    <input type="number" id="price-min" name="price-min" placeholder="От">
+    <input type="number" id="price-max" name="price-max" placeholder="До">
+
+    <label for="year">Год</label>
+    <select id="year" name="year">
+      <option value="any">Любой</option>
+      <option value="2023">2023</option>
+      <option value="2022">2022</option>
+      <option value="2021">2021</option>
+      <option value="2020">2020</option>
+      <option value="2019">2019</option>
+      <option value="2018">2018</option>
+    </select>
+  </form>
+</div>
+</body>
+<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>
+  const brands = [
+    { value: "any", text: "Любая" },
+    { value: "audi", text: "Audi" },
+    { value: "bmw", text: "BMW" },
+    { value: "chevrolet", text: "Chevrolet" },
+    { value: "daewoo", text: "Daewoo" },
+    { value: "ford", text: "Ford" },
+    { value: "honda", text: "Honda" },
+    { value: "hyndai", text: "Hyundai" },
+    { value: "kia", text: "Kia" },
+    { value: "lexus", text: "Lexus" },
+    { value: "mazda", text: "Mazda" },
+    { value: "mers", text: "Mercedes-Benz" },
+    { value: "mitsubishi", text: "Mitsubishi" },
+    { value: "nissan", text: "Nissan" },
+    { value: "opel", text: "Opel" },
+    { value: "renault", text: "Renault" },
+    { value: "subaru", text: "Subaru" },
+    { value: "toyota", text: "Toyota" },
+    { value: "volkswagen", text: "Volkswagen" },
+  ];
+  const models = {
+    "audi" : [
+      { value: "80", text: "80" },
+      { value: "90", text: "90" },
+      { value: "100", text: "100" },
+      { value: "a3", text: "A3" },
+      { value: "a4", text: "A4" },
+      { value: "a5", text: "A5" },
+      { value: "a6", text: "A6" },
+      { value: "a7", text: "A7" },
+      { value: "a8", text: "A8" },
+      { value: "q3", text: "Q3" },
+      { value: "q5", text: "Q5" },
+      { value: "q7", text: "Q7" },
+      { value: "s4", text: "S4" },
+      { value: "tt", text: "TT" },
+    ],
+    "bmw" : [
+      { value: "3", text: "3 серии" },
+      { value: "5", text: "5 серии" },
+      { value: "7", text: "7 серии" },
+      { value: "x5", text: "X5" },
+      { value: "x6", text: "X6" },
+    ],
+    "kia" : [
+      { value: "carnival", text: "Carnival" },
+      { value: "ceed", text: "Ceed" },
+      { value: "cerato", text: "Cerato" },
+      { value: "k5", text: "K5" },
+      { value: "k7", text: "K7" },
+      { value: "magentis", text: "Magentis" },
+      { value: "rio", text: "Rio" },
+      { value: "sorento", text: "Sorento" },
+      { value: "sportage", text: "Sportage" },
+    ]
+  };
+  $(document).ready(function() {
+    $.each(brands, function(key, obj) {
+      $('#brand')
+        .append(`<option value="${obj.value}">${obj.text}</option>`);
+    });
+    $('#brand').on('change', function() {
+      const brand = this.value;
+      if (brand in models) {
+        $('#model')
+          .empty()
+          .attr('disabled', false)
+          .append(`<option value="any">Любая</option>`);
+        $.each(models[brand], function(key, obj) {
+          $('#model').append(`<option value="${obj.value}">${obj.text}</option>`);
+        });
+      } else {
+        $('#model')
+          .empty()
+          .attr('disabled', true);
+      }
+    });
+  });
+
+  const mainButton = window.Telegram.WebApp.MainButton;
+  mainButton.text = "Найти";
+  mainButton.enable();
+  mainButton.show();
+  mainButton.onClick(
+    function() {
+      window.Telegram.WebApp.sendData(
+        JSON.stringify(
+          {
+            "brand" : $('#brand').val(),
+            "model" : $('#model').val(),
+            "price_min" : $('#price-min').val(),
+            "price_max" : $('#price-max').val(),
+            "year" : $('#year').val(),
+          }
+        )
+      );
+    }
+  );
+</script>
+</html>
+
+
diff --git a/avtokg/search/index.html b/avtokg/search/index.html
@@ -1,57 +1,9 @@
 <!DOCTYPE html>
 <html>
-<style>
-label {
-  font-size: 20px;
-  display: block;
-}
-
-input[type=text], select {
-  width: 100%;
-  padding: 12px 20px;
-  margin: 8px 0;
-  display: inline-block;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-  font-size: 20px;
-}
-
-input[type=number] {
-  width: 49%;
-  padding: 12px 20px;
-  margin: 8px 0;
-  display: inline-block;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-sizing: border-box;
-  font-size: 20px;
-}
-
-input[type=submit] {
-  width: 100%;
-  background-color: #4CAF50;
-  color: white;
-  padding: 14px 20px;
-  margin: 8px 0;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-input[type=submit]:hover {
-  background-color: #45a049;
-}
-
-div {
-  border-radius: 5px;
-  background-color: #f2f2f2;
-  padding: 20px;
-  margin: 2%;
-}
-</style>
+  <head>
+		<link rel="stylesheet" type="text/css" href="../../css/main.css"> 
+  </head>
 <body>
-
 <div>
   <form>
     <label for="brand">Марка</label>

diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,48 @@
+label {
+  font-size: 20px;
+  display: block;
+}
+
+input[type=text], select {
+  width: 100%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 20px;
+}
+
+input[type=number] {
+  width: 49%;
+  padding: 12px 20px;
+  margin: 8px 0;
+  display: inline-block;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 20px;
+}
+
+input[type=submit] {
+  width: 100%;
+  background-color: #4CAF50;
+  color: white;
+  padding: 14px 20px;
+  margin: 8px 0;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+input[type=submit]:hover {
+  background-color: #45a049;
+}
+
+div {
+  border-radius: 5px;
+  background-color: #f2f2f2;
+  padding: 20px;
+  margin: 2%;
+}