WEB

    - added web front end page

2 files changed, 114 insertions, 0 deletions

diff --git a/web/ytlist/ytlist.css b/web/ytlist/ytlist.css
new file mode 100644
index 0000000..47f6446
--- /dev/null
+++ b/web/ytlist/ytlist.css
@@ -0,0 +1,35 @@
+a:link {
+      text-decoration: none;
+}
+
+a:visited {
+      text-decoration: none;
+}
+
+a:hover {
+      text-decoration: none;
+}
+
+a:active {
+      text-decoration: none;
+}
+
+#the_box{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 5px;
+}
+
+#the_box img {
+    width: 100%;
+}
+
+.video-title, .video-channelname{
+    text-decoration: none;
+    color: #222222;
+}
+
+
+.video-title{
+    font-size: 24px
+}
diff --git a/web/ytlist/ytlist.js b/web/ytlist/ytlist.js
new file mode 100644
index 0000000..d4ab060
--- /dev/null
+++ b/web/ytlist/ytlist.js
@@ -0,0 +1,79 @@
+function insert_item(item,imgurl){
+    the_box.innerHTML+=`<div>
+        <a href="https://youtube.com/watch?v=${item[2]}" target="_BLANK">
+        <span class="video-title">${item[0]}: ${item[1]}</span>
+        <span class="video-channelname">${item[3]}</span>
+        <br>
+        <img src="${imgurl}"></img>
+        </a>
+        </div>`
+}
+
+function get_item(item){
+    fetch(`/ytlist/thumbnails/${item[2]}.webp`,
+        { method: "HEAD" }
+    ).then((res) => {
+        if (res.ok) {
+            insert_item(item,res.url);
+        } else {
+            fetch(`/ytlist/thumbnails/${item[2]}.jpg`,
+                { method: "HEAD" }
+            ).then((res) => {
+                if (res.ok) {
+                    insert_item(item,res.url);
+                } else {
+                    console.log("no");
+                }
+            });
+        }
+    });
+}
+
+async function search(){
+    const sqlPromise = initSqlJs({
+        locateFile: file => `/ytlist/${file}`
+    });
+    const dataPromise = fetch("/ytlist/youtube_stuffs.db").then(res => res.arrayBuffer());
+    const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
+    const db = new SQL.Database(new Uint8Array(buf));
+    //search_box.style.display="none";
+
+    category=document.querySelector('input[name="category_choice"]:checked').value;
+    let query="SELECT rowid,* FROM ytlist"
+    if (category!="ALL"){
+        query+=` WHERE category='${category}'`
+        if (search_in.value != ""){
+            query+=` AND title LIKE '%${search_in.value}%'`
+        }
+    } else if (search_in.value != ""){
+        query+=` WHERE title LIKE '%${search_in.value}%'`
+    }
+
+    let res = db.exec(query);
+
+    the_box.innerHTML="";
+    res[0].values.forEach(item=>{get_item(item)});
+}
+
+
+async function init(){
+    const sqlPromise = initSqlJs({
+        locateFile: file => `/ytlist/${file}`
+    });
+    const dataPromise = fetch("/ytlist/youtube_stuffs.db").then(res => res.arrayBuffer());
+    const [SQL, buf] = await Promise.all([sqlPromise, dataPromise])
+    const db = new SQL.Database(new Uint8Array(buf));
+
+    const res = db.exec("SELECT category FROM ytlist");
+
+    let categories=[]
+    res[0].values.forEach(item=>{
+        if (categories.indexOf(item[0]) < 0) {
+            categories.push(item[0]);
+
+            category_box.innerHTML+=`<input type="radio" name="category_choice" value="${item[0]}"> ${item[0]}<br>`
+        }
+    })
+
+}
+init()