okb1100/kamera.html

## kamera.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>İzmir Kamera</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style>
        .list-group{
            height: 90vh;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
</body>
<script type="module">
    import { h, Component, } from 'https://unpkg.com/preact?module';
    import { useState, useEffect } from 'https://unpkg.com/preact/hooks/dist/hooks.module.js?module';
    import { html, render } from 'https://unpkg.com/htm/preact/index.mjs?module'

    function CameraList(props) {
        const [cameraList, setCameraList] = useState([])

        useEffect(async () => {
            const url = "https://izum.izmir.bel.tr/v1/workspaces/cameras?_=1606082947749"
            setCameraList(await fetch(url).then(res => res.json()))
         }, []);

        return html`<div className="list-group">
                ${cameraList.map((cam) => html`<a className="list-group-item ${props.url === cam.mjpegStreamUrl ? 'active' : ''}" href="#" onClick="${props.onClick}" data-url="${cam.mjpegStreamUrl}">${cam.name}</a>`)}
            </div>`
    }

    function Player(props) {
        return html`<img class="w-100" src="${props.url}" />`
    }

    function App(props) {
        const [url, setUrl] = useState(undefined);
        return html`
        <div class="container-fluid">
            <div class="row mt-3">
                <div class="col-12 col-lg-9">
                <p>
                    Bir kamera seçin. Bazıları çalışmıyor, belediyenin problemi.
                </p>
                ${url && html`<${Player} url="${url}" />`}
            </div>

                <div class="col-12 col-lg-3">
                    <${CameraList} url="${url}" onClick="${(e) => {
                            setUrl(e.target.dataset.url)
                        }
                    }"/>
                </div>

        </div>
        </div>`;
    }

    render(html`<${App} />`, document.body);
</script>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>İzmir Kamera</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
	integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	<style>
	.list-group{
	height: 90vh;
	overflow-y: scroll;
	}
	</style>
	</head>

	<body>
	</body>
	<script type="module">
	import { h, Component, } from 'https://unpkg.com/preact?module';
	import { useState, useEffect } from 'https://unpkg.com/preact/hooks/dist/hooks.module.js?module';
	import { html, render } from 'https://unpkg.com/htm/preact/index.mjs?module'

	function CameraList(props) {
	const [cameraList, setCameraList] = useState([])

	useEffect(async () => {
	const url = "https://izum.izmir.bel.tr/v1/workspaces/cameras?_=1606082947749"
	setCameraList(await fetch(url).then(res => res.json()))
	}, []);

	return html`<div className="list-group">
	${cameraList.map((cam) => html`<a className="list-group-item ${props.url === cam.mjpegStreamUrl ? 'active' : ''}" href="#" onClick="${props.onClick}" data-url="${cam.mjpegStreamUrl}">${cam.name}</a>`)}
	</div>`
	}

	function Player(props) {
	return html`<img class="w-100" src="${props.url}" />`
	}

	function App(props) {
	const [url, setUrl] = useState(undefined);
	return html`
	<div class="container-fluid">
	<div class="row mt-3">
	<div class="col-12 col-lg-9">
	<p>
	Bir kamera seçin. Bazıları çalışmıyor, belediyenin problemi.
	</p>
	${url && html`<${Player} url="${url}" />`}
	</div>

	<div class="col-12 col-lg-3">
	<${CameraList} url="${url}" onClick="${(e) => {
	setUrl(e.target.dataset.url)
	}
	}"/>
	</div>

	</div>
	</div>`;
	}

	render(html`<${App} />`, document.body);
	</script>

	</html>