diff --git a/app.js b/app.js
index 5e6c58cfad9bdcaf6b13f1ddafda52d07f82e205..a4becbf518cc2c6fa9fa6dac653d12d3bf685541 100644
--- a/app.js
+++ b/app.js
@@ -5,6 +5,10 @@ const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded());
app.use(bodyParser.json());
+app.set('view engine', 'ejs');
+
+app.use(express.static('public'));
+
app.use((req, res, next) => {
res.error = [];
res.tpl = {};
diff --git a/package-lock.json b/package-lock.json
index d2c865bd86bed7a32739a71a93be6cd1d9ea7379..8799c66703739554d68b1b1d02b5c6f9745af958 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -83,6 +83,11 @@
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
},
+ "ejs": {
+ "version": "2.5.7",
+ "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.5.7.tgz",
+ "integrity": "sha1-zIcsFoiArjxxiXYv1f/ACJbJUYo="
+ },
"encodeurl": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.1.tgz",
diff --git a/package.json b/package.json
index bf33f154ac8a364147e09171777c3a6ac25e5abb..e0961f65b8d38b5250f0d75359fd31c38a05eccc 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"homepage": "https://szakitom.github.io/node_homework/",
"dependencies": {
"body-parser": "^1.18.2",
+ "ejs": "^2.5.7",
"express": "^4.16.0"
}
}
diff --git a/views/episode.ejs b/views/episode.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..da525cd9de072ba659fd646cc90c985656ef913f
--- /dev/null
+++ b/views/episode.ejs
@@ -0,0 +1,33 @@
+<%- include('header') %>
+
+ <%- include('menu', { title: episode.title }) %>
+ <div class="ui padded text container">
+ <div class="ui form">
+ <div class="inline field">
+ <label>Rating</label>
+ <div class="ui rating" data-rating="<%= episode.rating %>" max-rating="5"></div>
+ </div>
+ <div class="inline fields">
+ <div class="field">
+ <label>Seen?</label>
+ </div>
+ <div class="inline field">
+ <div class="ui toggle checkbox <% episode.seen ? checked : '' %>">
+ <input type="checkbox" checked="<% episode.seen %>" class="hidden">
+ <label></label>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+<script>
+ $('.rating')
+ .rating({
+ initialRating: 2,
+ maxRating: 5
+ });
+ $('.checkbox')
+ .checkbox('attach events', '.toggle.button');
+</script>
+
+<%- include('footer') %>
diff --git a/views/episodeEdit.ejs b/views/episodeEdit.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..f7ddd310b73b9c1930a147964fce798b1e23a3fa
--- /dev/null
+++ b/views/episodeEdit.ejs
@@ -0,0 +1,38 @@
+<%- include('header') %>
+
+ <%- include('menu', { title: episode.title }) %>
+ <div class="ui padded text container">
+ <div class="ui form">
+ <div class="inline field">
+ <label>Rating</label>
+ <div class="ui rating" data-rating="<%= episode.rating %>" max-rating="5"></div>
+ </div>
+ <div class="inline fields">
+ <div class="field">
+ <label>Seen?</label>
+ </div>
+ <div class="inline field">
+ <div class="ui toggle checkbox <% episode.seen ? checked : '' %>">
+ <input type="checkbox" checked="<% episode.seen %>" class="hidden">
+ <label></label>
+ </div>
+ </div>
+ </div>
+ <div class="ui buttons right floated">
+ <button class="ui negative button submit">Delete</button>
+ <div class="or"></div>
+ <button class="ui positive button submit">Save</button>
+ </div>
+ </div>
+ </div>
+<script>
+ $('.rating')
+ .rating({
+ initialRating: 2,
+ maxRating: 5
+ });
+ $('.checkbox')
+ .checkbox('attach events', '.toggle.button');
+</script>
+
+<%- include('footer') %>
diff --git a/views/footer.ejs b/views/footer.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..15b90110a000585213e88fccf3e466de2b773b63
--- /dev/null
+++ b/views/footer.ejs
@@ -0,0 +1,3 @@
+</body>
+
+</html>
diff --git a/views/header.ejs b/views/header.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..780b5b109a0cff67a0dc9507d135596054b1a0df
--- /dev/null
+++ b/views/header.ejs
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Series</title>
+ <script src="/js/jquery-3.2.1.min.js"></script>
+ <link rel="stylesheet" href="/semantic/semantic.min.css">
+ <script src="/semantic/semantic.min.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
diff --git a/views/menu.ejs b/views/menu.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..e931124c732fe12008ddbda3e0e65188cfd85480
--- /dev/null
+++ b/views/menu.ejs
@@ -0,0 +1,7 @@
+<div class="ui item menu">
+ <% if (title === undefined) { %>
+ <a class="item active" href="">Back</a>
+ <% } else { %>
+ <a class="item active" href=""><%= title %></a>
+ <% } %>
+</div>
diff --git a/views/serie.ejs b/views/serie.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..b0446dc55d8a300efd645e2a3713aecdb82d7b0a
--- /dev/null
+++ b/views/serie.ejs
@@ -0,0 +1,56 @@
+<%- include('header') %>
+
+ <%- include('menu', { title: serie.title }) %>
+
+ <div class="ui padded text container">
+ <div class="ui progress success active" data-percent="<%= serie.progress %>">
+ <div class="bar" style="width: <%= serie.progress %>%;">
+ <div class="progress"><%= serie.progress %>%</div>
+ </div>
+ </div>
+ <div class="ui segment">
+ <img class="ui small left floated image" src="<%= serie.image %>">
+ <p>
+ <%= serie.description %>
+ </p>
+
+ <div class="three column doubling ui grid">
+ <% serie.episodes.forEach(episode => { %>
+
+ <div class="column">
+ <div class="ui card">
+ <div class="content">
+ <div class="right floated meta"><i class="eye icon"></i></div>
+ <div class="header">
+ <a href="/series/<%= serie.id %>/episode/<%= episode.id %>">
+ <%= episode.title %>
+ </a>
+ </div>
+ <div class="description">
+ <% stars.forEach(star => {
+ <% if (star.isFull) { %>
+ <i class="star icon"></i>
+ <% } else { %>
+ <i class="empty star icon"></i>
+ <% } %>
+ <% }) %>
+ </div>
+ </div>
+ <div class="extra content">
+ <a href="/series/<%= serie.id %>/episode/<%= episode.id %>/edit"><i class="pencil icon"></i> Edit</a>
+ </div>
+ </div>
+ </div>
+
+ <% }) %>
+ </div>
+ </div>
+ </div>
+
+ <div style="bottom: 10px;position:fixed;right:20px;z-index:1000;">
+ <button onclick="document.location='/series/<%= serie.id %>/episode/new'" class="circular ui icon button blue">
+ <i class="icon plus"></i>
+ </button>
+ </div>
+
+<%- include('footer') %>
diff --git a/views/serieEdit.ejs b/views/serieEdit.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..e16da4734a47356f4b905fa26dab519a84a52905
--- /dev/null
+++ b/views/serieEdit.ejs
@@ -0,0 +1,41 @@
+<%- include('header') %>
+
+ <%- include('menu', { title: serie.title }) %>
+ <div class="ui padded text container">
+ <div class="ui form">
+ <div class="inline fields">
+ <div class="sixteen wide field">
+ <label>Title</label>
+ <% if (serie.title !== undefined) { %>
+ <input type="text" placeholder="<%= serie.title %>">
+ <% } else { %>
+ <input type="text" placeholder="Title">
+ <% } %>
+ </div>
+ </div>
+ <div class="inline field">
+ <label>Cover image</label>
+ <% if (serie.image !== undefined) { %>
+ <img class="ui medium centered image" src="<%= serie.image %>">
+ <% } else { %>
+ <img class="ui medium centered image" src="/images/placeholder.png">
+ <% } %>
+ </div>
+ <div class="inline fields">
+ <div class="sixteen wide field">
+ <label>Description</label>
+ <textarea rows="2">
+ <% if (serie.description !== undefined) { %>
+ <%= serie.description %>
+ <% } %>
+ </textarea>
+ </div>
+ </div>
+ <div class="ui buttons right floated">
+ <button class="ui negative button submit">Delete</button>
+ <div class="or"></div>
+ <button class="ui positive button submit">Save</button>
+ </div>
+ </div>
+ </div>
+ <%- include('footer') %>
diff --git a/views/series.ejs b/views/series.ejs
new file mode 100644
index 0000000000000000000000000000000000000000..29cf9c297260b2909d64feedecd740d4f0dad4a1
--- /dev/null
+++ b/views/series.ejs
@@ -0,0 +1,41 @@
+<%- include('header') %>
+
+ <%- include('menu', { title: 'Series Tracker' }) %>
+
+ <div class="five column doubling padded ui grid">
+ <% series.forEach(serie => { %>
+ <div class="column">
+ <div class="ui card">
+ <a class="image" href="/series/<%= serie.id %>">
+ <div class="ui slide masked reveal image">
+ <img src="<% serie.image %>" class="visible content">
+ </div>
+ </a>
+ <div class="content">
+ <a class="header" href="/series/<%= serie.id %>"><%= serie.title %></a>
+ <div class="meta">
+ <span class="date">Added on <% serie._createdAt %></span>
+ </div>
+ </div>
+ <div class="extra content">
+ <div class="ui progress success active" data-percent="<%= serie.progress %>">
+ <div class="bar" style="width: <%= serie.progress %>%;"></div>
+ </div>
+ </div>
+ <a href="/series/<%= serie.id %>/edit">
+ <div class="ui bottom attached button">
+ <i class="pencil icon"></i> Edit
+ </div>
+ </a>
+ </div>
+ </div>
+ <% }) %>
+ </div>
+
+ <div style="bottom: 10px;position:fixed;right:20px;z-index:1000;">
+ <button onclick="document.location='/series/new'" class="circular ui icon button blue">
+ <i class="icon plus"></i>
+ </button>
+ </div>
+
+<%- include('footer') %>