Онлайн дэлгүүрийн хаяг

Нэг талбар, гурав дахь үсгээс санал. Сонгосон хаалга захиалгад код, албан ёсны хаяг, цэгтэйгээ хадгалагдана.

↗

Код

<!doctype html>
<!--
  dock sample app: e-commerce checkout. The customer types the address as they say it ("Сансар 24") or
  a building code if they have one; nobody has to learn a code. They pick a suggestion, check the pin, add the flat.
  The order keeps the building code (if any), the official address and the point, so the courier needs no words.
  Anything without a matched official address is shown and stored as unofficial. The order JSON is printed for your
  backend. Searches go to dock only if the customer ticks the box (PLAN 18): the text, the result count and the pick,
  sent when the order is placed. Unticked, nothing is kept.
  Serve sdk/js over http (npm run build, then e.g. `npx serve .`) and open /examples/checkout.html#key=dk_...
  The key needs door:read, geocode:read and tiles:read; a free key has them.
-->
<html lang="mn">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>dock: хүргэлтийн хаяг</title>
  <link href="https://dock.mn/sdk/v1/dock.css" rel="stylesheet">
  <script src="https://dock.mn/sdk/v1/dock.js"></script>
  <style>
    body { margin: 0 auto; max-width: 560px; padding: 16px; font: 15px system-ui, sans-serif; }
    input { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; margin: 4px 0 10px; }
    #map { height: 560px; border-radius: 8px; }
    ul { list-style: none; margin: 0; padding: 0; }
    li { padding: 6px; cursor: pointer; }
    li:hover, li[aria-selected=true] { background: #eef; }
    li[aria-disabled] { cursor: default; background: none; }
    .warn { color: #92400e; }
    pre { background: #f6f6f6; padding: 8px; overflow: auto; font-size: 12px; }
    [hidden] { display: none !important; }
  </style>
</head>
<body>
  <h2>Хүргэлтийн хаяг</h2>
  <form id="order">
    <label>Хаяг эсвэл барилгын код<input name="q" placeholder="Сансар 24 эсвэл 7QSVX"></label>
    <label><input type="checkbox" id="share" style="width: auto"> Хайлтаа dock-д илгээж хаягийн хайлтыг сайжруулахад туслах</label>
    <ul id="hits"></ul>
    <div id="picked" hidden>
      <p id="where"></p>
      <p id="note" class="warn"></p>
      <div id="map"></div>
      <p>Пин буруу байвал зөв газар нь дарна уу.</p>
      <label>Тоот (байр бол)<input name="unit" autocomplete="off"></label>
      <button>Захиалах</button>
    </div>
  </form>
  <pre id="out" hidden></pre>
  <p id="sent"></p>
  <script type="module">
    const { maplibregl } = dock;
    const { Client, DockError, attachSuggest, createMap, label } = dock;

    const params = new URLSearchParams(location.hash.slice(1));
    const client = new Client({ key: 'dk_...' });
    const $ = (id) => document.getElementById(id);
    const form = $('order');
    let map, pin, choice = null;
    // Off until the customer opts in; unticking drops what was not sent.
    $('share').addEventListener('change', () => client.setTelemetry($('share').checked));
    const fail = (e) => { $('note').textContent = e instanceof DockError ? `${e.code}: ${e.message}` : String(e); };

    // One input: suggestions from the third character, a typed building code first, arrows and Enter or a click.
    attachSuggest(form.q, client, { list: $('hits'), onPick: (it) => pick(it).catch(fail), onError: fail });

    // A place with a code is opened as a door: entrance, floor and directions come with it.
    async function pick(item) {
      const door = item.code && !('entrance' in item) ? await client.door(item.code) : item;
      choice = { item: door, point: door.point, moved: false };
      $('picked').hidden = false;
      form.q.value = label(door);
      if (door.unit?.number) form.unit.value = door.unit.number;
      const extra = [door.entrance?.letter && `${door.entrance.letter}-р хаалга`, door.instructions_mn].filter(Boolean).join('. ');
      $('where').textContent = label(door) + (extra ? `. ${extra}` : '');
      $('note').textContent = door.unofficial
        ? 'Албан ёсны хаягтай тулгагдаагүй. Захиалга хүлээн авна, хүргэгч пин болон тайлбараар очно.' : '';
      if (!map) {
        map = new dock.Map({ client, ui: 'sheet', container: 'map', center: door.point, zoom: 17 });
        pin = new maplibregl.Marker({ color: '#dc2626' }).setLngLat(door.point).addTo(map);
        map.on('click', (ev) => {
          choice.point = [ev.lngLat.lng, ev.lngLat.lat];
          choice.moved = true;
          pin.setLngLat(choice.point);
        });
      } else {
        pin.setLngLat(door.point);
        map.jumpTo({ center: door.point, zoom: 17 });
      }
    }

    // What your backend stores. The code points to the door; the official address is the truth behind it (PLAN 4d).
    form.addEventListener('submit', (ev) => {
      ev.preventDefault();
      if (!choice) return;
      const d = choice.item;
      const order = {
        door_code: d.code ?? null,
        unit: form.unit.value.trim() || null,
        label_mn: label(d, 'mn'),
        official_address: d.official_address,
        official_status: d.official_status,
        unofficial: d.unofficial,
        point: choice.point,
        pin_moved_by_customer: choice.moved,
        entrance: d.entrance?.letter ?? null,
      };
      $('out').hidden = false;
      $('out').textContent = JSON.stringify(order, null, 2);
      client.flushTelemetry().then((r) => { if (r) $('sent').textContent = `dock-д илгээсэн хайлт: ${r.stored}`; }).catch(fail);
    });
  </script>
</body>
</html>