From db64186206ba5fffe9c4c8dcf6522f5b77304b28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ubeyde=20Emir=20=C3=96zdemir?= <ubeydeozdmr@gmail.com>
Date: Fri, 1 Mar 2024 19:44:09 +0300
Subject: [PATCH] Last considerations

---
 README.md                  |   27 +-
 src/views/index.pug        |    2 +-
 src/views/url-creator.html | 1082 ------------------------------------
 3 files changed, 24 insertions(+), 1087 deletions(-)
 delete mode 100644 src/views/url-creator.html

diff --git a/README.md b/README.md
index aabb7dd..3ec2264 100644
--- a/README.md
+++ b/README.md
@@ -24,10 +24,29 @@ The API uses [turkiyeapi.dev](https://turkiyeapi.dev) as the main domain. But yo
 
 ## Documentation
 
-[API Documentation](https://turkiyeapi.dev/docs)
-[Examples](https://turkiyeapi.dev/examples)
-[Postman Collection](https://documenter.getpostman.com/view/19561492/UzBguVHM)
-[Swagger UI](https://turkiyeapi.dev/swagger)
+- [API Documentation](https://turkiyeapi.dev/docs)
+- [Examples](https://turkiyeapi.dev/examples)
+- [Postman Collection](https://documenter.getpostman.com/view/19561492/UzBguVHM)
+- [Swagger UI](https://turkiyeapi.dev/swagger)
+
+## Last Considerations
+
+The v1 version seems to have started to lose its developability and maintainability. When I first started developing the project in 2022 (I had just started my first year of university at that time), the name of the project (and of course also the repository) was "Provinces of Turkey API". The reason for this is that during the first few months when the API was first developed, you could only retrieve province information (Also, this information consisted of only five properties: id, name, population, areaCode and isMetropolitan). Over time, I focused on fixing the bugs of the API and adding new features (one of them was districts). Over time, districts became a schema in their own right, just like provinces, but instead of being written separately with an ID-Key connection, these districts were written in the district arrays of the relevant provinces in the same json file. This is the first problem, I have largely solved this problem for v1, but there are still some problems. The second problem was that there was no support for query parameters at first. These parameters were added step by step over time (first added "name, offset, limit", then filtering parameters, then fields, lastly sort).
+
+It is not easy to write the code from scratch without breaking the API requests of v1 users, however, I want to spare time for other projects and other work. That's why I'm taking a long break for this project. When the time comes, I will most likely start writing v2. Things I need to examine other sample APIs and also decide:
+
+- Should I use database in v2 as opposed to v1?
+- What kind of project structure should I create?
+- Should I prefer snake_case instead of camelCase? (like area_code instead of areaCode)
+- What kind of route structure should I use? (Should I use routes like "/provinces/34/districts/1852" instead of separate routes for provinces, districts, etc.?
+- Municipality support was not added to v1 because it would have been a bit complicated if I had added it.
+- What kind of connection should there be between Schemas? (How exactly can we position the municipalities when there is an order like provinces > districts > neighborhoods + villages)
+- fields property cannot set quadratic (or more nested) props, also sort property does not work for all fields. How can I find a solution to this?
+- Many more things I can't think of right now.
+
+Because of all this, this time I will try to improve myself in terms of learning and plan well this time. The project has come a long way from when it first started and has much more advanced capabilities. Frankly, I think I've added enough features and made improvements to last until v2. I need some time to realize the things I plan to do for v2, so I'm taking a long break. When v2 is released (if it is released) it will have better and more descriptive documentation, be more systematic and expandable. You can still submit your suggestions, requests, etc. by opening an issue on the Türkiye API GitHub page. you can write. In this case, I will also consider these for v2.
+
+Best wishes!
 
 ## Usage of API
 
diff --git a/src/views/index.pug b/src/views/index.pug
index d903664..ac88fec 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -291,7 +291,7 @@ block content
   footer.footer
     p.footer__text
       | Created by 
-      a.footer__link(target='_blank' href='https://ubeydeozdmr.netlify.app') Ubeyde Emir Özdemir
+      a.footer__link(target='_blank' href='https://ubeyde.me') Ubeyde Emir Özdemir
       |  / 
       a.footer__link(target='_blank' href='https://github.com/ubeydeozdmr/turkiye-api') GitHub
       |  / 
diff --git a/src/views/url-creator.html b/src/views/url-creator.html
deleted file mode 100644
index fbf7d0d..0000000
--- a/src/views/url-creator.html
+++ /dev/null
@@ -1,1082 +0,0 @@
-<!-- IMPORTANT NOTE -->
-
-<!--
-I created this html file in just one day. My main goal was to create a useful
-URL creation tool rather than creating a beautifully designed page. I am aware
-that the code I wrote is not a clean code, I plan to edit some things later
-(probably 2024), and I will take this issue into consideration.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="robots" content="noindex, nofollow" />
-    <meta name="googlebot" content="noindex, nofollow" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      *::selection {
-        background-color: #ff0000;
-        color: #fff;
-      }
-      html {
-        scroll-behavior: smooth;
-      }
-      body {
-        font-family: 'Inter', sans-serif;
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-      }
-      .flex-col {
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-        gap: 1rem;
-      }
-      article {
-        display: none;
-      }
-      #result-url {
-        width: 30rem;
-      }
-      code {
-        background-color: #f1f1f1;
-        padding: 0.25rem;
-        border-radius: 0.25rem;
-      }
-    </style>
-    <title>URL Creator for Turkiye API</title>
-  </head>
-  <body>
-    <h1>URL Creator for Turkiye API</h1>
-    <p>
-      This tool has not been tested sufficiently yet and may not be stable. You
-      can describe the problems you encounter on
-      <a
-        rel="noopener noreferrer"
-        target="_blank"
-        href="https://github.com/ubeydeozdmr/turkiye-api/issues"
-        >GitHub Issues</a
-      >.
-    </p>
-    <section class="content-starting">
-      <p>What do you want to do?</p>
-      <div class="flex-col">
-        <button type="button" class="btn-select" id="btn-all-p">
-          Fetching data from one or more than one province
-        </button>
-        <button type="button" class="btn-select" id="btn-exact-p">
-          Fetching data of only one province with the province's ID & license
-          plate
-        </button>
-        <button type="button" class="btn-select" id="btn-all-d">
-          Fetching data from one or more than one district
-        </button>
-        <button type="button" class="btn-select" id="btn-exact-d">
-          Fetching data of only one district with the district's ID
-        </button>
-      </div>
-    </section>
-    <article class="content-result-url">
-      <button type="button" onclick="window.location.reload();">Go back</button>
-      <br />
-      <br />
-      <div>
-        <label for="result-url">Result URL:</label>
-        <input type="text" id="result-url" disabled />
-      </div>
-      <button
-        type="button"
-        onclick="navigator.clipboard.writeText(document.querySelector('#result-url').value)"
-      >
-        Copy URL
-      </button>
-    </article>
-    <article class="content-all-p">
-      <div class="flex-col">
-        <div>
-          <label for="name-all-p"
-            >Name of the province you want to search:</label
-          >
-          <input
-            type="text"
-            id="name-all-p"
-            placeholder="You can leave it blank"
-          />
-        </div>
-        <div>
-          <label for="minp-all-p">Minimum population of province:</label>
-          <input
-            type="number"
-            id="minp-all-p"
-            placeholder="You can leave it blank"
-          />
-        </div>
-        <div>
-          <label for="maxp-all-p">Maximum population of province:</label>
-          <input
-            type="number"
-            id="maxp-all-p"
-            placeholder="You can leave it blank"
-          />
-        </div>
-        <div>
-          <p>Is metropolitan?</p>
-          <div>
-            <input
-              type="radio"
-              id="isMetropolitan-true-all-p"
-              name="isMetropolitan-all-p"
-              value="true"
-            />
-            <label for="isMetropolitan-true-all-p">Yes</label>
-          </div>
-          <div>
-            <input
-              type="radio"
-              id="isMetropolitan-false-all-p"
-              name="isMetropolitan-all-p"
-              value="false"
-            />
-            <label for="isMetropolitan-false-all-p">No</label>
-          </div>
-          <div>
-            <input
-              type="radio"
-              id="isMetropolitan-both-all-p"
-              name="isMetropolitan-all-p"
-              value="both"
-              checked="checked"
-            />
-            <label for="isMetropolitan-both-all-p">Both (No matter)</label>
-          </div>
-        </div>
-        <div>
-          <label for="offset-all-p">Offset: </label>
-          <input
-            type="number"
-            id="offset-all-p"
-            placeholder="You can leave it blank"
-          />
-          <sub
-            >(The results start from the order of the number you entered)</sub
-          >
-        </div>
-        <div>
-          <label for="limit-all-p">Limit: </label>
-          <input
-            type="number"
-            id="limit-all-p"
-            placeholder="You can leave it blank"
-          />
-          <sub
-            >(Province data is displayed as many as the number you enter)</sub
-          >
-        </div>
-        <div>
-          <p>Fields you want:</p>
-          <div>
-            <input
-              type="checkbox"
-              id="field-id-all-p"
-              name="fields-all-p"
-              value="id"
-              checked="checked"
-            />
-            <label for="field-id-all-p">ID</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-name-all-p"
-              name="fields-all-p"
-              value="name"
-              checked="checked"
-            />
-            <label for="field-name-all-p">Name</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-area-all-p"
-              name="fields-all-p"
-              value="area"
-              checked="checked"
-            />
-            <label for="field-area-all-p">Area</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-population-all-p"
-              name="fields-all-p"
-              value="population"
-              checked="checked"
-            />
-            <label for="field-population-all-p">Population</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-altitude-all-p"
-              name="fields-all-p"
-              value="altitude"
-              checked="checked"
-            />
-            <label for="field-altitude-all-p">Altitude</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-areacode-all-p"
-              name="fields-all-p"
-              value="areaCode"
-              checked="checked"
-            />
-            <label for="field-areacode-all-p">Area code</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-ismetropolitan-all-p"
-              name="fields-all-p"
-              value="isMetropolitan"
-              checked="checked"
-            />
-            <label for="field-ismetropolitan-all-p">Is metropolitan</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-coordinates-all-p"
-              name="fields-all-p"
-              value="coordinates"
-              checked="checked"
-            />
-            <label for="field-coordinates-all-p">Coordinates</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-maps-all-p"
-              name="fields-all-p"
-              value="maps"
-              checked="checked"
-            />
-            <label for="field-maps-all-p">Maps</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-region-all-p"
-              name="fields-all-p"
-              value="region"
-              checked="checked"
-            />
-            <label for="field-region-all-p">Region</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-districts-all-p"
-              name="fields-all-p"
-              value="districts"
-              checked="checked"
-            />
-            <label for="field-districts-all-p">Districts</label>
-          </div>
-          <br />
-          <div>
-            <label for="sort-all-p">Sort: </label>
-            <select name="sort-all-p" id="sort-all-p">
-              <option value="null">No sorting (default = ID)</option>
-              <option value="id">ID</option>
-              <option value="name">Name</option>
-              <option value="area">Area</option>
-              <option value="altitude">Altitude</option>
-              <option value="population">Population</option>
-              <option value="areaCode">Area code</option>
-            </select>
-          </div>
-          <div>
-            <p>Sort type:</p>
-            <input
-              type="radio"
-              id="sorttype-asc-all-p"
-              name="sorttype-all-p"
-              value="asc"
-              checked="checked"
-              disabled
-            />
-            <label for="sorttype-asc-all-p">Ascending</label>
-            <input
-              type="radio"
-              id="sorttype-desc-all-p"
-              name="sorttype-all-p"
-              value="desc"
-              disabled
-            />
-            <label for="sorttype-desc-all-p">Descending</label>
-          </div>
-        </div>
-      </div>
-    </article>
-    <article class="content-exact-p">
-      <div class="flex-col">
-        <div>
-          <label for="id-exact-p">ID & license plate of province:</label>
-          <input
-            type="number"
-            id="id-exact-p"
-            placeholder="You have to fill it!"
-          />
-        </div>
-        <div>
-          <p>Fields you want:</p>
-          <div>
-            <input
-              type="checkbox"
-              id="field-id-exact-p"
-              name="fields-exact-p"
-              value="id"
-              checked="checked"
-              disabled
-            />
-            <label for="field-id-exact-p">ID</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-name-exact-p"
-              name="fields-exact-p"
-              value="name"
-              checked="checked"
-              disabled
-            />
-            <label for="field-name-exact-p">Name</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-area-exact-p"
-              name="fields-exact-p"
-              value="area"
-              checked="checked"
-              disabled
-            />
-            <label for="field-area-exact-p">Area</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-population-exact-p"
-              name="fields-exact-p"
-              value="population"
-              checked="checked"
-              disabled
-            />
-            <label for="field-population-exact-p">Population</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-altitude-exact-p"
-              name="fields-exact-p"
-              value="altitude"
-              checked="checked"
-              disabled
-            />
-            <label for="field-altitude-exact-p">Altitude</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-areacode-exact-p"
-              name="fields-exact-p"
-              value="areaCode"
-              checked="checked"
-              disabled
-            />
-            <label for="field-areacode-exact-p">Area code</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-ismetropolitan-exact-p"
-              name="fields-exact-p"
-              value="isMetropolitan"
-              checked="checked"
-              disabled
-            />
-            <label for="field-ismetropolitan-exact-p">Is metropolitan</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-coordinates-exact-p"
-              name="fields-exact-p"
-              value="coordinates"
-              checked="checked"
-              disabled
-            />
-            <label for="field-coordinates-exact-p">Coordinates</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-maps-exact-p"
-              name="fields-exact-p"
-              value="maps"
-              checked="checked"
-              disabled
-            />
-            <label for="field-maps-exact-p">Maps</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-region-exact-p"
-              name="fields-exact-p"
-              value="region"
-              checked="checked"
-              disabled
-            />
-            <label for="field-region-exact-p">Region</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-districts-exact-p"
-              name="fields-exact-p"
-              value="districts"
-              checked="checked"
-              disabled
-            />
-            <label for="field-districts-exact-p">Districts</label>
-          </div>
-        </div>
-      </div>
-    </article>
-    <article class="content-all-d">
-      <div class="flex-col">
-        <div>
-          <label for="name-all-d"
-            >Name of the district you want to search:</label
-          >
-          <input
-            type="text"
-            id="name-all-d"
-            placeholder="You can leave it blank"
-          />
-        </div>
-        <div>
-          <label for="minp-all-d">Minimum population of district:</label>
-          <input
-            type="number"
-            id="minp-all-d"
-            placeholder="You can leave it blank"
-          />
-        </div>
-        <div>
-          <label for="maxp-all-d">Maximum population of district:</label>
-          <input
-            type="number"
-            id="maxp-all-d"
-            placeholder="You can leave it blank"
-          />
-        </div>
-        <div>
-          <label for="offset-all-p">Offset: </label>
-          <input
-            type="number"
-            id="offset-all-d"
-            placeholder="You can leave it blank"
-          />
-          <sub
-            >(The results start from the order of the number you entered)</sub
-          >
-        </div>
-        <div>
-          <label for="limit-all-d">Limit: </label>
-          <input
-            type="number"
-            id="limit-all-d"
-            placeholder="You can leave it blank"
-          />
-          <sub
-            >(District data is displayed as many as the number you enter)</sub
-          >
-        </div>
-        <div>
-          <p>Fields you want:</p>
-          <div>
-            <input
-              type="checkbox"
-              id="field-id-all-d"
-              name="fields-all-d"
-              value="id"
-              checked="checked"
-            />
-            <label for="field-id-all-d">ID</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-name-all-d"
-              name="fields-all-d"
-              value="name"
-              checked="checked"
-            />
-            <label for="field-name-all-d">Name</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-area-all-d"
-              name="fields-all-d"
-              value="area"
-              checked="checked"
-            />
-            <label for="field-area-all-d">Area</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-population-all-d"
-              name="fields-all-d"
-              value="population"
-              checked="checked"
-            />
-            <label for="field-population-all-d">Population</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-province-all-d"
-              name="fields-all-d"
-              value="province"
-              checked="checked"
-            />
-            <label for="field-province-all-d">Province</label>
-          </div>
-          <br />
-          <div>
-            <label for="sort-all-d">Sort: </label>
-            <select name="sort-all-d" id="sort-all-d">
-              <option value="null">No sorting (Default: Province)</option>
-              <option value="id">ID</option>
-              <option value="name">Name</option>
-              <option value="area">Area</option>
-              <option value="population">Population</option>
-              <option value="province">Province</option>
-            </select>
-            <sub
-              >(Districts connected to the same province are listed among
-              themselves according to their names)</sub
-            >
-          </div>
-          <sub
-            >(If you are considering something else (eg. population) instead of
-            name as a secondary sorting method (the primary being 'Province'),
-            you can try using <code>&sort=province,population</code> instead of
-            just <code>&sort=province</code>)</sub
-          >
-          <div>
-            <p>Sort type:</p>
-            <input
-              type="radio"
-              id="sorttype-asc-all-d"
-              name="sorttype-all-d"
-              value="asc"
-              checked="checked"
-              disabled
-            />
-            <label for="sorttype-asc-all-d">Ascending</label>
-            <input
-              type="radio"
-              id="sorttype-desc-all-d"
-              name="sorttype-all-d"
-              value="desc"
-              disabled
-            />
-            <label for="sorttype-desc-all-d">Descending</label>
-          </div>
-        </div>
-      </div>
-    </article>
-    <article class="content-exact-d">
-      <div class="flex-col">
-        <div>
-          <label for="id-exact-d">ID of district:</label>
-          <input
-            type="number"
-            id="id-exact-d"
-            placeholder="You have to fill it!"
-          />
-        </div>
-        <div>
-          <p>Fields you want:</p>
-          <div>
-            <input
-              type="checkbox"
-              id="field-id-exact-d"
-              name="fields-exact-d"
-              value="id"
-              checked="checked"
-            />
-            <label for="field-id-exact-d">ID</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-name-exact-d"
-              name="fields-exact-d"
-              value="name"
-              checked="checked"
-            />
-            <label for="field-name-exact-d">Name</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-area-exact-d"
-              name="fields-exact-d"
-              value="area"
-              checked="checked"
-            />
-            <label for="field-area-exact-d">Area</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-population-exact-d"
-              name="fields-exact-d"
-              value="population"
-              checked="checked"
-            />
-            <label for="field-population-exact-d">Population</label>
-          </div>
-          <div>
-            <input
-              type="checkbox"
-              id="field-province-exact-d"
-              name="fields-exact-d"
-              value="province"
-              checked="checked"
-            />
-            <label for="field-province-exact-d">Province</label>
-          </div>
-        </div>
-      </div>
-    </article>
-    <script>
-      const btnSelect = document.querySelectorAll('.btn-select');
-      btnSelect.forEach((btn) => {
-        btn.addEventListener('click', () => {
-          document.querySelector('.content-starting').style.display = 'none';
-          document.querySelector('.content-result-url').style.display = 'block';
-
-          const searchParams = new URLSearchParams(
-            document.querySelector('#result-url').value,
-          );
-
-          function writeResultUrl(route) {
-            document.querySelector('#result-url').value =
-              window.location.origin + '/api/v1' + route + searchParams;
-          }
-
-          function inputParamHandler(inputEl, key, route) {
-            document.querySelector(inputEl).addEventListener('input', () => {
-              searchParams.set(key, document.querySelector(inputEl).value);
-              if (document.querySelector(inputEl).value === '') {
-                searchParams.delete(key);
-              }
-              writeResultUrl(route);
-            });
-          }
-
-          function radioParamHandler(radioEl, key, route) {
-            document.querySelectorAll(radioEl).forEach((radio) => {
-              radio.addEventListener('change', () => {
-                const value = document.querySelector(
-                  radioEl + ':checked',
-                ).value;
-                searchParams.set(key, value);
-                if (value === 'both') {
-                  searchParams.delete(key);
-                }
-                writeResultUrl(route);
-              });
-            });
-          }
-
-          function allProvincesPanel() {
-            document.querySelector('.content-all-p').style.display = 'block';
-            document.querySelector('#result-url').value =
-              window.location.origin + '/api/v1/provinces?';
-
-            inputParamHandler('#name-all-p', 'name', '/provinces?');
-            inputParamHandler('#minp-all-p', 'minPopulation', '/provinces?');
-            inputParamHandler('#maxp-all-p', 'maxPopulation', '/provinces?');
-
-            radioParamHandler(
-              'input[name="isMetropolitan-all-p"]',
-              'isMetropolitan',
-              '/provinces?',
-            );
-
-            inputParamHandler('#offset-all-p', 'offset', '/provinces?');
-            inputParamHandler('#limit-all-p', 'limit', '/provinces?');
-
-            const fields = document.querySelectorAll(
-              'input[name="fields-all-p"]:checked',
-            );
-
-            const fieldsValues = Array.from(fields).map((field) => {
-              return field.value;
-            });
-
-            document
-              .querySelectorAll('input[name="fields-all-p"]')
-              .forEach((field) => {
-                field.addEventListener('change', () => {
-                  if (field.checked) {
-                    fieldsValues.push(field.value);
-                  } else {
-                    fieldsValues.splice(fieldsValues.indexOf(field.value), 1);
-                  }
-                  const fieldsValuesSet = new Set(fieldsValues);
-                  const fieldsValuesString =
-                    Array.from(fieldsValuesSet).join(',');
-                  searchParams.set('fields', fieldsValuesString);
-                  if (
-                    document.querySelectorAll(
-                      'input[name="fields-all-p"]:checked',
-                    ).length ===
-                    document.querySelectorAll('input[name="fields-all-p"]')
-                      .length
-                  ) {
-                    searchParams.delete('fields');
-                  }
-                  writeResultUrl('/provinces?');
-                });
-              });
-
-            document
-              .querySelector('#sort-all-p')
-              .addEventListener('change', () => {
-                document.querySelector('#sorttype-asc-all-p').checked = true;
-                const sortValue = document.querySelector('#sort-all-p').value;
-                searchParams.set('sort', sortValue);
-                if (sortValue === 'null') {
-                  searchParams.delete('sort');
-                  document.querySelector('#sorttype-asc-all-p').disabled = true;
-                  document.querySelector(
-                    '#sorttype-desc-all-p',
-                  ).disabled = true;
-                } else {
-                  document.querySelector(
-                    '#sorttype-asc-all-p',
-                  ).disabled = false;
-                  document.querySelector(
-                    '#sorttype-desc-all-p',
-                  ).disabled = false;
-                }
-                writeResultUrl('/provinces?');
-              });
-
-            document
-              .querySelectorAll('input[name="sorttype-all-p"]')
-              .forEach((sorttype) => {
-                sorttype.addEventListener('change', () => {
-                  const sorttypeValue = document.querySelector(
-                    'input[name="sorttype-all-p"]:checked',
-                  ).value;
-                  searchParams.set(
-                    'sort',
-                    '-' + document.querySelector('#sort-all-p').value,
-                  );
-                  if (sorttypeValue === 'asc') {
-                    searchParams.set(
-                      'sort',
-                      document.querySelector('#sort-all-p').value,
-                    );
-                  }
-                  writeResultUrl('/provinces?');
-                });
-              });
-          }
-
-          function exactProvincePanel() {
-            document.querySelector('.content-exact-p').style.display = 'block';
-            document.querySelector('#result-url').value =
-              "You have to fill the 'ID & license plate of province' field!";
-
-            document
-              .querySelector('#id-exact-p')
-              .addEventListener('input', () => {
-                document
-                  .querySelectorAll('input[name="fields-exact-p"]')
-                  .forEach((field) => {
-                    field.checked = true;
-                  });
-                if (document.querySelector('#id-exact-p').value === '') {
-                  document.querySelector('#result-url').value =
-                    "You have to fill the 'ID & license plate of province' field!";
-
-                  document
-                    .querySelectorAll('input[name="fields-exact-p"]')
-                    .forEach((field) => {
-                      field.disabled = true;
-                    });
-                  return;
-                }
-
-                document.querySelector('#result-url').value =
-                  window.location.origin +
-                  '/api/v1/provinces/' +
-                  document.querySelector('#id-exact-p').value +
-                  '?';
-
-                document
-                  .querySelectorAll('input[name="fields-exact-p"]')
-                  .forEach((field) => {
-                    field.disabled = false;
-                  });
-
-                const fields = document.querySelectorAll(
-                  'input[name="fields-all-p"]:checked',
-                );
-
-                const fieldsValues = Array.from(fields).map((field) => {
-                  return field.value;
-                });
-
-                document
-                  .querySelectorAll('input[name="fields-exact-p"]')
-                  .forEach((field) => {
-                    field.addEventListener('change', () => {
-                      if (field.checked) {
-                        fieldsValues.push(field.value);
-                      } else {
-                        fieldsValues.splice(
-                          fieldsValues.indexOf(field.value),
-                          1,
-                        );
-                      }
-                      const fieldsValuesSet = new Set(fieldsValues);
-                      const fieldsValuesString =
-                        Array.from(fieldsValuesSet).join(',');
-                      searchParams.set('fields', fieldsValuesString);
-                      if (
-                        document.querySelectorAll(
-                          'input[name="fields-exact-p"]:checked',
-                        ).length ===
-                        document.querySelectorAll(
-                          'input[name="fields-exact-p"]',
-                        ).length
-                      ) {
-                        searchParams.delete('fields');
-                      }
-                      writeResultUrl(
-                        '/provinces/' +
-                          document.querySelector('#id-exact-p').value +
-                          '?',
-                      );
-                    });
-                  });
-              });
-          }
-
-          function allDistrictsPanel() {
-            document.querySelector('.content-all-d').style.display = 'block';
-            document.querySelector('#result-url').value =
-              window.location.origin + '/api/v1/districts?';
-
-            inputParamHandler('#name-all-d', 'name', '/districts?');
-            inputParamHandler('#minp-all-d', 'minPopulation', '/districts?');
-            inputParamHandler('#maxp-all-d', 'maxPopulation', '/districts?');
-            inputParamHandler('#offset-all-d', 'offset', '/districts?');
-            inputParamHandler('#limit-all-d', 'limit', '/districts?');
-
-            const fields = document.querySelectorAll(
-              'input[name="fields-all-d"]:checked',
-            );
-
-            const fieldsValues = Array.from(fields).map((field) => {
-              return field.value;
-            });
-
-            document
-              .querySelectorAll('input[name="fields-all-d"]')
-              .forEach((field) => {
-                field.addEventListener('change', () => {
-                  if (field.checked) {
-                    fieldsValues.push(field.value);
-                  } else {
-                    fieldsValues.splice(fieldsValues.indexOf(field.value), 1);
-                  }
-                  const fieldsValuesSet = new Set(fieldsValues);
-                  const fieldsValuesString =
-                    Array.from(fieldsValuesSet).join(',');
-                  searchParams.set('fields', fieldsValuesString);
-                  if (
-                    document.querySelectorAll(
-                      'input[name="fields-all-d"]:checked',
-                    ).length ===
-                    document.querySelectorAll('input[name="fields-all-d"]')
-                      .length
-                  ) {
-                    searchParams.delete('fields');
-                  }
-                  writeResultUrl('/districts?');
-                });
-              });
-
-            document
-              .querySelector('#sort-all-d')
-              .addEventListener('change', () => {
-                document.querySelector('#sorttype-asc-all-d').checked = true;
-                const sortValue = document.querySelector('#sort-all-d').value;
-                searchParams.set('sort', sortValue);
-                if (sortValue === 'null') {
-                  searchParams.delete('sort');
-                  document.querySelector('#sorttype-asc-all-d').disabled = true;
-                  document.querySelector(
-                    '#sorttype-desc-all-d',
-                  ).disabled = true;
-                } else {
-                  document.querySelector(
-                    '#sorttype-asc-all-d',
-                  ).disabled = false;
-                  document.querySelector(
-                    '#sorttype-desc-all-d',
-                  ).disabled = false;
-                }
-                writeResultUrl('/districts?');
-              });
-
-            document
-              .querySelectorAll('input[name="sorttype-all-d"]')
-              .forEach((sorttype) => {
-                sorttype.addEventListener('change', () => {
-                  const sorttypeValue = document.querySelector(
-                    'input[name="sorttype-all-d"]:checked',
-                  ).value;
-                  searchParams.set(
-                    'sort',
-                    '-' + document.querySelector('#sort-all-d').value,
-                  );
-                  if (sorttypeValue === 'asc') {
-                    searchParams.set(
-                      'sort',
-                      document.querySelector('#sort-all-d').value,
-                    );
-                  }
-                  writeResultUrl('/districts?');
-                });
-              });
-          }
-
-          function exactDistrictPanel() {
-            document.querySelector('.content-exact-d').style.display = 'block';
-            document.querySelector('#result-url').value =
-              "You have to fill the 'ID of district' field!";
-
-            document
-              .querySelector('#id-exact-d')
-              .addEventListener('input', () => {
-                document
-                  .querySelectorAll('input[name="fields-exact-d"]')
-                  .forEach((field) => {
-                    field.checked = true;
-                  });
-                if (document.querySelector('#id-exact-d').value === '') {
-                  document.querySelector('#result-url').value =
-                    "You have to fill the 'ID & license plate of district' field!";
-
-                  document
-                    .querySelectorAll('input[name="fields-exact-d"]')
-                    .forEach((field) => {
-                      field.disabled = true;
-                    });
-                  return;
-                }
-
-                document.querySelector('#result-url').value =
-                  window.location.origin +
-                  '/api/v1/districts/' +
-                  document.querySelector('#id-exact-d').value +
-                  '?';
-
-                document
-                  .querySelectorAll('input[name="fields-exact-d"]')
-                  .forEach((field) => {
-                    field.disabled = false;
-                  });
-
-                const fields = document.querySelectorAll(
-                  'input[name="fields-all-d"]:checked',
-                );
-
-                const fieldsValues = Array.from(fields).map((field) => {
-                  return field.value;
-                });
-
-                document
-                  .querySelectorAll('input[name="fields-exact-d"]')
-                  .forEach((field) => {
-                    field.addEventListener('change', () => {
-                      if (field.checked) {
-                        fieldsValues.push(field.value);
-                      } else {
-                        fieldsValues.splice(
-                          fieldsValues.indexOf(field.value),
-                          1,
-                        );
-                      }
-                      const fieldsValuesSet = new Set(fieldsValues);
-                      const fieldsValuesString =
-                        Array.from(fieldsValuesSet).join(',');
-                      searchParams.set('fields', fieldsValuesString);
-                      if (
-                        document.querySelectorAll(
-                          'input[name="fields-exact-d"]:checked',
-                        ).length ===
-                        document.querySelectorAll(
-                          'input[name="fields-exact-d"]',
-                        ).length
-                      ) {
-                        searchParams.delete('fields');
-                      }
-                      writeResultUrl(
-                        '/districts/' +
-                          document.querySelector('#id-exact-d').value +
-                          '?',
-                      );
-                    });
-                  });
-              });
-          }
-
-          if (btn.id === 'btn-all-p') {
-            allProvincesPanel();
-          } else if (btn.id === 'btn-exact-p') {
-            exactProvincePanel();
-          } else if (btn.id === 'btn-all-d') {
-            allDistrictsPanel();
-          } else if (btn.id === 'btn-exact-d') {
-            exactDistrictPanel();
-          }
-        });
-      });
-    </script>
-  </body>
-</html>