generateur_v3/frontend/src/components/rooms/RoomHead.svelte

<script lang="ts">
  import { getContext } from "svelte";
  import FaRegTrashAlt from "svelte-icons/fa/FaRegTrashAlt.svelte";

  import FaUndo from "svelte-icons/fa/FaUndo.svelte";
  import FaTimes from "svelte-icons/fa/FaTimes.svelte";
  import IoMdLogOut from 'svelte-icons/io/IoMdLogOut.svelte'
  import { goto } from "$app/navigation";
  import type { Writable } from "svelte/store";
  import type { Member, Room } from "../../types/room.type";
  import type ReconnectingWebSocket from "reconnecting-websocket";
  import { deleteRoom } from "../../requests/room.request.js";

  const room: Writable<Room> = getContext("room");
  const member: Writable<Member> = getContext("member");
  const { send, ws } = getContext<{ send: Function, ws: ReconnectingWebSocket }>("ws");
  const { alert } = getContext<{ alert: Function }>("alert");
  let editing = false;
  let name = $room.name;
  let r: HTMLInputElement;
</script>

<div class="head">
  <div class="title">
    {#if !editing}
      <h1
        on:dblclick={() => {
                    if(!$member.isAdmin) return
					editing = true;
					name = $room.name;
					r.focus();

				}}
      >
        {$room.name}<span on:dblclick|stopPropagation>#{$room.id_code}</span>
      </h1>
    {/if}

    <input
      bind:this={r}
      bind:value={name}
      class="input"
      class:hide={!editing}
      on:focusout={() => {
				editing = false;
			}}
      on:keydown={(e) => {
				if (e.key == 'Escape') {
					editing = false;
				} else if (e.key == 'Enter') {
					send('set_name', { name });
					editing = false;
				}
			}}
      type="text"
    />
  </div>

  <div class="icons">
    {#if $member.isAdmin}
      <div class="icon trash" data-testid="delete" on:click={()=>{
        alert({title:"Voulez vous vraiment supprimer la salle ?",
               description:"L'intégralité des données de la salle sera supprimée et vous ne pourrez plus y accéder",
               validate: ()=>{
         deleteRoom($room.id_code, !$member.isUser ? $member.clientId: null)
        },
                validateButton: "Supprimer la salle"})

         //goto('/room/join')
      }}>
        <FaRegTrashAlt />
      </div>
    {:else}
      <div class="icon trash" data-testid="leave" on:click={()=>{
        alert({title:"Voulez vous vraiment quitter la salle ?",
               description:"Vous perdrez l'intégralité de vos résultats et ne pourrez plus accéder à cette salle sans y avoir été accepté à nouveau",
               validate: ()=>{
          send('leave')
        },
                validateButton: "Quitter la salle"})

        //goto('/room/join')
      }}
           on:keypress={()=>{}}
      >
        <IoMdLogOut />
      </div>
    {/if}

    <div
      class="icon refresh"
      data-testid="refresh"
      on:click={() => {
				ws.reconnect();
			}}
      on:keydown={() => {}}
    >
      <FaUndo />
    </div>
    <div
      class="icon trash"
      data-testid="leave"
      on:click={() => {
				ws.close();
        goto('/room/join')
			}}
      on:keydown={() => {}}
    >
      <FaTimes />
    </div>
  </div>
</div>

<style lang="scss">
  .hide {
    width: 0;
    height: 0;
    padding: 0;
    border: none;
    opacity: 0;
  }

  .title {
    max-width: 50%;
    margin: 10px 0;
    font-size: 2em;
    padding: 0 10px;
    // height: 50px;
    input {
      font-size: inherit;
      font-weight: 700;
      transition: all 0s;
      transition: border 0.3s;
      padding-left: 0;
      padding-top: 0;
    }

    h1 {
      margin: 0;
      font-weight: 700;
      font-size: inherit;

      span {
        font-size: 0.5em;
        color: grey;
      }
    }
  }

  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .icon {
    width: 20px;
    height: 20px;
    transition: 0.2s;
    cursor: pointer;
    display: flex;

    &:hover {
      transform: scale(1.1);
    }
  }

  .trash {
    color: $red;
  }

  .refresh {
    color: $contrast;

    &:hover {
      transform: rotate(-360deg);
    }
  }

  .icons {
    display: flex;
    gap: 20px;
    align-items: center;
  }
</style>