From c6ece9af862a4c1644b2da6ab8d326ca6d408fd9 Mon Sep 17 00:00:00 2001 From: 2weiEmu Date: Tue, 16 Jun 2026 16:22:25 +0200 Subject: [PATCH] added: images and top part of the page now looks right --- public/css/index.css | 17 +++++++++++----- public/img/add-song-button.png | Bin 0 -> 849 bytes public/img/music-not-present.png | Bin 0 -> 1220 bytes public/img/music-present.png | Bin 0 -> 1006 bytes public/img/reload-button.png | Bin 0 -> 1870 bytes public/index.html | 10 ++++------ public/js/index.js | 33 ++++++++++++++++++++++++------- songmanager | Bin 11702364 -> 11702364 bytes 8 files changed, 42 insertions(+), 18 deletions(-) create mode 100644 public/img/add-song-button.png create mode 100644 public/img/music-not-present.png create mode 100644 public/img/music-present.png create mode 100644 public/img/reload-button.png diff --git a/public/css/index.css b/public/css/index.css index df176b8..8b745d4 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -20,9 +20,11 @@ h1, a { input { background-color: var(--lighter-background); border: none; - padding: 12px; + padding: 12px 24px 12px 24px; border-radius: 15px; color: var(--green-background); + font-size: 16px; + font-family: "Sansita", sans-serif; } input:focus { @@ -32,10 +34,17 @@ input:focus { #songFilterInputs { display: flex; + justify-content: space-between; + margin: 0 0 20px 0; + + input { + width: 33%; + } } -#songFilterInputs * { - margin: 10px; +#filterDBImage, #updateSongsButton, #addSongButton { + height: 42px; + width: 42px; } @@ -43,8 +52,6 @@ input:focus { overflow-y: scroll; height: 50vh; max-width: 50vw; - border: 1px solid grey; - border-radius: 10px; } diff --git a/public/img/add-song-button.png b/public/img/add-song-button.png new file mode 100644 index 0000000000000000000000000000000000000000..09ebd139f12187b962d17f444a7bc531cf86b297 GIT binary patch literal 849 zcmeAS@N?(olHy`uVBq!ia0y~yV6XvU4mJh`2CF|eix?OfI14-?iy0WWg+Z8+Vb&Z8 z1_lPk;vjb?hIQv;UNSH+u%tWsIx;Y9?C1WI$jZRLz*piLQ4*Y=R#Ki=l*-_inVy?C zZ{xIN1_q`xo-U3d6^w6ZpU;vC6lt&jZl&8OQOMzPYwDs4FP8mcIV*j|{KOQoT{&-r zZ}={p9TKj(MfDe3ZoI-tt-GqNi((~8L^mw4FyU+wdiL$!#;%KoAN`FV&HQP$xIFF1 zdE;W+V$1eKmRD<=Kd5do*~}DK@UP=w7n4rUOeG(-vW&<_(iUaHRj)2&um&0S7v7%t_SLd#%pOyk|-8-KzExDPweDQ`UwYU3T*&OC7 ztTi<^xMg2(WmVqkUPh@YkE%X-zGrw}yI6_aY7^Jv6>qOBm40~ZWO*|y)9nQvszo24 zhB)rs()xOB))l6*C#N+slKvfY)mfbG^Lx^?O|KVdujXi9v-_J$j(db(Na+Q!up5ET zwodjE`;sd9P(kd{te%fjF-h5mw`J z^K z-wO&d3m9&T+B~txAA^s(?zuF*zkvI{+_FA>A6aC}9~EWYuM9< z#+^Z|7i{vZ`ucb4nQHRfxSEjYf9$4c;`SqL3$s@5e2}x`P!<=y+7V0(Gl^xvicl(l$_Np1*i9=Ah3UzsIc+n)^zkm4*74fT+DaqmIczdI+zE~P#|GYTRaJ@@p;4{(I`pFxVd6bok->va+z8%%+H?2z`(%Z>FVdQ&MBb@06$TKz5oCK literal 0 HcmV?d00001 diff --git a/public/img/music-not-present.png b/public/img/music-not-present.png new file mode 100644 index 0000000000000000000000000000000000000000..4a18c8254ce8d8dda2f322c76f683ad7576c52be GIT binary patch literal 1220 zcmeAS@N?(olHy`uVBq!ia0y~yV6XvU4mJh`2CF|eix?OfI14-?iy0WWg+Z8+Vb&Z8 z1_lPk;vjb?hIQv;UNSH+u%tWsIx;Y9?C1WI$jZRLz*piLQ4*Y=R#Ki=l*-_inVy?C zZ{xIN1_l;;PZ!6K3dXy$eRX02MHl7p9SC|qQb-WV)o?IiB&vdBat>7b5^lcCU8;k7g86(8rBXa4x_x!*r0O|N`^ z*U)%=@%`H8bMI(3@Gy0E>v{O;ajU6bH9n@LC~=0>v7m8gi1j<1FX*!w%#Mut z<9lvC=SQiXFAle_{qZn&8TY+@`R$5#+Kjuq{%pJ_5^S+y-@UGhIolgoNZ9AS)v(pM zdSZ#+q8xL#tJ%(xO5)oW-j9vF8`N9g!knGmyodYtjCy6|0!!=L+pb?R(a77adPbT1 z0i*Qc)aTEC))iFWF1~QTUi(tu!@pBS`<0cdRlQZNUt?OmCdc~2&qZ-H7Y^mk>DD(E zc=vysiIp{|o`gEx3l+ZLWvD18POtVrr@2*cYeE;f| zf~_v^lu7pH?D{uLZ9K|8d=Ri}Fyj%g>p#@Ld9&zWUin_tl&=ShVxwwa|9n{VQq5aJ zE>YFvZuLcp6MJI9A2FXn=nupR(3UP{? z1yA!>vEk+>mqRUU6}(kkZfI@#v-@CzoUhM;r>|ap6+bm$>8g|EHBq;2++o>k7&2pC zda&rJpvsPxUMKN~k0%Sym@})XcdhP^=HD%|ypF#3v18$;KjjT>ZW~Y69nJpo!)r=F z^t6TNjih`JmCP;W=ec9Gd@0-3&D+`C7H3Wob9Y(Aw)J&cbIdz!)|Hx~oflR96jxgA z(pO!*CFr4^Ztv}XtM$Q)N&dR?v>!JvFxvft=uf9Bmoukys)`-q`M9s#(najYoh&tuLiI3f z*J&P!Ic*1j{tR04`iAGG4*SI$3g%q=%v(&-|o!oX=-}$tKGWWrfl}CHmBRS zd;2Evt}pm_$3}7Is?_z{ug?yOy~|a`rrf>v+c}>9H%?bvyJqv_ljIw-trj*v$}XsC zU6rX{7*>(l!2ZS{*=|qJTK3Oe@2@K8bTSxm{;2snqb=;?%VQ?Y*SWkuekgNZX?R}D fu(3;B>Y;rbkG4sw>XJJQ3=9mOu6{1-oD!M?3&y(DbGWpDl2pGg^s4U9`PUC8}6yh3gADo zSl~b7jtqmqQ@l?ZRNQQvW>o|*&rvaS`y*%&mEkYNv8>n0iRb3my=!y5G?$iaZ#?&{ z_~tvG+g~>4e}8(m#BBk?qL2LVd_%T!+!bw^lFPJ(#t1KbLCC^y*iXBy`19El}&cf8)cpthJnWi4TcLe=NA{P)X+mbo zKAl=zTU#ZKPZ@2pl5hF7spq#w-xiOqLTj0(3%v_kMA9FMWXLG6_J~=q6n#Bmv}Wqs z2kV;7?y367_Wk!^4N?93w(X)SGH$LBr8)I&n>piNI(*%jC35=Gca3{~=MU+5>EF58 z_)GY!hL~Sd8CUqc#H%YgR{Oa|lxiJX6)YGww`;?zDK#Ggc%C&RrippqpZ20Y|Hi3C z;b$)u#q>nCajgFzxm^C|EG40%w{BT=r9L{D;+ZOW`jD{y{D&70A78db_I_xV4(I0s ze-7>yym9nXzvvVx@5o#4I^LLxrlhXYXjOga|K9$v-?=&2=Wf?;e9N>Z$@4~^_Pmq5 z(RWS$hfd$T{$GXcy0Y>^TGLu;)ulguGY|M5r}iNtE8z#5lT{`!i`S5mKU$$i% zrfm7q^?dhQ{mVU1;}T!)R@wWfxOLKvO_h1=8C;J4|3$A#J>z3*u}Sstr?qvxdTtv& z3-L)!YnAL{bHCNY;o3a8`|kPeu{V@r{5;~Oay_3gLFArzRJGjd$W#tzPuVGEb>ZmMgPu(J36|npWNT@D9|sL--D}o%F7G< zt`qfcPQS%IQO@Sa7Ka-FAFi1t@Kk2|E&XnvbDK%vr>VW#k{3-(0lkLruFrCsnR~mf z{ogGIk5-T3l+CF#=R8iF^lstm!?Tr>G^~4C_!eJZ&sy~E)Xmhz*P7CWIZkehFg(8~ zspD1GhyN;bgd3SUk34S=>Qb)8POB literal 0 HcmV?d00001 diff --git a/public/img/reload-button.png b/public/img/reload-button.png new file mode 100644 index 0000000000000000000000000000000000000000..f2e956623aa2e18f5de960310a77d443ddd39b29 GIT binary patch literal 1870 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 - - In DB - Not In DB - - + + + +
-

File List

diff --git a/public/js/index.js b/public/js/index.js index 84586d4..88888e7 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -203,7 +203,8 @@ function getSongList() { }) } - +let updateSongsButton = document.getElementById("updateSongsButton") +updateSongsButton.addEventListener("click", (_) => { getSongList() } ) /** * SONG FILTERING LOGIC @@ -215,8 +216,10 @@ let songFilterInput = document.getElementById("songFilterInput") **/ let songFilterName = document.getElementById("songFilterName") let songFilterArtist = document.getElementById("songFilterArtist") -let songFilterInDB = document.getElementById("songFilterInDB") -let songFilterNotInDB = document.getElementById("songFilterNotInDB") + +let filterDBImage = document.getElementById("filterDBImage") +let dbFilterState = "inDB" + /** * Get the current state of filters, with fields NameFilter, ArtistFilter, DBFilter @@ -227,8 +230,8 @@ function getFilterStates() { filterStates.NameFilter = songFilterName.value.toLowerCase() filterStates.ArtistFilter = songFilterArtist.value.toLowerCase() - filterStates.DBFilter = songFilterInDB.checked - filterStates.NotDBFilter = songFilterNotInDB.checked + filterStates.DBFilter = dbFilterState == "inDB" + filterStates.NotDBFilter = dbFilterState == "notInDB" return filterStates } @@ -273,8 +276,20 @@ function updateSongListWithFilter(_) { songFilterName.oninput = (event) => {updateSongListWithFilter(event)} songFilterArtist.oninput = (event) => {updateSongListWithFilter(event)} -songFilterInDB.oninput = (event) => {updateSongListWithFilter(event)} -songFilterNotInDB.oninput = (event) => {updateSongListWithFilter(event)} + +filterDBImage.addEventListener("click", (_) => { + if (dbFilterState == "inDB") { + dbFilterState = "notInDB" + filterDBImage.src = "/img/music-not-present.png" + } + else { + dbFilterState = "inDB" + filterDBImage.src = "/img/music-present.png" + } + + updateSongListWithFilter(_) +}) + /** * EDIT MENU FOR SONGS @@ -382,6 +397,10 @@ let createSongDisplayArtistNames = document.getElementById("createSongDisplayArt let createSongDisplayTrackName = document.getElementById("createSongDisplayTrackName") let createSongCreateButton = document.getElementById("createSongCreateButton") +let addSongButton = document.getElementById("addSongButton") + +addSongButton.addEventListener("click", (_) => { openCreationMenu() }) + // making a song -> I want to make clear that there is a strong lack of formatting checking anywhere async function createNewSong() { diff --git a/songmanager b/songmanager index 7551edf1a0d107c7208bd09959d8ceeaaba3cb94..54aed9c501787f3e8cf77b4d18aa869962065dbe 100755 GIT binary patch delta 1027 zcmcb!;1nweZ^+@VcZoDGswk@T5A^eN4s|y%D@#l<(0BCkiK+|?H7ZT?4a<$vEiuhB z4%81VPYJF{F{|{-j&wIINXyOj%+Jv;E-pxS$}TKQDKaq03@|CyHS*46U}0cj5Mf|o zU}j)oaQ6#k*gv`8b;5MZw3|2Y9P5srxRUK^r?!4hW|EnSe)DVo_SgK3?XUTn+F$cC zx4-6RX@AYn+WwlKt^GAWd;4pCj`r95ob9jqx!PazbGN_d=V^b<&)fc*pRfHjKS-}Y z`)hu|_SgJE?XUTT+h6mGw7=#TZGX)#*8ZAby!|!5MEh%g$@bU$Qthw#rQ2Wg%e24d zmu-K|FW3H>U%ve{ze4+Ke#Q3J{7UVw`IXyW^Q*MK=2vZh&9Bz}nqR&BHNQstYktl4 z*Zf-TulcpxU-Rp&F|L!n%{llq7^aw;nV6&+C7N0!rB2^BxkQHD%*w#h%D`g!!^tJ4?G9BQ z?G9C*?G9C5?G9Dm?G9Bw?G9DG?G9Cb?G9D`?G9A|?G9Ce?G9Bz?G9DJ?G9BT?G9C; z?G9C8?G9Dp?G9BD?G9Cu?G9B@?G9DZ?G9Bj?G9D3?G9CO?G9D(?G9B5?G9Cm?G9B* z?G9DR?G9Bb?G9C`?G9CG?G9Dx?G9BL?G9C$?G9C0?G9Dh?G9Br?G9DB?G9CW?G9D> z?G9B1?G9Ci?G9B%?G9DN+a0P(%*Ci2673Hsm$W~eT-yF{a#{Ps$>r@2Cs(vToLt%d zaB@}q!^zd{4=2~OKb&0K{%~?#`@_lg?GGn6v_G8O*#2;GQ~Sfo&Fv2-x3oW;+}i$d za$Ebu$?feACwH_zoZQ*|aB^4s!^z$44=4AuKb+j#{%~?%`@_lo?GGnUXn#0)V*A6% zliD9np4|R$@|5<6lc%;noII`l;pFM<4=2xPe>iz&`@_kz+8<7y-TrX$oc4#4=e9qb zJg@!X< n$*bBQPF~&qaPpe=hm+T~Kb*X-{o&;G?GGn!*#2s|^R~a{=WBn>57H~p z{+eH~{WZT(`)hvT_SgI(?XUSo+h6mGwZG;UZ-31%(f*oWvi&u`RQqdw>Gs$BGVQPV zW!qo#%eBAemv4W~uh9OQU$Ol)zf${ae&zPp{3`9Q`BmFr^Q*PL=2vfj&9Bk^nqRa1 zHNRH-Ykuwa*Zex|ulaS`U-Rp=zvkC(f6Z^u{+i#g{WZT)`)hvV_SgI-?XUSw+h6mW zwZG;!Z-32i(f*p>vi&u`Rr_mx>-N|DHtnzZZQEb-+qJ*uw{L&V@6i65-?9BQzf=2b ze&_br{4VXU`CZ#z^Siab=6B!zn%`qvnvk)nk%@_}xnXK@TAG=Kg}I^O_Ra|yF*oMyF*o6yF*ocyF*n%yF*oCyF*n{ zyF*oSyF*ni!4`@_i_wm+P_vHA}H07Jh> -- 2.54.0