mdb to bulma + view my collection
This commit is contained in:
parent
f08e70eb7c
commit
68fa736a91
21 changed files with 617 additions and 292 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -121,3 +121,4 @@ dist
|
|||
dist
|
||||
yarn.lock
|
||||
public/css
|
||||
public/css
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -5,8 +5,8 @@
|
|||
"scripts": {
|
||||
"start": "node ./dist/bin/www",
|
||||
"dev": "npm-run-all build sass start",
|
||||
"watch": "nodemon",
|
||||
"sass": "npx sass sass/*.scss public/css/main.css -s compressed",
|
||||
"watch": "nodemon -e js,scss",
|
||||
"sass": "npx sass sass/index.scss public/css/main.css -s compressed",
|
||||
"prebuild": "rimraf dist",
|
||||
"build": "babel ./src --out-dir dist --copy-files",
|
||||
"test": "jest",
|
||||
|
|
@ -44,6 +44,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.26.0",
|
||||
"bulma": "^0.9.3",
|
||||
"connect-ensure-login": "^0.1.1",
|
||||
"connect-flash": "^0.1.1",
|
||||
"connect-mongo": "^4.6.0",
|
||||
|
|
@ -53,8 +54,6 @@
|
|||
"ejs": "^3.1.6",
|
||||
"express": "^4.17.2",
|
||||
"express-session": "^1.17.2",
|
||||
"jquery": "^3.6.0",
|
||||
"mdb-ui-kit": "^3.10.2",
|
||||
"moment": "^2.29.1",
|
||||
"mongoose": "^6.2.1",
|
||||
"mongoose-unique-validator": "^3.0.0",
|
||||
|
|
@ -67,7 +66,8 @@
|
|||
"nodemonConfig": {
|
||||
"exec": "npm run dev",
|
||||
"watch": [
|
||||
"src/*"
|
||||
"src/*",
|
||||
"sass/*"
|
||||
],
|
||||
"ignore": [
|
||||
"**/__tests__/**",
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
#toastr{visibility:hidden;min-width:250px;margin-left:-125px;background-color:#9c3030;color:#fff;text-align:left;border-radius:2px;padding:16px;position:fixed;z-index:1;right:30px;top:30px;font-size:17px}#toastr.show{visibility:visible;animation:toastrFadein .5s,toastrFadeout .5s 2.5s}@keyframes toastrFadein{from{top:0;opacity:0}to{top:30px;opacity:1}}@keyframes toastrFadeout{from{top:30px;opacity:1}to{top:0;opacity:0}}/*# sourceMappingURL=main.css.map */
|
||||
1
sass/bulma.scss
vendored
Normal file
1
sass/bulma.scss
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
@use '../node_modules/bulma/bulma.sass';
|
||||
3
sass/index.scss
Normal file
3
sass/index.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@use './bulma.scss';
|
||||
@use './toast.scss';
|
||||
@use './pagination.scss';
|
||||
15
sass/pagination.scss
Normal file
15
sass/pagination.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.pagination-link,
|
||||
.pagination-link,
|
||||
.pagination-next,
|
||||
.pagination-next,
|
||||
.pagination-previous,
|
||||
.pagination-previous {
|
||||
&.is-disabled,
|
||||
&[disabled] {
|
||||
background-color: #dbdbdb;
|
||||
border-color: #dbdbdb;
|
||||
box-shadow: none;
|
||||
color: #7a7a7a;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,9 @@
|
|||
#toastr {
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
margin-left: -125px;
|
||||
background-color: rgb(156, 48, 48);
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
border-radius: 2px;
|
||||
padding: 16px;
|
||||
max-width: 360px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
z-index: 31;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
font-size: 17px;
|
||||
|
|
|
|||
18
src/app.js
18
src/app.js
|
|
@ -9,6 +9,8 @@ import MongoStore from "connect-mongo";
|
|||
|
||||
import config, { env, mongoDbUri, secret } from "./config";
|
||||
|
||||
import { isXhr } from "./helpers";
|
||||
|
||||
import indexRouter from "./routes";
|
||||
import addAlbumRouter from "./routes/addAlbum";
|
||||
import importRouterApiV1 from "./routes/api/v1";
|
||||
|
|
@ -68,18 +70,6 @@ app.set("views", path.join(__dirname, "../views"));
|
|||
app.set("view engine", "ejs");
|
||||
|
||||
app.use(express.static(path.join(__dirname, "../public")));
|
||||
app.use(
|
||||
"/libs/jquery",
|
||||
express.static(path.join(__dirname, "../node_modules/jquery/dist/"))
|
||||
);
|
||||
app.use(
|
||||
"/libs/mdb-ui-kit/css",
|
||||
express.static(path.join(__dirname, "../node_modules/mdb-ui-kit/css"))
|
||||
);
|
||||
app.use(
|
||||
"/libs/mdb-ui-kit/js",
|
||||
express.static(path.join(__dirname, "../node_modules/mdb-ui-kit/js"))
|
||||
);
|
||||
app.use(
|
||||
"/libs/vue",
|
||||
express.static(path.join(__dirname, "../node_modules/vue/dist"))
|
||||
|
|
@ -96,7 +86,7 @@ app.use("/api/v1/albums", importAlbumRouterApiV1);
|
|||
|
||||
// Handle 404
|
||||
app.use((req, res) => {
|
||||
if (req.xhr || req.rawHeaders.indexOf("application/json") !== -1) {
|
||||
if (isXhr(req)) {
|
||||
res.status(404).send({ message: "404: Not found" });
|
||||
} else {
|
||||
res.status(404).render("index", {
|
||||
|
|
@ -116,7 +106,7 @@ app.use((req, res) => {
|
|||
|
||||
// Handle 500
|
||||
app.use((error, req, res, next) => {
|
||||
if (req.xhr || req.rawHeaders.indexOf("application/json") !== -1) {
|
||||
if (isXhr(req)) {
|
||||
const { message, errorCode, date } = error;
|
||||
res.status(error.errorCode || 500).send({ message, errorCode, date });
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -23,3 +23,16 @@ export const getAlbumDetails = async (id) => {
|
|||
|
||||
return res;
|
||||
};
|
||||
|
||||
export const isXhr = (req) => {
|
||||
const is = req.xhr;
|
||||
if (!is) {
|
||||
for (let i = 0; i < req.rawHeaders.length; i += 1) {
|
||||
if (req.rawHeaders[i].indexOf("application/json") !== -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return is;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -73,13 +73,49 @@ class Albums extends Pages {
|
|||
discogsId: body.id,
|
||||
User: user._id,
|
||||
};
|
||||
data.released = moment(data.released.replace("-00", "-01"));
|
||||
data.released = data.released
|
||||
? moment(data.released.replace("-00", "-01"))
|
||||
: null;
|
||||
delete data.id;
|
||||
|
||||
const album = new AlbumsModel(data);
|
||||
|
||||
return album.save();
|
||||
}
|
||||
|
||||
async getAll() {
|
||||
const {
|
||||
page = 1,
|
||||
limit = 4,
|
||||
sort = "artists_sort",
|
||||
order = "asc",
|
||||
} = this.req.query;
|
||||
|
||||
const skip = (page - 1) * limit;
|
||||
|
||||
const count = await AlbumsModel.count({
|
||||
user: this.req.user._id,
|
||||
});
|
||||
|
||||
const rows = await AlbumsModel.find(
|
||||
{
|
||||
user: this.req.user._id,
|
||||
},
|
||||
[],
|
||||
{
|
||||
skip,
|
||||
limit,
|
||||
sort: {
|
||||
[sort]: order.toLowerCase() === "asc" ? 1 : -1,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
rows,
|
||||
count,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default Albums;
|
||||
|
|
|
|||
|
|
@ -7,14 +7,26 @@ import Albums from "../../../middleware/Albums";
|
|||
// eslint-disable-next-line new-cap
|
||||
const router = express.Router();
|
||||
|
||||
router.route("/").post(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||
try {
|
||||
const data = await Albums.postAddOne(req);
|
||||
router
|
||||
.route("/")
|
||||
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||
try {
|
||||
const albums = new Albums(req);
|
||||
const data = await albums.getAll();
|
||||
|
||||
sendResponse(req, res, data);
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
});
|
||||
sendResponse(req, res, data);
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
})
|
||||
.post(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||
try {
|
||||
const data = await Albums.postAddOne(req);
|
||||
|
||||
sendResponse(req, res, data);
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
|
|
@ -72,6 +72,18 @@ router
|
|||
}
|
||||
});
|
||||
|
||||
router
|
||||
.route("/ma-collection")
|
||||
.get(ensureLoggedIn("/connexion"), async (req, res, next) => {
|
||||
try {
|
||||
const page = new Pages(req, "mon-compte/ma-collection");
|
||||
|
||||
render(res, page);
|
||||
} catch (err) {
|
||||
next(err);
|
||||
}
|
||||
});
|
||||
|
||||
router.route("/se-deconnecter").get((req, res) => {
|
||||
req.logout();
|
||||
req.session.destroy(() => {
|
||||
|
|
|
|||
172
views/index.ejs
172
views/index.ejs
|
|
@ -1,37 +1,159 @@
|
|||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<%- include('partials/head'); %>
|
||||
<body>
|
||||
<header>
|
||||
<%- include('partials/header'); %>
|
||||
</header>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %></title>
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link href="/css/main.css" rel="stylesheet" />
|
||||
|
||||
<script src="/libs/axios/axios.min.js"></script>
|
||||
<script src="/libs/vue/vue.global.prod.js"></script>
|
||||
|
||||
<script>
|
||||
function showToastr(message) {
|
||||
var x = document.getElementById("toastr");
|
||||
if ( message ) {
|
||||
x.getElementsByTagName("SPAN")[0].innerHTML = message;
|
||||
}
|
||||
|
||||
x.className = `${x.className} show`;
|
||||
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
if ($navbarBurgers.length > 0) {
|
||||
$navbarBurgers.forEach( el => {
|
||||
el.addEventListener('click', () => {
|
||||
const target = el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
|
||||
el.classList.toggle('is-active');
|
||||
$target.classList.toggle('is-active');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// document.addEventListener('DOMContentLoaded', () => {
|
||||
// (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
|
||||
// const $notification = $delete.parentNode;
|
||||
|
||||
// $delete.addEventListener('click', () => {
|
||||
// $notification.parentNode.removeChild($notification);
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
</script>
|
||||
</head>
|
||||
<body class="has-navbar-fixed-top">
|
||||
<nav class="navbar is-fixed-top is-light" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="/">
|
||||
Ma CDThèque
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<% if ( user ) { %>
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="/ajouter-un-album">
|
||||
Ajouter un album
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">
|
||||
Mon compte
|
||||
</a>
|
||||
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="/ma-collection">
|
||||
Ma collection
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<% if ( !user ) { %>
|
||||
<a class="button is-link" href="/connexion">
|
||||
<strong>Connexion</strong>
|
||||
</a>
|
||||
<% } else { %>
|
||||
<a class="button is-danger" href="/se-deconnecter">
|
||||
Déconnexion
|
||||
</a>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<div id="toastr"></div>
|
||||
<div id="toastr" class="notification is-danger">
|
||||
<button class="delete"></button>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<main class="mt-4 mb-5">
|
||||
|
||||
<% if ( page.failureFlash ) {%>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<%= page.failureFlash %>
|
||||
<% if ( page.failureFlash || (error && error.length > 0 ) ) {%>
|
||||
<div class="columns is-mobile">
|
||||
<div class="
|
||||
column
|
||||
is-10-mobile is-offset-1-mobile
|
||||
is-8-tablet is-offset-2-tablet
|
||||
is-6-desktop is-offset-3-desktop
|
||||
is-4-widescreen is-offset-4-widescreen
|
||||
">
|
||||
<% if ( page.failureFlash ) {%>
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
<p>Erreur</p>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<%= page.failureFlash %>
|
||||
</div>
|
||||
</article>
|
||||
<% } %>
|
||||
<%
|
||||
if (error && error.length > 0) {
|
||||
for( let i = 0 ; i < error.length ; i += 1 ) {
|
||||
%>
|
||||
<article class="message is-danger">
|
||||
<div class="message-header">
|
||||
<p>Erreur</p>
|
||||
<button class="delete" aria-label="delete"></button>
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<%= error %>
|
||||
</div>
|
||||
</article>
|
||||
<%
|
||||
}
|
||||
}
|
||||
%>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<%
|
||||
if (error && error.length > 0) {
|
||||
for( let i = 0 ; i < error.length ; i += 1 ) {
|
||||
%>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<%= error %>
|
||||
</div>
|
||||
<%
|
||||
}
|
||||
}
|
||||
%>
|
||||
<%- include(viewname) %>
|
||||
</main>
|
||||
<footer class="bg-light text-lg-start">
|
||||
<%- include('partials/footer'); %>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,117 +1,166 @@
|
|||
<div class="container-fluid" id="app">
|
||||
<form class="bg-white rounded shadow-5-strong p-5" method="POST" @submit="add">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-3 p-2 text-center">
|
||||
<img src="<%= page.values.thumb %>" alt="Miniature" />
|
||||
<hr />
|
||||
<img v-for="image in album.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
|
||||
<hr />
|
||||
<div class="container" id="app">
|
||||
<form method="POST" @submit="add">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12-mobile is-4-desktop">
|
||||
<div class="has-text-centered">
|
||||
<img src="<%= page.values.thumb %>" alt="Miniature" />
|
||||
<hr />
|
||||
<img v-for="image in album.images" :src="image.uri150" alt="Miniature" style="max-width: 60px;" />
|
||||
<hr />
|
||||
</div>
|
||||
<ol>
|
||||
<li v-for="track in album.tracklist">{{ track.title }} ({{track.duration}})</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div class="col-12 col-sm-9 p-2">
|
||||
<div class="row">
|
||||
<div class="col-12 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="title" name="title" class="form-control" v-model="album.title" disabled />
|
||||
<label class="form-label" for="artists">Titre</label>
|
||||
</div>
|
||||
<div class="column is-12-mobile is-8-desktop">
|
||||
<div class="column is-12">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12">
|
||||
<div class="field">
|
||||
<label class="label" for="artists">Titre</label>
|
||||
<div class="control">
|
||||
<input type="text" id="title" name="title" class="input" v-model="album.title" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-outline mb-4" v-for="artist in album.artists">
|
||||
<input type="text" id="artists" name="artists" class="form-control" v-model="artist.name" disabled />
|
||||
<label class="form-label" for="artists">Artiste</label>
|
||||
<div class="field" v-for="artist in album.artists">
|
||||
<label class="label" for="artists">Artiste</label>
|
||||
<div class="control">
|
||||
<input type="text" id="artists" name="artists" class="input" v-model="artist.name" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2" v-for="genre in album.genres">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="genres" name="genres" class="form-control" v-model="genre" disabled />
|
||||
<label class="form-label" for="company">Genre</label>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="genre in album.genres">
|
||||
<div class="field">
|
||||
<label class="label" for="company">Genre</label>
|
||||
<div class="control">
|
||||
<input type="text" id="genres" name="genres" class="input" v-model="genre" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 p-2" v-for="style in album.styles">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="style" name="style" class="form-control" v-model="style" disabled />
|
||||
<label class="form-label" for="company">Style</label>
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="style in album.styles">
|
||||
<div class="field">
|
||||
<label class="label" for="company">Style</label>
|
||||
<div class="control">
|
||||
<input type="text" id="style" name="style" class="input" v-model="style" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="year" name="year" class="form-control" v-model="album.year" disabled />
|
||||
<label class="form-label" for="year">Année</label>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12-mobile is-6-desktop">
|
||||
<div class="field">
|
||||
<label class="label" for="year">Année</label>
|
||||
<div class="control">
|
||||
<input type="text" id="year" name="year" class="input" v-model="album.year" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="released" name="released" class="form-control" v-model="album.released" disabled />
|
||||
<label class="form-label" for="released">Date de sortie</label>
|
||||
<div class="column is-12-mobile is-6-desktop">
|
||||
<div class="field">
|
||||
<label class="label" for="released">Date de sortie</label>
|
||||
<div class="control">
|
||||
<input type="text" id="released" name="released" class="input" v-model="album.released" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="country" name="country" class="form-control" v-model="album.country" disabled />
|
||||
<label class="form-label" for="country">Pays</label>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12-mobile is-6-desktop">
|
||||
<div class="field">
|
||||
<label class="label" for="country">Pays</label>
|
||||
<div class="control">
|
||||
<input type="text" id="country" name="country" class="input" v-model="album.country" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<ol>
|
||||
<li v-for="identifier in album.identifiers">
|
||||
{{identifier.value}} ({{identifier.type}})
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 p-2">
|
||||
<div class="form-outline mb-4">
|
||||
<textarea id="notes" id="notes" name="notes" class="form-control" v-model="album.notes" disabled></textarea>
|
||||
<label class="form-label" for="country">Notes</label>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12">
|
||||
<span class="label">Codes barres</span>
|
||||
<ol>
|
||||
<li v-for="identifier in album.identifiers">
|
||||
{{identifier.value}} ({{identifier.type}})
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2" v-for="format in album.formats">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="format" name="format" class="form-control" v-model="format.name" disabled />
|
||||
<label class="form-label" for="format">Format</label>
|
||||
<div class="columns is-mobile">
|
||||
<div class="column is-12">
|
||||
<div class="field">
|
||||
<label class="label" for="country">Notes</label>
|
||||
<div class="control">
|
||||
<textarea id="notes" id="notes" name="notes" class="textarea" rows="8" v-model="album.notes" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2" v-for="label in album.labels">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="label" name="label" class="form-control" v-model="label.name" disabled />
|
||||
<label class="form-label" for="label">Label</label>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="format in album.formats">
|
||||
<div class="field">
|
||||
<label class="label" for="format">Format</label>
|
||||
<div class="control">
|
||||
<input type="text" id="format" name="format" class="input" v-model="format.name" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2" v-for="company in album.companies">
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="company" name="company" class="form-control" v-model="company.name" disabled />
|
||||
<label class="form-label" for="company">Société</label>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="label in album.labels">
|
||||
<div class="field">
|
||||
<label class="label" for="label">Label</label>
|
||||
<div class="control">
|
||||
<input type="text" id="label" name="label" class="input" v-model="label.name" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<ol>
|
||||
<li v-for="video in album.videos">
|
||||
<a :href="video.uri" target="_blank">{{video.title}}</a>
|
||||
</li>
|
||||
</ol>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile is-6-desktop" v-for="company in album.companies">
|
||||
<div class="field">
|
||||
<label class="label" for="label">Société</label>
|
||||
<div class="control">
|
||||
<input type="text" id="company" name="company" class="input" v-model="company.name" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="col-12 col-sm-6 p-2">
|
||||
<ol>
|
||||
<li v-for="extraartist in album.extraartists">
|
||||
{{extraartist.name}} ({{extraartist.role}})
|
||||
</li>
|
||||
</ol>
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile">
|
||||
<span class="label">Vidéos</span>
|
||||
<ol>
|
||||
<li v-for="video in album.videos">
|
||||
<a :href="video.uri" target="_blank">{{video.title}}</a>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="columns is-mobile is-multiline">
|
||||
<div class="column is-12-mobile">
|
||||
<span class="label">Artistes</span>
|
||||
<ul>
|
||||
<li v-for="extraartist in album.extraartists">
|
||||
{{extraartist.name}} ({{extraartist.role}})
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">Ajouter</button>
|
||||
<button type="submit" class="button is-primary is-fullwidth">Ajouter</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
|
@ -134,7 +183,6 @@
|
|||
window.location.href = '/ma-collection';
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('ERR:', err.response);
|
||||
showToastr(err.response?.data?.message || "Impossible d'ajouter ce album pour le moment…");
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,19 @@
|
|||
<div class="container-fluid" id="app">
|
||||
<div class="container" id="app">
|
||||
<form @submit="search">
|
||||
<div class="input-group mb-3">
|
||||
<div class="form-outline">
|
||||
<input v-model="q" type="search" id="q" class="form-control" />
|
||||
<label class="form-label" for="q">Nom de l'album ou code barre</label>
|
||||
<div class="field has-addons">
|
||||
<div class="control">
|
||||
<input class="input" type="text" name="q" v-model="q" placeholder="Nom de l'album ou code barre (ex : Hybrid Theory">
|
||||
</div>
|
||||
<div class="control">
|
||||
<button class="button is-link" :disabled="loading">
|
||||
<span class="icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<table class="table table-striped table-hover table-sm align-middle">
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pochette</th>
|
||||
|
|
@ -23,6 +26,11 @@
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td colspan="7">
|
||||
Chargement en cours…
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="item in items">
|
||||
<td>
|
||||
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
||||
|
|
@ -56,6 +64,7 @@
|
|||
data() {
|
||||
return {
|
||||
q: '',
|
||||
loading: false,
|
||||
items: [],
|
||||
}
|
||||
},
|
||||
|
|
@ -63,6 +72,12 @@
|
|||
search(event) {
|
||||
event.preventDefault();
|
||||
|
||||
if ( this.loading ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.loading = true;
|
||||
|
||||
axios.get(`/api/v1/search?q=${this.q}`)
|
||||
.then( response => {
|
||||
const {
|
||||
|
|
@ -95,8 +110,11 @@
|
|||
|
||||
this.items = items;
|
||||
})
|
||||
.catch( err => {
|
||||
console.log('err:', err);
|
||||
.catch((err) => {
|
||||
showToastr(err.response?.data?.message || "Aucun résultat trouvé :/");
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,38 @@
|
|||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-5 col-md-8">
|
||||
<form class="bg-white rounded shadow-5-strong p-5" method="POST">
|
||||
<div class="text-center">
|
||||
<div class="columns is-mobile">
|
||||
<div class="
|
||||
column
|
||||
is-10-mobile is-offset-1-mobile
|
||||
is-8-tablet is-offset-2-tablet
|
||||
is-6-desktop is-offset-3-desktop
|
||||
is-4-widescreen is-offset-4-widescreen
|
||||
">
|
||||
<form class="box" method="POST">
|
||||
<div class="has-text-centered">
|
||||
<img class="mb-4" src="/img/logo.png" alt="DarKou">
|
||||
</div>
|
||||
<h4>Connexion</h4>
|
||||
|
||||
<div class="form-outline mb-4">
|
||||
<input type="email" id="email" name="email" class="form-control" />
|
||||
<label class="form-label" for="email">Adresse e-mail</label>
|
||||
<div class="is-size-3">
|
||||
Connexion
|
||||
</div>
|
||||
|
||||
<div class="form-outline mb-4">
|
||||
<input type="password" id="password" name="password" class="form-control" />
|
||||
<label class="form-label" for="password">Mot de passe</label>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Adresse e-mail</label>
|
||||
<div class="control">
|
||||
<input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col text-end">
|
||||
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
|
||||
<div class="field">
|
||||
<label class="label" for="password">Mot de passe</label>
|
||||
<div class="control">
|
||||
<input class="input" type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">Connexion</button>
|
||||
</form>
|
||||
<div class="has-text-right mb-3">
|
||||
<p>Pas encore inscrit ? <a href="/inscription">Inscrivez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button class="button is-link">Connexion</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,35 +1,44 @@
|
|||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-xl-5 col-md-8">
|
||||
<form class="bg-white rounded shadow-5-strong p-5" method="POST">
|
||||
<div class="text-center">
|
||||
<div class="columns is-mobile">
|
||||
<div class="
|
||||
column
|
||||
is-10-mobile is-offset-1-mobile
|
||||
is-8-tablet is-offset-2-tablet
|
||||
is-6-desktop is-offset-3-desktop
|
||||
is-4-widescreen is-offset-4-widescreen
|
||||
">
|
||||
<form class="box" method="POST">
|
||||
<div class="has-text-centered">
|
||||
<img class="mb-4" src="/img/logo.png" alt="DarKou">
|
||||
</div>
|
||||
<h4>Inscription</h4>
|
||||
|
||||
<div class="form-outline mb-4">
|
||||
<input type="text" id="username" name="username" class="form-control" />
|
||||
<label class="form-label" for="username">Nom d'utilisateur</label>
|
||||
<div class="is-size-3">
|
||||
Inscription
|
||||
</div>
|
||||
|
||||
<div class="form-outline mb-4">
|
||||
<input type="email" id="email" name="email" class="form-control" />
|
||||
<label class="form-label" for="email">Adresse e-mail</label>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Nom d'utilisateur</label>
|
||||
<div class="control">
|
||||
<input class="input" type="text" name="username" id="username" placeholder="ex : darkou">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-outline mb-4">
|
||||
<input type="password" id="password" name="password" class="form-control" />
|
||||
<label class="form-label" for="password">Mot de passe</label>
|
||||
<div class="field">
|
||||
<label class="label" for="email">Adresse e-mail</label>
|
||||
<div class="control">
|
||||
<input class="input" type="email" name="email" id="email" placeholder="ex : damien@darkou.fr">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col text-end">
|
||||
<p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
|
||||
<div class="field">
|
||||
<label class="label" for="password">Mot de passe</label>
|
||||
<div class="control">
|
||||
<input class="input" type="password" name="password" id="password" placeholder="********">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-block">Inscription</button>
|
||||
</form>
|
||||
<div class="has-text-right mb-3">
|
||||
<p>Déjà inscrit ? <a href="/connexion">Connectez-vous</a></p>
|
||||
</div>
|
||||
|
||||
<button class="button is-link">Inscription</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
133
views/pages/mon-compte/ma-collection.ejs
Normal file
133
views/pages/mon-compte/ma-collection.ejs
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
<div class="container" id="app">
|
||||
<table class="table is-striped is-hoverable is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pochette</th>
|
||||
<th>Artiste</th>
|
||||
<th>Titre</th>
|
||||
<th>Année</th>
|
||||
<th>Pays</th>
|
||||
<th>Format</th>
|
||||
<th>Genres</th>
|
||||
<th>Styles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td colspan="8">
|
||||
Chargement en cours…
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!loading" v-for="item in items">
|
||||
<td>
|
||||
<img :src="item.thumb" :alt="item.title" style="max-width: 120px;"/>
|
||||
</td>
|
||||
<td>{{ item.artists_sort }}</td>
|
||||
<td>
|
||||
<a :href="'/ma-collection/' + item._id">{{ item.title }}</a>
|
||||
</td>
|
||||
<td>{{ item.year }}</td>
|
||||
<td>{{ item.country }}</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li v-for="format in item.formats">{{ format.name }}</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li v-for="genre in item.genres">{{ genre }}</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li v-for="style in item.styles">{{ style }}</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||||
<a class="pagination-previous" :class="{'is-disabled': page === 1}" @click="previous">Précédent</a>
|
||||
<a class="pagination-next" :class="{'is-disabled': (page*limit) >= total}" @click="next">Suivant</a>
|
||||
<ul class="pagination-list">
|
||||
<li v-for="p in Array.from({length: totalPages}, (v, i) => (i+1))">
|
||||
<a class="pagination-link" :class="{'is-current': p === page}" @click="goTo(p)" aria-label="Goto page 1">{{ p }}</a>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="pagination-ellipsis">…</span>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
Vue.createApp({
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
items: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
totalPages: 1,
|
||||
limit: 5,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fetch();
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
this.loading = true;
|
||||
|
||||
axios.get(`/api/v1/albums?page=${this.page}&limit=${this.limit}`)
|
||||
.then( response => {
|
||||
this.items = response.data.rows;
|
||||
this.total = response.data.count;
|
||||
this.totalPages = parseInt(response.data.count / this.limit) + (response.data.count % this.limit > 0 ? 1 : 0);
|
||||
|
||||
console.log('total:', this.total, (this.page * this.limit));
|
||||
})
|
||||
.catch((err) => {
|
||||
showToastr(err.response?.data?.message || "Impossible de charger votre collection");
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
next(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.page += 1;
|
||||
|
||||
this.fetch();
|
||||
},
|
||||
previous(event) {
|
||||
event.preventDefault();
|
||||
|
||||
this.page -= 1;
|
||||
|
||||
this.fetch();
|
||||
},
|
||||
goTo(page) {
|
||||
this.page = page;
|
||||
|
||||
this.fetch();
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
|
||||
<script type="text/javascript" src="/libs/mdb-ui-kit/js/mdb.min.js"></script>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title><% if (page.title) { %><%= page.title %> <% } else { %> DarKou - Ma CDThèque <% } %></title>
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="/libs/mdb-ui-kit/css/mdb.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link href="/css/main.css" rel="stylesheet" />
|
||||
|
||||
<script type="text/javascript" src="/libs/jquery/jquery.min.js"></script>
|
||||
|
||||
<script src="/libs/axios/axios.min.js"></script>
|
||||
<script src="/libs/vue/vue.global.prod.js"></script>
|
||||
|
||||
<script>
|
||||
function showToastr(message) {
|
||||
var x = document.getElementById("toastr");
|
||||
if ( message ) {
|
||||
x.innerHTML = message;
|
||||
}
|
||||
|
||||
x.className = "show";
|
||||
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<div class="container-fluid">
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-mdb-toggle="collapse"
|
||||
data-mdb-target="#navbarSupportedContent"
|
||||
aria-controls="navbarSupportedContent"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<a class="navbar-brand mt-2 mt-lg-0" href="/">
|
||||
Ma CDThèque
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<% if ( user ) { %>
|
||||
<div class="d-flex align-items-center">
|
||||
<a class="text-reset me-3" href="/ajouter-un-album">
|
||||
Ajouter un album
|
||||
</a>
|
||||
<div class="dropdown">
|
||||
<a
|
||||
class="dropdown-toggle d-flex align-items-center hidden-arrow"
|
||||
href="#"
|
||||
id="navbarDropdownMenuAvatar"
|
||||
role="button"
|
||||
data-mdb-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Mon compte
|
||||
</a>
|
||||
<ul
|
||||
class="dropdown-menu dropdown-menu-end"
|
||||
aria-labelledby="navbarDropdownMenuAvatar"
|
||||
>
|
||||
<li><a class="dropdown-item" href="/ma-collection">Ma collection</a></li>
|
||||
<li><hr class="dropdown-divider" /></li>
|
||||
<li><a class="dropdown-item" href="/se-deconnecter">Déconnexion</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</nav>
|
||||
Loading…
Reference in a new issue