web_editor/index.html

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

    <style>
      .cards-row {
        display: flex;
        flex-direction: row;
      }

      .card {
        outline: solid;
        padding: 15px;
      }

      .card-being-dragged {
        background-color: #c8ebfb;
      }
    </style>

    <link data-trunk rel="rust" href="../osm2lanes-npm/Cargo.toml" />
    <link data-trunk rel="copy-dir" href="./js" />
    <script type="module" src="js/dummy_data.js"></script>
  </head>
  <body>
    <fieldset>
      <legend>OSM way ID</legend>
      <input type="text" id="osm_way_id" value="804788513" />
    </fieldset>
    <input type="button" value="Edit" onclick="window.start_editing();" />

    <div id="cards" class="cards-row">
      <div class="card">Item 1</div>
    </div>

    <div id="toolbox" class="cards-row" style="margin-top: 30px">
      <!-- TODO Can I just make up / overload the value attribute here? -->
      <div class="card" value="driving">New driving lane</div>
      <div class="card" value="bike">New bike lane</div>
      <div class="card" value="parking">New parking lane</div>
    </div>

    <script type="module">
      // TODO The hash changes, this is very brittle. See https://github.com/thedodd/trunk/issues/230 or stop using trunk.
      import { dummyData } from "./js/dummy_data.js";
      import init, {
        js_way_to_lanes,
      } from "./osm2lanes-npm-f84a742dc46ad4d0.js";
      await init();

      // Setup the toolbox controls
      new Sortable(document.getElementById("toolbox"), {
        group: {
          name: "toolbox",
          pull: "clone",
        },
        sort: false,
        animation: 150,
        ghostClass: "card-being-dragged",
      });

      async function start_editing() {
        const way = BigInt(document.getElementById("osm_way_id").value);
        console.log(`Fetching ${way}...`);
        //let lanes = await js_way_to_lanes(way);
        let lanes = dummyData();
        console.log(`Got osm2lanes output, creating cards`);

        // TODO Fully clean up the old cards, including whatever sortable thing is attached there
        const cards = document.getElementById("cards");
        cards.replaceChildren();

        // Create a card per lane
        for (const lane of lanes["Ok"]["road"]["lanes"]) {
          if (lane["type"] == "separator") {
            continue;
          }
          cards.appendChild(make_lane_card(lane));
        }

        new Sortable(cards, {
          group: {
            name: "lanes",
            put: ["toolbox"],
          },
          animation: 150,
          ghostClass: "card-being-dragged",
          onAdd: function (evt) {
            const type = evt.item.getAttribute("value");
            // TODO switch case but without break?
            // TODO Figure out based on center line position
            if (type == "driving") {
              console.log(`just added driving lane, transforming`);
              console.log(`before ${evt.item}`);
              // TODO This creates a nested div; I want to replace it
              evt.item.replaceChildren();
              evt.item.appendChild(
                make_lane_card({
                  type: "travel",
                  direction: "backward",
                  designated: "motor_vehicle",
                })
              );
            } else if (type == "bike") {
            } else if (type == "parking") {
            }
          },
        });
      }

      function make_lane_card(lane) {
        var node = document.createElement("div");
        node.setAttribute("class", "card");
        node.setAttribute("title", JSON.stringify(lane, null, 2));

        node.innerHTML = lane["type"];

        // TODO I want if-let
        {
          let x = lane["designated"];
          if (x) {
            node.innerHTML += `, ${x}`;
          }
        }

        {
          let x = lane["direction"];
          if (x == "forward") {
            node.innerHTML += ", ^";
          } else if (x == "backward") {
            node.innerHTML += ", v";
          } else if (x == "both") {
            node.innerHTML += ", |";
          }
        }

        {
          let x = lane["width"];
          if (x) {
            node.innerHTML += `, width = ${x}m`;
          }
        }

        return node;
      }

      window.start_editing = start_editing;
    </script>
  </body>
</html>