From 0a7254b7fa0871a9e7db24c10ac55d5f76ad0e61 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Mon, 5 Dec 2022 12:04:39 +0900 Subject: feat: !WIP frontend for nrk radio --- src/Endpoints/CreateRadioIndex.cs | 18 ----------- src/Endpoints/GetRadioSeriesList.cs | 13 ++++++++ src/Pages/NrkRadio.cshtml | 3 +- src/wwwroot/radio.js | 60 +++++++++++++++++++++++++++++++++++-- src/wwwroot/vendor/fuzzysort.min.js | 2 ++ 5 files changed, 75 insertions(+), 21 deletions(-) delete mode 100644 src/Endpoints/CreateRadioIndex.cs create mode 100644 src/Endpoints/GetRadioSeriesList.cs create mode 100644 src/wwwroot/vendor/fuzzysort.min.js (limited to 'src') diff --git a/src/Endpoints/CreateRadioIndex.cs b/src/Endpoints/CreateRadioIndex.cs deleted file mode 100644 index 1ef19ab..0000000 --- a/src/Endpoints/CreateRadioIndex.cs +++ /dev/null @@ -1,18 +0,0 @@ -using Microsoft.AspNetCore.Mvc; - -namespace I2R.LightNews.Endpoints; - -public class RadioSearchEndpoint : EndpointBase -{ - private readonly NrkRadioService _radio; - - public RadioSearchEndpoint(NrkRadioService radio) { - _radio = radio; - } - - [HttpGet("~/create-radio-index")] - public async Task HandleASync() { - await _radio.CreateIndex(); - return Ok(); - } -} \ No newline at end of file diff --git a/src/Endpoints/GetRadioSeriesList.cs b/src/Endpoints/GetRadioSeriesList.cs new file mode 100644 index 0000000..7898f25 --- /dev/null +++ b/src/Endpoints/GetRadioSeriesList.cs @@ -0,0 +1,13 @@ +using Microsoft.AspNetCore.Mvc; + +namespace I2R.LightNews.Endpoints; + +public class RadioSearchEndpoint : EndpointBase +{ + public RadioSearchEndpoint() { } + + [HttpGet("~/radio-series")] + public async Task HandleAsync(string q) { + return Ok(RadioIndexDb.GetSeries(q)); + } +} \ No newline at end of file diff --git a/src/Pages/NrkRadio.cshtml b/src/Pages/NrkRadio.cshtml index 4679c0f..2f3f2f1 100644 --- a/src/Pages/NrkRadio.cshtml +++ b/src/Pages/NrkRadio.cshtml @@ -1,12 +1,13 @@ @page "/nrk-radio" @model I2R.LightNews.Pages.NrkRadio @{ - Layout = "_Layout"; + ViewData["Title"] = "NRK Radio"; }
@section Scripts { + } \ No newline at end of file diff --git a/src/wwwroot/radio.js b/src/wwwroot/radio.js index d0e3fdd..3edc99e 100644 --- a/src/wwwroot/radio.js +++ b/src/wwwroot/radio.js @@ -1,4 +1,60 @@ const app = document.getElementById("app"); -const appData = document.getElementById("app-data"); +let series; -app.innerText = "Laster..."; +async function get_series() { + app.innerHTML = "Laster..."; + const response = await fetch("/radio-series"); + if (response.ok) { + series = await response.json(); + return series; + } + app.innerHTML = "Kunne ikke hente data, prøv igjen snart!"; + return null; +} + +function search(query) { + if (!query) { + document.querySelectorAll("#series li").forEach(el => el.style.display = "list-item"); + return; + } + console.log("Searching for " + query); + const results = fuzzysort.go(query, series, {key: "name"}); + console.log("Found " + results.length + " results"); + const ids = results.map(x => x.obj.id); + for (const seriesEl of document.querySelectorAll("#series li")) { + seriesEl.style.display = ids.includes(parseInt(seriesEl.dataset.id)) ? "list-item" : "none"; + } +} + +function build_frontpage(series) { + const listEl = document.createElement("ul"); + listEl.id = "series"; + listEl.style.listStyle = "none"; + listEl.style.maxHeight = "70vh"; + listEl.style.overflow = "auto"; + listEl.style.padding = "0"; + for (const serie of series) { + const listItemEl = document.createElement("li"); + const listItemDetailsEl = document.createElement("details"); + const listItemDetailsSummaryEl = document.createElement("summary"); + listItemEl.dataset.id = serie.id; + listItemDetailsSummaryEl.innerText = serie.name; + listItemDetailsEl.appendChild(listItemDetailsSummaryEl); + listItemEl.appendChild(listItemDetailsEl); + listEl.appendChild(listItemEl); + } + + const searchInputEl = document.createElement("input"); + searchInputEl.id = "series-searcher"; + searchInputEl.placeholder = "Søk her"; + searchInputEl.oninput = (event) => { + search(event.target.value); + }; + app.innerHTML = ""; + app.appendChild(searchInputEl); + app.appendChild(listEl); +} + +document.addEventListener("DOMContentLoaded", () => { + get_series().then(build_frontpage); +}) \ No newline at end of file diff --git a/src/wwwroot/vendor/fuzzysort.min.js b/src/wwwroot/vendor/fuzzysort.min.js new file mode 100644 index 0000000..ed074ba --- /dev/null +++ b/src/wwwroot/vendor/fuzzysort.min.js @@ -0,0 +1,2 @@ +// https://github.com/farzher/fuzzysort v2.0.4 +((r,e)=>{"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():r.fuzzysort=e()})(this,r=>{"use strict";var i,o,e,a,f=r=>{var e=v(r="string"!=typeof r?"":r);return{target:r,t:e.i,o:e.v,u:N,l:e.g,score:N,_:[0],obj:N}},t=r=>{r=(r="string"!=typeof r?"":r).trim();var e=v(r),a=[];if(e.p)for(var f,t=r.split(/\s+/),t=[...new Set(t)],n=0;n{var e;return 999{var e;return 999{if(!1===a&&r.p)return j(r,e);for(var a=r.i,f=r.v,t=f[0],n=e.o,i=f.length,o=n.length,v=0,s=0,u=0;;){if(t===n[s]){if(C[u++]=s,++v===i)break;t=f[v]}if(o<=++s)return N}var v=0,l=!1,g=0,d=e.u,c=(d===N&&(d=e.u=k(e.target)),s=0===C[0]?0:d[C[0]-1],0);if(s!==o)for(;;)if(o<=s){if(v<=0)break;if(200<++c)break;--v;s=d[L[--g]]}else if(f[v]===n[s]){if(L[g++]=s,++v===i){l=!0;break}++s}else s=d[s];var w=e.t.indexOf(a,C[0]),r=~w;if(r&&!l)for(var _=0;_{for(var a=new Set,f=0,t=N,n=0,i=r.h,o=0;of)return r;t.score=f;var u,o=0;for(u of a)t._[o++]=u;return t._.j=o,t},v=r=>{for(var e=r.length,a=r.toLowerCase(),f=[],t=0,n=!1,i=0;i{for(var e=r.length,a=(r=>{for(var e=r.length,a=[],f=0,t=!1,n=!1,i=0;i{for(var e=J,a=r.length,f=0;f{var a=r[e];if(void 0!==a)return a;for(var f=e,t=(f=Array.isArray(e)?f:e.split(".")).length,n=-1;r&&++n"object"==typeof r,H=1/0,J=-H,K=[],N=null,O=(i=[],o=K.total=0,a=r=>{for(var e=i[t=0],a=1;a>1]=i[t],a=1+(t<<1)}for(var n=t-1>>1;0>1)i[t]=i[n];i[t]=e},(e={}).add=r=>{var e=o;i[o++]=r;for(var a=e-1>>1;0>1)i[e]=i[a];i[e]=r},e.k=r=>{var e;if(0!==o)return e=i[0],i[0]=i[--o],a(),e},e.C=r=>{if(0!==o)return i[0]},e.L=r=>{i[0]=r,a()},e);return{single:(r,e)=>{var a;return"farzher"==r?{target:"farzher was here (^-^*)/",score:0,_:[0]}:!r||!e||(r=q(r),G(e)||(e=M(e)),((a=r.g)&e.l)!==a)?N:D(r,e)},go:(r,e,a)=>{if("farzher"==r)return[{target:"farzher was here (^-^*)/",score:0,_:[0],obj:e?e[0]:N}];if(!r)if(a&&a.all){var f=e;var t=a;var n=[],i=(n.total=f.length,t&&t.limit||H);if(t&&t.key)for(var o=0;o=i)return n}else if(t&&t.keys)for(o=0;o=0;--g){s=F(v,t.keys[g]);if(!s){l[g]=N;continue}if(!G(s))s=M(s);s.score=J;s._.j=0;l[g]=s}l.obj=v;l.score=J;n.push(l);if(n.length>=i)return n}else for(o=0;o=i)return n}return n;return}else return K;var d=q(r),c=d.g,w=(d.p,a&&a.threshold||J),_=a&&a.limit||H,b=0,p=0,x=e.length;if(a&&a.key)for(var h=a.key,y=0;yO.C().score&&O.L(B)))}else if(a&&a.keys)for(var k=a.scoreFn||E,C=a.keys,L=C.length,y=0;yO.C().score&&O.L(S)))}else for(var m,B,y=0;yO.C().score&&O.L(B)));if(0===b)return K;for(var I=new Array(b),y=b-1;0<=y;--y)I[y]=O.k();return I.total=b+p,I},highlight:(r,e,a)=>{if("function"==typeof e){var f=e;if((l=r)===N)return N;for(var t=l.target,n=t.length,i=(i=l._).slice(0,i.j).sort((r,e)=>r-e),o="",v=0,s=0,u=!1,l=[],g=0;g"),void 0===a&&(a="");for(var c="",w=0,_=!1,b=r.target,p=b.length,x=(x=r._).slice(0,x.j).sort((r,e)=>r-e),h=0;hr._.slice(0,r._.j).sort((r,e)=>r-e),cleanup:()=>{n.clear(),s.clear(),C=[],L=[]}}}); \ No newline at end of file -- cgit v1.3