Modal for roomfinder

[Marius1501]

Resolves: #143

Is the roomfinder-map sufficient or should the map-cross also be implemented to the modal?
I already tried to implement the cross but it is a bit difficult with the position because I think you have to make a function like the loadRoomfinderMap-function for the roomfinder modal.

[octycs]

I already tried to implement the cross but it is a bit difficult with the position because I think you have to make a function like the loadRoomfinderMap-function for the roomfinder modal.

It can probably be simplified a bit for the modal, because not all parts are relevant (I've not tested this code, but this is what I think is relevant):

 loadModalRoomfinderMap: function () {
      const map = this.view_data.maps.roomfinder.available[mapIndex];

      const rect = document
        .getElementById("TBD")
        .getBoundingClientRect();
      // -1023px, -1023px is top left corner, 16px = 2*8px is element padding
      this.state.map.roomfinder.modalX =
        -1023 + (map.x / map.width) * (rect.width - 16);

      // We cannot use "height" here as it might be still zero before layouting
      // finished, so we use the aspect ratio here.
      this.state.map.roomfinder.modalY =
        -1023 +
        (map.y / map.height) * (rect.width - 16) * (map.height / map.width);
}

But one problem may be that the HTML elements will not yet be in the DOM if you put that in the click handler at the moment. Because the v-if here will only insert the modal HTML elements once map.roomfinder.modalRoomfinder_open is true, and (as far I remember) all handler code completed. But in order to compute the position of the cross, the element would need to be in the DOM already so you can get the dimensions and compute the cross position.

One way to fix that could be to toggle only the active class of the modal using map.roomfinder.modalRoomfinder_open (v-bind:class="{ active: map.roomfinder.modalRoomfinder_open }") and leave of the v-if. Then the modal is in the DOM all the time (not ideal, but because it's inactive probably not too bad).

(Maybe it's better to call it map.roomfinder.modalOpen, then roomfinder is not duplicate and it's shorter)

On the other hand, I would also be okay to merge without the cross implemented, I don't know how much difference it makes in terms of the Vue3 port @CommanderStorm ?

[CommanderStorm]

On the other hand, I would also be okay to merge without the cross implemented, I don't know how much difference it makes in terms of the Vue3 port @CommanderStorm ?

I am indifferent about this. Migrating this should be quite straightforward (I cannot guarantee commit ownership though, as all commits in #200 will have to be squashed before merging into main..)

[Marius1501]

@octycs did you think of this change or did I something wrong? Because it is not working properly. The modal is now open when I leave out the v-if. And the cross is now in the left upper corner. Maybe the loadModalRoomfinder function is called in the wrong place. I thought it would be appropriate to call the function when you click on the roomfinder-map.

[octycs]

Did you add the loadModalRoomfinderMap function into view-view.js? I can't see it in the diff

[Marius1501]

Oh sorry. I tried the code in another directory and forgot to add the loadModalRoomfinderMap function.

[Marius1501]

@octycs Now the positioning of the cross should be right. But I didn't get rid of the overflow of the cross.

[Marius1501]

Ok, thank you for your help! Now everything should be right from my perspective. 😄

[CommanderStorm]

Other than the timeout and other minor questions I think this is nearly ready to merge.

One thing: This chip is important for legal reasons
Please either add a chip like this one or add a bottom row like with the images 😉

[CommanderStorm]

Sorry for the long wait 😅