136 lines
No EOL
5.9 KiB
HTML
136 lines
No EOL
5.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
<title>ID converter</title>
|
|
<link rel="stylesheet" href="main.css">
|
|
<script src="main.js"></script>
|
|
<script>
|
|
window.addEventListener(
|
|
'DOMContentLoaded',
|
|
() => {
|
|
const vcToT = value => atob(value).slice(2, -2);
|
|
document.querySelector('input[name="VC>T/VC"]').addEventListener(
|
|
'input',
|
|
event => {
|
|
let value;
|
|
try { value = vcToT(event.target.value); } catch {}
|
|
document.querySelector('input[name="VC>T/T"]').value = value || '';
|
|
}
|
|
);
|
|
document.querySelector('input[name="T>VC/T"]').addEventListener(
|
|
'input',
|
|
event => {
|
|
let value;
|
|
try { value = btoa(`0#${event.target.value}#0`) } catch {}
|
|
document.querySelector('input[name="T>VC/VC"]').value = value || '';
|
|
}
|
|
);
|
|
document.querySelectorAll('input[name="VC+O>M/VC"], input[name="VC+O>M/O"]')
|
|
.forEach(element => element.addEventListener('input', () => {
|
|
const
|
|
organizerId = document.querySelector('input[name="VC+O>M/O"]').value,
|
|
threadId = vcToT(document.querySelector('input[name="VC+O>M/VC"]').value);
|
|
let value;
|
|
try { value = organizerId && threadId ? btoa(`1*${organizerId}*0**${threadId}`) : undefined } catch {}
|
|
document.querySelector('input[name="VC+O>M/M"]').value = value || '';
|
|
}));
|
|
}
|
|
);
|
|
</script>
|
|
<style>
|
|
input[type=text] {
|
|
font-family: monospace;
|
|
}
|
|
.IdConverter__Fieldset__Inner,
|
|
.IdConverter__Fieldset__Inner__Input,
|
|
.IdConverter__Fieldset__Inner__Output {
|
|
align-items: center;
|
|
column-gap: 1rem;
|
|
}
|
|
.IdConverter__Fieldset__Inner {
|
|
display: flex;
|
|
text-align: center;
|
|
}
|
|
.IdConverter__Fieldset__Inner__Input,
|
|
.IdConverter__Fieldset__Inner__Output {
|
|
flex: 1;
|
|
display: flex;
|
|
}
|
|
.IdConverter__Fieldset__Inner__Input {
|
|
flex-direction: column;
|
|
row-gap: 1rem;
|
|
}
|
|
.IdConverter__Fieldset__Inner__Output::before {
|
|
content: '❱';
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="tool IdConverter">
|
|
<form>
|
|
<fieldset class="card">
|
|
<legend class="card">Visio conference ID ➝ Thread ID</legend>
|
|
<div class="IdConverter__Fieldset__Inner">
|
|
<div class="IdConverter__Fieldset__Inner__Input">
|
|
<label>
|
|
Visio conference ID
|
|
<br>
|
|
<input name="VC>T/VC" class="form-control" type="text">
|
|
</label>
|
|
</div>
|
|
<div class="IdConverter__Fieldset__Inner__Output">
|
|
<label>
|
|
Thread ID
|
|
<br>
|
|
<input name="VC>T/T" class="form-control" type="text" readonly>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset class="card">
|
|
<legend class="card">Thread ID ➝ Visio conference ID</legend>
|
|
<div class="IdConverter__Fieldset__Inner">
|
|
<div class="IdConverter__Fieldset__Inner__Input">
|
|
<label>
|
|
Thread ID
|
|
<br>
|
|
<input name="T>VC/T" class="form-control" type="text">
|
|
</label>
|
|
</div>
|
|
<div class="IdConverter__Fieldset__Inner__Output">
|
|
<label>
|
|
Visio conference ID
|
|
<br>
|
|
<input name="T>VC/VC" class="form-control" type="text" readonly>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset class="IdConverter__Fieldset card">
|
|
<legend class="card">Visio conference ID + Organizer ID ➝ Meeting ID</legend>
|
|
<div class="IdConverter__Fieldset__Inner">
|
|
<div class="IdConverter__Fieldset__Inner__Input">
|
|
<label>
|
|
Visio conference ID
|
|
<br>
|
|
<input name="VC+O>M/VC" class="form-control" type="text">
|
|
</label>
|
|
<label>
|
|
Organizer ID
|
|
<br>
|
|
<input name="VC+O>M/O" class="form-control" type="text">
|
|
</label>
|
|
</div>
|
|
<div class="IdConverter__Fieldset__Inner__Output">
|
|
<label>
|
|
Meeting ID
|
|
<br>
|
|
<input name="VC+O>M/M" class="form-control" type="text" readonly>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</body>
|
|
</html> |