diff --git a/src/pages/index/indexPanel/panels/songPanel.js b/src/pages/index/indexPanel/panels/songPanel.js index 053838c..e3d275c 100644 --- a/src/pages/index/indexPanel/panels/songPanel.js +++ b/src/pages/index/indexPanel/panels/songPanel.js @@ -7,7 +7,8 @@ const SongPanel = () => { useEffect( () => generateTitleCode() ) useEffect( () => setTextHeight() ) - const [openDescription, setOpen] = useState(-1) + const [openDescription, setOpenDescription] = useState(-1) + const [openComments, setOpenComments] = useState(false) // ANSI: ▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏░▒▓▐▔▕▖▗▘▙▚▛▜▝▞▟ @@ -36,6 +37,26 @@ const SongPanel = () => { document.getElementById('songText').style = 'height: ' + (textDivHeight - 50) + 'px;' } + const activeCommentDiv = () => { + let commentsDiv = document.getElementById('comments') + let commentAddInput = document.getElementById('commentAddInput') + let commentAddButton = document.getElementById('commentAddButton') + if ( openComments ) { + commentAddInput.placeholder = 'type comment (or click to exit)' + commentsDiv.style = 'height: ' + ((window.innerHeight / 2) - 50) + 'px;' + commentAddInput.style = 'width: 60%;' + commentAddButton.style = 'display: block;' + setOpenComments( !openComments ) + } + else { + commentAddInput.placeholder = '(click to show comments)' + commentsDiv.style = 'height: 0px;' + commentAddInput.style = 'width: 100%;' + commentAddButton.style = 'display: none;' + setOpenComments( !openComments ) + } + } + let exampleText = [ '[Zwrotka Rzukk]\n', 'Znam wielu co robią zajebistą muzykę, kolego,\n', @@ -116,6 +137,54 @@ const SongPanel = () => { } } + let exampleComments = [ + { + ip: '192.168.0.1', + city: 'Rzeszów', + text: 'Ciekawe' + }, + { + ip: '192.168.1.10', + city: 'Arłamów', + text: 'ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum ELO lorem ipsum' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + { + ip: '192.168.2.20', + city: 'Kraków', + text: 'TAKIE życie!!!!' + }, + ] + return (
setOpen( -1 ) : () => setOpen( key )}
+ onClick={ openDescription === key ? () => setOpenDescription( -1 ) : () => setOpenDescription( key )}
dangerouslySetInnerHTML={ textHighlight(row, exampleRowDetails[key].text) }>
{
setOpen( -1 ) : () => setOpen( link )}
+ onClick={ openDescription === link ? () => setOpenDescription( -1 ) : () => setOpenDescription( link )}
dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
setOpen( -1 ) : () => setOpen( key )}
+ onClick={ openDescription === key ? () => setOpenDescription( -1 ) : () => setOpenDescription( key )}
dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
{
)
}
}
- else
+ else {
return (
{row}
)
+ }
}
)
}
@@ -204,6 +274,32 @@ const SongPanel = () => {