task 6: HTML export
This commit is contained in:
parent
a93598d8f6
commit
aee3052ad7
GPG Key ID:
8D83DE470F8544E7
3
res/template/album.css
Normal file
3
res/template/album.css
Normal file
@ -0,0 +1,3 @@
|
||||
td:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
39
res/template/album.html
Normal file
39
res/template/album.html
Normal file
@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Slopify V2 - Listen to the music you hate</title>
|
||||
<link rel="stylesheet" type="text/css" href="base.css">
|
||||
<link rel="stylesheet" type="text/css" href="album.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="navbar">
|
||||
<a class="back" id="back-btn" href="{{artist.page}}"></a>
|
||||
<h1 class="title">Slopify</h1>
|
||||
</header>
|
||||
<div id="body">
|
||||
<h2>Album</h2>
|
||||
<div id="crumbs">
|
||||
<a href="{{artist.page}}">{{artist.name}}</a>
|
||||
<span class="sep"></span>
|
||||
<a href="./">{{album.name}}</a>
|
||||
</div>
|
||||
<table id="songs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{songs}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script type="text/javascript" src="base.js"></script>
|
||||
<script>
|
||||
initTable(document.getElementById("songs"))
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
0
res/template/artist.css
Normal file
0
res/template/artist.css
Normal file
36
res/template/artist.html
Normal file
36
res/template/artist.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Slopify V2 - Listen to the music you hate</title>
|
||||
<link rel="stylesheet" type="text/css" href="base.css">
|
||||
<link rel="stylesheet" type="text/css" href="artist.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="navbar">
|
||||
<a class="back" id="back-btn" href="index.html"></a>
|
||||
<h1 class="title">Slopify</h1>
|
||||
</header>
|
||||
<div id="body">
|
||||
<h2>Artist</h2>
|
||||
<div id="crumbs">
|
||||
<a href="./">{{artist.name}}</a>
|
||||
</div>
|
||||
<table id="albums">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{albums}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script type="text/javascript" src="base.js"></script>
|
||||
<script>
|
||||
initTable(document.getElementById("albums"))
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
126
res/template/base.css
Normal file
126
res/template/base.css
Normal file
@ -0,0 +1,126 @@
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #0d130d;
|
||||
font-family: Ubuntu;
|
||||
font-size: 16pt;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: "back title space";
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
border-bottom: solid #3e5b3e 1px;
|
||||
padding: 0.4em 0.8em;
|
||||
gap: 0.8em;
|
||||
}
|
||||
|
||||
#navbar .back {
|
||||
grid-area: back;
|
||||
}
|
||||
|
||||
#back-btn {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#back-btn::before {
|
||||
content: "";
|
||||
border: solid white 4px;
|
||||
border-style: solid none none solid;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: rotate(-45deg);
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#navbar .title {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2em;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#crumbs {
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#crumbs .sep {
|
||||
position: relative;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
}
|
||||
|
||||
#crumbs .sep::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: white 0.2em;
|
||||
border-style: solid solid none none;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00bf00;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: solid white 1px;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #aeaeae21;
|
||||
}
|
||||
|
||||
th {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
th.sort-asc::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0.5em;
|
||||
transform: translate(-50%, -25%);
|
||||
border: solid transparent 0.2em;
|
||||
border-top-color: white;
|
||||
}
|
||||
|
||||
th.sort-desc::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0.5em;
|
||||
transform: translate(-50%, -55%);
|
||||
border: solid transparent 0.2em;
|
||||
border-bottom-color: white;
|
||||
}
|
||||
58
res/template/base.js
Normal file
58
res/template/base.js
Normal file
@ -0,0 +1,58 @@
|
||||
function initTable(table) {
|
||||
table.tHead.querySelectorAll("th").forEach((header, i) => {
|
||||
header.addEventListener("click", () => {
|
||||
toggleSort(table, header, i)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function toggleSort(table, header, colI) {
|
||||
if (header.classList.contains("sort-asc")) {
|
||||
header.classList.remove("sort-asc")
|
||||
header.classList.add("sort-desc")
|
||||
doSort(table, colI, true)
|
||||
} else if (header.classList.contains("sort-desc")) {
|
||||
header.classList.remove("sort-desc")
|
||||
header.classList.add("sort-asc")
|
||||
doSort(table, colI, false)
|
||||
} else {
|
||||
table.tHead.querySelectorAll("th.sort-asc,th.sort-desc").forEach(th => {
|
||||
th.classList.remove("sort-asc")
|
||||
th.classList.remove("sort-desc")
|
||||
})
|
||||
header.classList.add("sort-asc")
|
||||
doSort(table, colI, false)
|
||||
}
|
||||
}
|
||||
|
||||
function doSort(table, colI, desc = false) {
|
||||
let swapped = true
|
||||
while (swapped) {
|
||||
let rows = Array.from(table.rows)
|
||||
swapped = false
|
||||
let rowA, rowB
|
||||
for (let i=1; i<rows.length-1; i++) {
|
||||
rowA = rows[i]
|
||||
rowB = rows[i+1]
|
||||
if (desc == compareRows(rowA, rowB, colI)) {
|
||||
swapped = true
|
||||
break
|
||||
}
|
||||
}
|
||||
if (swapped) {
|
||||
rowA.parentNode.insertBefore(rowB, rowA)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function compareRows(rowA, rowB, colI) {
|
||||
let valA = rowA.querySelectorAll("td")[colI].innerText
|
||||
let valB = rowB.querySelectorAll("td")[colI].innerText
|
||||
|
||||
if (!Number.isNaN(+valA) && !Number.isNaN(+valB)) {
|
||||
valA = +valA
|
||||
valB = +valB
|
||||
}
|
||||
|
||||
return valB > valA
|
||||
}
|
||||
0
res/template/index.css
Normal file
0
res/template/index.css
Normal file
33
res/template/index.html
Normal file
33
res/template/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Slopify V2 - Listen to the music you hate</title>
|
||||
<link rel="stylesheet" type="text/css" href="base.css">
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="navbar">
|
||||
<h1 class="title">Slopify</h1>
|
||||
</header>
|
||||
<div id="body">
|
||||
<h2>Artists</h2>
|
||||
<div id="crumbs"></div>
|
||||
<table id="artists">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{artists}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<script type="text/javascript" src="base.js"></script>
|
||||
<script>
|
||||
initTable(document.getElementById("artists"))
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
61
res/template/song.css
Normal file
61
res/template/song.css
Normal file
@ -0,0 +1,61 @@
|
||||
@keyframes shadow-anim {
|
||||
0% {
|
||||
box-shadow: 0.0em 0.2em 0.6em #344c34a0;
|
||||
}
|
||||
|
||||
25% {
|
||||
box-shadow: 0.1em 0.3em 0.8em #344c34a0;
|
||||
}
|
||||
|
||||
50% {
|
||||
box-shadow: 0.2em 0.4em 1.2em #344c34a0;
|
||||
}
|
||||
|
||||
75% {
|
||||
box-shadow: 0.1em 0.3em 0.8em #344c34a0;
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0.0em 0.2em 0.6em #344c34a0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#song {
|
||||
display: grid;
|
||||
animation: shadow-anim 10s infinite alternate;
|
||||
border-radius: 0.8em;
|
||||
padding: 0.8em;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
"num title duration"
|
||||
"cover cover cover";
|
||||
max-height: 20em;
|
||||
min-width: 50%;
|
||||
max-width: 30em;
|
||||
margin: auto;
|
||||
gap: 0.4em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#song .number {
|
||||
grid-area: num;
|
||||
}
|
||||
|
||||
#song .title {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
#song .duration {
|
||||
grid-area: duration;
|
||||
}
|
||||
|
||||
#song .cover {
|
||||
grid-area: cover;
|
||||
object-fit: contain;
|
||||
|
||||
background-color: #393939;
|
||||
width: 8em;
|
||||
height: 8em;
|
||||
}
|
||||
33
res/template/song.html
Normal file
33
res/template/song.html
Normal file
@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Slopify V2 - Listen to the music you hate</title>
|
||||
<link rel="stylesheet" type="text/css" href="base.css">
|
||||
<link rel="stylesheet" type="text/css" href="song.css">
|
||||
</head>
|
||||
<body>
|
||||
<header id="navbar">
|
||||
<a class="back" id="back-btn" href="{{album.page}}"></a>
|
||||
<h1 class="title">Slopify</h1>
|
||||
</header>
|
||||
<div id="body">
|
||||
<h2>Song</h2>
|
||||
<div id="crumbs">
|
||||
<a href="{{artist.page}}">{{artist.name}}</a>
|
||||
<span class="sep"></span>
|
||||
<a href="{{album.page}}">{{album.name}}</a>
|
||||
<span class="sep"></span>
|
||||
<a href="./">{{song.title}}</a>
|
||||
</div>
|
||||
<div id="song">
|
||||
<h4 class="number">{{song.number}}</h4>
|
||||
<h3 class="title">{{song.title}}</h3>
|
||||
<div class="cover"></div>
|
||||
<!-- <img src="{{album.image}}" alt="{{album.name}} cover image"> -->
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="base.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,6 +1,8 @@
|
||||
package ch.hevs.isc.slopify_v2
|
||||
|
||||
import java.io.{File, FileInputStream, FileOutputStream, ObjectInput, ObjectInputStream, ObjectOutputStream}
|
||||
import java.io._
|
||||
import scala.collection.immutable.HashMap
|
||||
import scala.io.{BufferedSource, Source}
|
||||
|
||||
object DataBaseHelper {
|
||||
def create(directory:String) : DataBase = {
|
||||
@ -66,16 +68,99 @@ object DataBaseHelper {
|
||||
return db
|
||||
}
|
||||
|
||||
def exportHTML(directory: String, dataBase: DataBase): Unit = {
|
||||
var artists: Array[Artist] = dataBase.getArtists().sortBy(_.name)
|
||||
|
||||
var artistRows: String = ""
|
||||
for (artist: Artist <- artists) {
|
||||
val artistFileName: String = formatName(artist.name)
|
||||
val artistUrl: String = s"./$artistFileName.html"
|
||||
artistRows += s"<tr><td><a href='$artistUrl'>${artist.name}</a></td></tr>\n"
|
||||
|
||||
val albums: Array[Album] = artist.getAlbums().sortBy(_.name)
|
||||
var albumRows: String = ""
|
||||
for (album: Album <- albums) {
|
||||
val albumFileName: String = artistFileName + "_" + formatName(album.name)
|
||||
val albumUrl: String = s"./$albumFileName.html"
|
||||
albumRows += s"<tr><td><a href='$albumUrl'>${album.name}</a></td></tr>\n"
|
||||
|
||||
val songs: Array[Song] = album.getSongs().sortBy(_.number)
|
||||
var songRows: String = ""
|
||||
for (song: Song <- songs) {
|
||||
val songFileName: String = albumFileName + "_" + formatName(song.number + "-" + song.title)
|
||||
val songUrl: String = s"./$songFileName.html"
|
||||
songRows += s"<tr><td>${song.number}</td><td><a href='$songUrl'>${song.title}</a></td></tr>\n"
|
||||
|
||||
formatTemplate("res/template/song.html", HashMap(
|
||||
"artist.name" -> artist.name,
|
||||
"artist.page" -> artistUrl,
|
||||
"album.name" -> album.name,
|
||||
"album.page" -> albumUrl,
|
||||
"song.title" -> song.title,
|
||||
"song.number" -> song.number.toString
|
||||
), directory + "/" + songFileName + ".html")
|
||||
}
|
||||
|
||||
formatTemplate("res/template/album.html", HashMap(
|
||||
"songs" -> songRows,
|
||||
"artist.name" -> artist.name,
|
||||
"artist.page" -> artistUrl,
|
||||
"album.name" -> album.name
|
||||
), directory + "/" + albumFileName + ".html")
|
||||
}
|
||||
|
||||
formatTemplate("res/template/artist.html", HashMap(
|
||||
"albums" -> albumRows,
|
||||
"artist.name" -> artist.name
|
||||
), directory + "/" + artistFileName + ".html")
|
||||
}
|
||||
formatTemplate("res/template/index.html", HashMap(
|
||||
"artists" -> artistRows
|
||||
), directory + "/" + "index.html")
|
||||
|
||||
copyFile("res/template/base.js", directory + "/base.js")
|
||||
copyFile("res/template/base.css", directory + "/base.css")
|
||||
copyFile("res/template/index.css", directory + "/index.css")
|
||||
copyFile("res/template/artist.css", directory + "/artist.css")
|
||||
copyFile("res/template/album.css", directory + "/album.css")
|
||||
copyFile("res/template/song.css", directory + "/song.css")
|
||||
}
|
||||
|
||||
def copyFile(from: String, to: String): Unit = {
|
||||
val fis: FileInputStream = new FileInputStream(from)
|
||||
val fos: FileOutputStream = new FileOutputStream(to)
|
||||
|
||||
fos.write(fis.readAllBytes())
|
||||
|
||||
fis.close()
|
||||
fos.close()
|
||||
}
|
||||
|
||||
def formatName(name: String): String = {
|
||||
var formatted: String = name.toLowerCase
|
||||
formatted = formatted.replace(" ", "_")
|
||||
formatted = formatted.replace("'", "-")
|
||||
formatted = formatted.replaceAll("[^a-zA-Z_0-9\\-().]", "")
|
||||
return formatted
|
||||
}
|
||||
|
||||
def formatTemplate(templateName: String, variables: Map[String, String], outPath: String): Unit = {
|
||||
val source: BufferedSource = Source.fromFile(templateName)
|
||||
var template: String = source.getLines().mkString("\n")
|
||||
source.close()
|
||||
|
||||
for ((key: String, value: String) <- variables) {
|
||||
template = template.replace(s"{{$key}}", value)
|
||||
}
|
||||
|
||||
val fos: FileOutputStream = new FileOutputStream(outPath)
|
||||
fos.write(template.getBytes)
|
||||
fos.close()
|
||||
}
|
||||
|
||||
def main(args: Array[String]): Unit = {
|
||||
val db: DataBase = create("res/songs")
|
||||
println(db)
|
||||
val artists: Array[Artist] = db.getArtists()
|
||||
println(artists(0))
|
||||
|
||||
save("res/db.bin", db)
|
||||
val db2: DataBase = load("res/db.bin")
|
||||
println(db2)
|
||||
val artists2: Array[Artist] = db2.getArtists()
|
||||
println(artists2(0))
|
||||
exportHTML("/tmp/html", db)
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user