- multi db files for web

- still load db item if no thumbnail

web/ytlist.html

@@ -12,7 +12,11 @@
             category
             <div id="category_box">
                 <input type="radio" name="category_choice" value="ALL" checked> ALL<br>
-            </div>
+            </div><br>
+
+            <div id="db_box">
+                <input type="radio" name="db_choice" value="youtube_stuffs.db" checked> youtube_stuffs.db<br>
+            </div><br>
             <button onclick="search()">search</button><br>
         </div>
         <div id="the_box"></div>

web/ytlist/ytlist.js

@@ -1,3 +1,5 @@
+let db_file="youtube_stuffs.db"
+
 function insert_item(item,imgurl){
     the_box.innerHTML+=`<div>
         <a href="https://youtube.com/watch?v=${item[2]}" target="_BLANK">
@@ -22,7 +24,7 @@ function get_item(item){
                 if (res.ok) {
                     insert_item(item,res.url);
                 } else {
-                    console.log("no");
+                    insert_item(item,null);
                 }
             });
         }
@@ -33,7 +35,7 @@ async function search(){
     const sqlPromise = initSqlJs({
         locateFile: file => `/ytlist/${file}`
     });
-    const dataPromise = fetch("/ytlist/youtube_stuffs.db").then(res => res.arrayBuffer());
+    const dataPromise = fetch("/ytlist/"+db_file).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";
@@ -55,18 +57,19 @@ async function search(){
     res[0].values.forEach(item=>{get_item(item)});
 }
 
-
+let first=false
 async function init(){
     const sqlPromise = initSqlJs({
         locateFile: file => `/ytlist/${file}`
     });
-    const dataPromise = fetch("/ytlist/youtube_stuffs.db").then(res => res.arrayBuffer());
+    const dataPromise = fetch("/ytlist/"+db_file).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=[]
+    category_box.innerHTML=`<input type="radio" name="category_choice" value="ALL" checked> ALL<br>`
     res[0].values.forEach(item=>{
         if (categories.indexOf(item[0]) < 0) {
             categories.push(item[0]);
@@ -75,5 +78,23 @@ async function init(){
         }
     })
 
+    if(first==false){
+        db_box.innerHTML=`<input type="radio" name="db_choice" value="youtube_stuffs.db" checked> youtube_stuffs.db<br>`
+        fetch(`/ytlist/youtube_stuffs_2.db`,
+            { method: "HEAD" }
+        ).then((res) => {
+            if (res.ok) {
+                db_box.innerHTML+=`<input type="radio" name="db_choice" value="youtube_stuffs_2.db"> youtube_stuffs_2.db<br>`
+            }
+        });
+    }
+    first=true
 }
 init()
+
+document.body.addEventListener('change', function(event){
+    if(event.target.name=="db_choice"){
+        db_file=event.target.value
+        init()
+    }
+})