From 2ed39f07c7b6b9e341cb068c3db9cecc84e8b63b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tam=C3=A1s=20Szab=C3=B3?= <tamas@szaboo.com> Date: Sun, 29 Oct 2017 14:15:54 +0100 Subject: [PATCH] added homework 4 files --- app.js | 4 ++++ package-lock.json | 5 ++++ package.json | 1 + views/episode.ejs | 33 +++++++++++++++++++++++++ views/episodeEdit.ejs | 38 +++++++++++++++++++++++++++++ views/footer.ejs | 3 +++ views/header.ejs | 13 ++++++++++ views/menu.ejs | 7 ++++++ views/serie.ejs | 56 +++++++++++++++++++++++++++++++++++++++++++ views/serieEdit.ejs | 41 +++++++++++++++++++++++++++++++ views/series.ejs | 41 +++++++++++++++++++++++++++++++ 11 files changed, 242 insertions(+) create mode 100644 views/episode.ejs create mode 100644 views/episodeEdit.ejs create mode 100644 views/footer.ejs create mode 100644 views/header.ejs create mode 100644 views/menu.ejs create mode 100644 views/serie.ejs create mode 100644 views/serieEdit.ejs create mode 100644 views/series.ejs diff --git a/app.js b/app.js index 5e6c58c..a4becbf 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 d2c865b..8799c66 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 bf33f15..e0961f6 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 0000000..da525cd --- /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 0000000..f7ddd31 --- /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 0000000..15b9011 --- /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 0000000..780b5b1 --- /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 0000000..e931124 --- /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 0000000..b0446dc --- /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 0000000..e16da47 --- /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 0000000..29cf9c2 --- /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') %> -- GitLab