Last active
December 31, 2021 13:35
-
-
Save okb1100/c25f22656a408e3893bca2431e1b18a9 to your computer and use it in GitHub Desktop.
#preact #scraping
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment