tbs093a
/
music.service.frontend
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

add comments section -> songPanel.js

develop
TBS093A 2020-06-01 21:21:29 +02:00
parent e76544ea44
commit c504543f26
2 changed files with 171 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/pages/index/indexPanel/panels/songPanel.js
View File

@ -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 (
<div id='songPanel'>
<div className='songPanelColumn'>
@ -146,7 +215,7 @@ const SongPanel = () => {
<pre
id={'row' + key}
className='generalText'
onClick={ openDescription === key ? () => setOpen( -1 ) : () => setOpen( key )}
onClick={ openDescription === key ? () => setOpenDescription( -1 ) : () => setOpenDescription( key )}
dangerouslySetInnerHTML={ textHighlight(row, exampleRowDetails[key].text) }>
</pre>
<pre
@ -165,7 +234,7 @@ const SongPanel = () => {
<pre
id={'row' + key}
className='generalText'
onClick={ openDescription === link ? () => setOpen( -1 ) : () => setOpen( link )}
onClick={ openDescription === link ? () => setOpenDescription( -1 ) : () => setOpenDescription( link )}
dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
</pre>
</div>
@ -178,7 +247,7 @@ const SongPanel = () => {
<pre
id={'row' + key}
className='generalText'
onClick={ openDescription === key ? () => setOpen( -1 ) : () => setOpen( key )}
onClick={ openDescription === key ? () => setOpenDescription( -1 ) : () => setOpenDescription( key )}
dangerouslySetInnerHTML={ text === '' ? textHighlight(row, row) : textHighlight(row, text) }>
</pre>
<pre
@ -190,12 +259,13 @@ const SongPanel = () => {
)
}
}
else
else {
return (
<pre id={key} className='generalText'>
{row}
</pre>
)
}
}
)
}
@ -204,6 +274,32 @@ const SongPanel = () => {
</div>
<div className='songPanelColumn'>
<div id='songComments'>
<div id='comments'>
{ exampleComments.map( (comment, key) => {
return (
<div id={'comment' + key} className='commentDiv'>
<div className='commentInfo'>
{ comment.ip + ' ( ' + comment.city + ' )' }
</div>
<div className='commentText'>
{ comment.text }
</div>
</div>
)
}
)
}
</div>
<div id='commentAdd'>
<input
id='commentAddInput'
placeholder='(click to show comments)'
onClick={ () => activeCommentDiv() }>
</input>
<div id='commentAddButton'>
Add comment
</div>
</div>
</div>
<div id='albumSongs'>
</div>

73
src/styles/songPanel.scss
View File

@ -39,11 +39,13 @@
#songText {
width: 95%;
overflow: hidden;
overflow-y: scroll;
padding-right: 5%;
margin-bottom: 50px;
-ms-overflow-style: none;
scrollbar-width: none;
.textSection {
width: 100%;
height: auto;
@ -81,10 +83,75 @@
}
}
#songText::-webkit-scrollbar {
display: none;
}
#songComments {
width: 90%;
height: auto;
padding: 5%;
height: 50%;
padding-right: 5%;
margin-top: 50px;
#comments {
height: 0px; //420px
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
transition-duration: 0.5s;
.commentDiv {
width: 100%;
height: auto;
padding-bottom: 20px;
.commentInfo {
padding-bottom: 10px;
}
.commentText {
margin-left: 20px;
}
}
}
#comments::-webkit-scrollbar {
display: none;
}
#commentAdd {
width: 100%;
height: 50px;
display: flex;
input {
width: 100%;
padding-right: 5%;
padding-left: 5%;
height: 50px;
color: rgba(172,36,36,1);
font-family: Ubuntu;
background-color: black;
border: solid 1px rgba(172,36,36,1);
}
input::placeholder {
font-family: Ubuntu;
color: rgba(172,36,36,1);
}
#commentAddButton {
width: 25%;
height: 32.5px;
padding-top: 18.5px;
margin-left: 5%;
display: none;
font-size: 12px;
text-align: center;
border: solid 1px rgba(172,36,36,1);
}
}
}
#albumSongs {