anatolykopyl/variants
1
0
Fork 0
mirror of https://github.com/anatolykopyl/variants.git synced 2026-03-26 12:54:36 +00:00
Code Issues Projects Releases Wiki Activity

➡️ Ввод имени по нажатию enter

Browse Source 
* Более подробные сообщения о неверном коде подключения
* CSS курсора при наведении на кнопку
* Ссылка на главную
This commit is contained in:
Anatoly Kopyl
2020-10-02 16:43:47 +03:00
parent b9e94883e5
commit c75b158762
2 changed files with 29 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/routes/index.svelte
View File

@@ -10,13 +10,18 @@
let id; let id;
let invalidId = false; let invalidId = false;
let invalidIdMsg = '';
function connect() { function connect() {
if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id)) { if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id)) {
const url=`${process.env.URL}/room/?id=${id}`; const url=`${process.env.URL}/room/?id=${id}`;
window.location.href = url; window.location.href = url;
} else if (id === '' || id === undefined) {
invalidId = true;
invalidIdMsg = 'Введите код'
} else { } else {
invalidId = true; invalidId = true;
invalidIdMsg = 'Неверный формат кода :('
} }
} }
@@ -65,7 +70,7 @@
<div class="inputWrap"> <div class="inputWrap">
Код подключения:<br> Код подключения:<br>
<input type="text" size="45" placeholder="43d0505c-d695-4323-9140-5d7744ec95e7" bind:value={id}> <input type="text" size="45" placeholder="43d0505c-d695-4323-9140-5d7744ec95e7" bind:value={id}>
{#if invalidId}<span class="error-hint">Неверный формат кода :(</span>{/if} {#if invalidId}<span class="error-hint">{invalidIdMsg}</span>{/if}
</div> </div>
<span style="text-align: center;"> <span style="text-align: center;">
<input class="btn" type="button" value="Подключиться" on:click={connect}> <input class="btn" type="button" value="Подключиться" on:click={connect}>

34
src/routes/room.svelte
View File

@@ -44,16 +44,18 @@
let nameInput = []; let nameInput = [];
let enabledInput; let enabledInput;
function selectVar(selected) { function selectVar(selected, event) {
if (!room.teams[selected]) { if (!event || event && event.keyCode === 13) {
room.teams[selected] = []; if (!room.teams[selected]) {
} room.teams[selected] = [];
if (nameInput[selected] !== "" && nameInput[selected] !== undefined) { }
room.teams[selected][room.teams[selected].length] = nameInput[selected]; if (nameInput[selected] !== "" && nameInput[selected] !== undefined) {
//room.teams[selected].push(nameInput[selected]); room.teams[selected][room.teams[selected].length] = nameInput[selected];
var url = `${process.env.URL}/api/select/?id=${parsed.id}&name=${nameInput[selected]}&team=${selected}`; //room.teams[selected].push(nameInput[selected]);
fetch(url); var url = `${process.env.URL}/api/select/?id=${parsed.id}&name=${nameInput[selected]}&team=${selected}`;
nameInput[selected] = ""; fetch(url);
nameInput[selected] = "";
}
} }
} }
@@ -85,6 +87,7 @@
<list> <list>
{#if room} {#if room}
<div class="exit"><a href={process.env.URL}>Вернуться на главную</a></div>
<h1>{room.name}</h1> <h1>{room.name}</h1>
<p class="subtext">По {room.group == "true" ? "бригадам" : "вариантам"}</p> <p class="subtext">По {room.group == "true" ? "бригадам" : "вариантам"}</p>
<ol> <ol>
@@ -100,7 +103,7 @@
{/each} {/each}
{#if room.teams[i].length == 0 || room.group == "true"} {#if room.teams[i].length == 0 || room.group == "true"}
<input class="addName" type="button" value="+" on:click={() => selectVar(i)}> <input class="addName" type="button" value="+" on:click={() => selectVar(i)}>
<input class="nameInput" type="text" bind:value={nameInput[i]}> <input class="nameInput" type="text" bind:value={nameInput[i]} on:keyup={(event) => selectVar(i, event)}>
{/if} {/if}
</li> </li>
{/each} {/each}
@@ -124,6 +127,14 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
.exit {
height: 0px;
width: 100%;
text-align: left;
font-size: small;
cursor: pointer;
}
.subtext { .subtext {
font-size: x-small; font-size: x-small;
margin-bottom: 50px; margin-bottom: 50px;
@@ -182,6 +193,7 @@
text-align: center; text-align: center;
margin-right: 15px; margin-right: 15px;
margin-left: 15px; margin-left: 15px;
cursor: pointer;
} }
.deleteName { .deleteName {