www/add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>go2rtc - Add Stream</title>
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        .module {
            display: none;
            padding: 10px;
        }


        table tbody td {
            font-size: 13px;
        }

    </style>
</head>
<body>
<script src="main.js"></script>
<script>
    function drawTable(table, data) {
        const cols = ['id', 'name', 'info', 'url', 'location'];
        const th = (row) => cols.reduce((html, k) => k in row ? `${html}<th>${k}</th>` : html, '<tr>') + '</tr>';
        const td = (row) => cols.reduce((html, k) => k in row ? `${html}<td>${row[k]}</td>` : html, '<tr>') + '</tr>';

        const thead = th(data.sources[0]);
        const tbody = data.sources.reduce((html, source) => `${html}${td(source)}`, '');

        table.innerHTML = `<thead>${thead}</thead><tbody>${tbody}</tbody>`;
    }

    async function getSources(tableID, url) {
        const table = document.getElementById(tableID);
        table.innerText = 'loading...';

        const r = typeof url === 'string' ? await fetch(url, {cache: 'no-cache'}) : url;
        if (!r.ok) {
            table.innerText = await r.text();
            return;
        }

        drawTable(table, await r.json());
    }
</script>


<button id="stream">Temporary stream</button>
<div class="module">
    <form id="stream-form" style="padding: 10px">
        <input type="text" name="name" placeholder="name">
        <input type="text" name="src" placeholder="url">
        <input type="submit" value="add">
    </form>
</div>
<script>
    document.getElementById('stream').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
    });

    document.getElementById('stream-form').addEventListener('submit', async ev => {
        ev.preventDefault();

        const url = new URL('api/streams', location.href);
        url.searchParams.set('name', ev.target.elements['name'].value);
        url.searchParams.set('src', ev.target.elements['src'].value);

        const r = await fetch(url, {method: 'PUT'});
        alert(r.ok ? 'OK' : 'ERROR: ' + await r.text());
    });
</script>


<button id="homekit">Apple HomeKit</button>
<div class="module">
    <form id="homekit-pair" style="margin-bottom: 10px">
        <input type="text" name="id" placeholder="stream id" size="20">
        <input type="text" name="url" placeholder="url" size="40">
        <input type="text" name="pin" placeholder="pin" size="10">
        <input type="submit" value="Pair">
    </form>
    <form id="homekit-unpair" style="margin-bottom: 10px">
        <input type="text" name="id" placeholder="stream id" size="20">
        <input type="submit" value="Unpair">
    </form>
    <table id="homekit-table"></table>
</div>
<script>
    async function reloadHomeKit() {
        await getSources('homekit-table', 'api/homekit');

        const rows = document.querySelectorAll('#homekit-table tr');
        rows.forEach((row, i) => {
            let commands = '';
            if (row.children[2].innerText.indexOf('status=1') > 0) {
                commands += '<a href="#">pair</a>';
            } else if (i > 0 && row.children[3].innerText) {
                commands += '<a href="#">unpair</a>';
            }
            row.innerHTML += `<td>${commands}</td>`;
        });
    }

    document.getElementById('homekit').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await reloadHomeKit();
    });

    document.getElementById('homekit-table').addEventListener('click', ev => {
        if (ev.target.innerText === 'pair') {
            const form = document.querySelector('#homekit-pair');
            const row = ev.target.closest('tr');
            form.children[0].value = row.children[0].innerText;
            form.children[1].value = row.children[2].innerText;
        } else if (ev.target.innerText === 'unpair') {
            const form = document.querySelector('#homekit-unpair');
            const row = ev.target.closest('tr');
            form.children[0].value = row.children[3].innerText;
        }
    });

    document.getElementById('homekit-pair').addEventListener('submit', async ev => {
        ev.preventDefault();

        const body = new FormData(ev.target);
        body.set('url', body.get('url') + '&pin=' + body.get('pin'));
        body.delete('pin');

        const r = await fetch('api/homekit', {method: 'POST', body: body});
        alert(r.ok ? 'OK' : 'ERROR: ' + await r.text());

        await reloadHomeKit();
    });

    document.getElementById('homekit-unpair').addEventListener('submit', async ev => {
        ev.preventDefault();
        const r = await fetch('api/homekit', {method: 'DELETE', body: new FormData(ev.target)});
        alert(r.ok ? 'OK' : 'ERROR: ' + await r.text());

        await reloadHomeKit();
    });
</script>


<button id="dvrip">DVRIP</button>
<div class="module">
    <table id="dvrip-table"></table>
</div>
<script>
    document.getElementById('dvrip').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await getSources('dvrip-table', 'api/dvrip');
    });
</script>


<button id="devices">FFmpeg Devices (USB)</button>
<div class="module">
    <table id="devices-table"></table>
</div>
<script>
    document.getElementById('devices').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await getSources('devices-table', 'api/ffmpeg/devices');
    });
</script>


<button id="hardware">FFmpeg Hardware</button>
<div class="module">
    <table id="hardware-table"></table>
</div>
<script>
    document.getElementById('hardware').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await getSources('hardware-table', 'api/ffmpeg/hardware');
    });
</script>


<button id="nest">Google Nest</button>
<div class="module">
    <form id="nest-form" style="margin-bottom: 10px">
        <input type="text" name="client_id" placeholder="client_id">
        <input type="text" name="client_secret" placeholder="client_secret">
        <input type="text" name="refresh_token" placeholder="refresh_token">
        <input type="text" name="project_id" placeholder="project_id">
        <input type="submit" value="Login">
    </form>
    <table id="nest-table"></table>
</div>
<script>
    document.getElementById('nest').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
    });

    document.getElementById('nest-form').addEventListener('submit', async ev => {
        ev.preventDefault();

        const query = new URLSearchParams(new FormData(ev.target));
        const url = new URL('api/nest?' + query.toString(), location.href);

        const r = await fetch(url, {cache: 'no-cache'});
        await getSources('nest-table', r);
    });
</script>


<button id="gopro">GoPro</button>
<div class="module">
    <table id="gopro-table"></table>
</div>
<script>
    document.getElementById('gopro').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await getSources('gopro-table', 'api/gopro');
    });
</script>


<button id="hass">Home Assistant</button>
<div class="module">
    <table id="hass-table"></table>
</div>
<script>
    document.getElementById('hass').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await getSources('hass-table', 'api/hass');
    });
</script>


<button id="onvif">ONVIF</button>
<div class="module">
    <form id="onvif-form" style="padding: 10px">
        <input type="text" name="src" placeholder="onvif://user:pass@192.168.1.123:80" size="50">
        <input type="submit" value="test">
    </form>
    <table id="onvif-table"></table>
</div>
<script>
    document.getElementById('onvif').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await getSources('onvif-table', 'api/onvif');
    });

    document.getElementById('onvif-form').addEventListener('submit', async ev => {
        ev.preventDefault();

        const url = new URL('api/onvif', location.href);
        url.searchParams.set('src', ev.target.elements['src'].value);

        await getSources('onvif-table', url.toString());
    });
</script>


<button id="roborock">Roborock</button>
<div class="module">
    <form id="roborock-form" style="margin-bottom: 10px">
        <input type="text" name="username" placeholder="username">
        <input type="password" name="password" placeholder="password">
        <input type="submit" value="Login">
    </form>
    <table id="roborock-table">
    </table>
</div>
<script>
    document.getElementById('roborock').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await getSources('roborock-table', 'api/roborock');
    });

    document.getElementById('roborock-form').addEventListener('submit', async ev => {
        ev.preventDefault();
        const r = await fetch('api/roborock', {method: 'POST', body: new FormData(ev.target)});
        await getSources('roborock-table', r);
    });
</script>


<button id="webtorrent">WebTorrent Shares</button>
<div class="module">
    <table id="webtorrent-table"></table>
</div>
<script>
    document.getElementById('webtorrent').addEventListener('click', async ev => {
        ev.target.nextElementSibling.style.display = 'block';
        await getSources('webtorrent-table', 'api/webtorrent');
    });
</script>


</body>
</html>