From 81f17078351926ed37041bd43d23bea8a79259e1 Mon Sep 17 00:00:00 2001 From: Onestay Date: Sun, 23 Apr 2017 14:09:44 +0200 Subject: only display album select when user is logged in It still needs additional styling and stuff --- public/js/home.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'public') diff --git a/public/js/home.js b/public/js/home.js index 6253c10..a3725e0 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -16,7 +16,6 @@ upload.checkIfPublic = function(){ return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error"); console.log(error); }); - } upload.preparePage = function(){ @@ -61,6 +60,10 @@ upload.verifyToken = function(token, reloadOnError){ } upload.prepareUpload = function(){ + + if (upload.token) { + document.getElementById('albumDiv').style.display = 'block'; + } div = document.createElement('div'); div.id = 'dropzone'; @@ -74,7 +77,7 @@ upload.prepareUpload = function(){ document.getElementById('loginLinkText').innerHTML = 'Create an account and keep track of your uploads'; document.getElementById('uploadContainer').appendChild(div); - + upload.prepareDropzone(); } -- cgit v1.2.3 From e5cd142347e6811cd27bd3dc8dc511d39880d59a Mon Sep 17 00:00:00 2001 From: Onestay Date: Sun, 23 Apr 2017 14:29:09 +0200 Subject: Get albums and put them in the select as options --- public/js/home.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'public') diff --git a/public/js/home.js b/public/js/home.js index a3725e0..35d1e22 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -62,7 +62,24 @@ upload.verifyToken = function(token, reloadOnError){ upload.prepareUpload = function(){ if (upload.token) { - document.getElementById('albumDiv').style.display = 'block'; + const select = document.querySelector('select'); + axios.get('/api/albums', { headers: { token: upload.token }}) + .then((res) => { + console.log(res); + let albums = res.data.albums; + + if (albums.length === 0) return; + for (let i = 0; i < albums.length; i++) { + let opt = document.createElement('option'); + opt.value = albums[i].id; + opt.innerHTML = albums[i].name; + select.appendChild(opt); + } + document.getElementById('albumDiv').style.display = 'block'; + }) + .catch((e) => { + console.log(e); + }) } div = document.createElement('div'); -- cgit v1.2.3 From b9fd64c620f1cd47ce2e2532c86a4dc0448e87eb Mon Sep 17 00:00:00 2001 From: Onestay Date: Sun, 23 Apr 2017 15:19:10 +0200 Subject: added a bit of styling --- public/css/style.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'public') diff --git a/public/css/style.css b/public/css/style.css index 729b3d4..ac3959d 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -105,3 +105,8 @@ section#dashboard .table { font-size: 12px } section#dashboard div#table div.column { display:flex; width: 200px; height: 200px; margin: 9px; background: #f9f9f9; overflow: hidden; align-items: center; } section#dashboard div#table div.column a { width: 100%; } section#dashboard div#table div.column a img { width:200px; } + +.select-wrapper { + text-align: center; + margin-bottom: 10px; +} -- cgit v1.2.3 From cf6a39673003313064fe5ca23e78c35131e5c3f7 Mon Sep 17 00:00:00 2001 From: Onestay Date: Sun, 23 Apr 2017 15:19:31 +0200 Subject: Uploading to an album --- public/js/home.js | 34 ++++++++++++++++++++++++++++------ 1 file changed, 28 insertions(+), 6 deletions(-) (limited to 'public') diff --git a/public/js/home.js b/public/js/home.js index 35d1e22..9ec104b 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -3,6 +3,8 @@ var upload = {}; upload.isPrivate = true; upload.token = localStorage.token; upload.maxFileSize; +// add the album var to the upload so we can store the album id in there +upload.album; upload.checkIfPublic = function(){ @@ -61,23 +63,30 @@ upload.verifyToken = function(token, reloadOnError){ upload.prepareUpload = function(){ + // I think this fits best here because we need to check for a valid token before we can get the albums if (upload.token) { const select = document.querySelector('select'); + axios.get('/api/albums', { headers: { token: upload.token }}) - .then((res) => { - console.log(res); + .then(function(res) { let albums = res.data.albums; - if (albums.length === 0) return; + // if the user doesn't have any albums we don't really need to display + // an album selection + if (albums.length === 0) return; + + // loop through the albums and create an option for each album for (let i = 0; i < albums.length; i++) { let opt = document.createElement('option'); opt.value = albums[i].id; opt.innerHTML = albums[i].name; select.appendChild(opt); } + // display the album selection document.getElementById('albumDiv').style.display = 'block'; }) - .catch((e) => { + .catch(function(e) { + return swal("An error ocurred", 'There was an error with the request, please check the console for more information.', "error"); console.log(e); }) } @@ -100,7 +109,7 @@ upload.prepareUpload = function(){ } upload.prepareDropzone = function(){ - + var previewNode = document.querySelector('#template'); previewNode.id = ''; var previewTemplate = previewNode.parentNode.innerHTML; @@ -125,6 +134,13 @@ upload.prepareDropzone = function(){ myDropzone = this; document.getElementById('uploads').style.display = 'block'; }); + // add the selected albumid, if an album is selected, as a header + this.on('sending', function(file, xhr) { + if (upload.album) { + console.log(upload.album) + xhr.setRequestHeader('albumid', upload.album) + } + }); } }); @@ -175,4 +191,10 @@ window.addEventListener('paste', function(event) { window.onload = function () { upload.checkIfPublic(); -}; \ No newline at end of file + + // eventlistener for the album select + document.querySelector('select').addEventListener('change', function() { + upload.album = document.querySelector('select').value; + }); +}; + -- cgit v1.2.3 From 07f1b1ca3c745a2d43474d0e76473e4883416c5e Mon Sep 17 00:00:00 2001 From: Onestay Date: Sun, 23 Apr 2017 15:22:14 +0200 Subject: remove debug console.log --- public/js/home.js | 1 - 1 file changed, 1 deletion(-) (limited to 'public') diff --git a/public/js/home.js b/public/js/home.js index 9ec104b..bb0f62c 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -137,7 +137,6 @@ upload.prepareDropzone = function(){ // add the selected albumid, if an album is selected, as a header this.on('sending', function(file, xhr) { if (upload.album) { - console.log(upload.album) xhr.setRequestHeader('albumid', upload.album) } }); -- cgit v1.2.3 From 480a38d26048ae5c6e8264cab0f3096a4c471fc6 Mon Sep 17 00:00:00 2001 From: Onestay Date: Sun, 23 Apr 2017 15:26:45 +0200 Subject: change let and const to var to support older browsers --- public/js/home.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'public') diff --git a/public/js/home.js b/public/js/home.js index bb0f62c..1b99e0d 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -65,19 +65,19 @@ upload.prepareUpload = function(){ // I think this fits best here because we need to check for a valid token before we can get the albums if (upload.token) { - const select = document.querySelector('select'); + var select = document.querySelector('select'); axios.get('/api/albums', { headers: { token: upload.token }}) .then(function(res) { - let albums = res.data.albums; + var albums = res.data.albums; // if the user doesn't have any albums we don't really need to display // an album selection if (albums.length === 0) return; // loop through the albums and create an option for each album - for (let i = 0; i < albums.length; i++) { - let opt = document.createElement('option'); + for (var i = 0; i < albums.length; i++) { + var opt = document.createElement('option'); opt.value = albums[i].id; opt.innerHTML = albums[i].name; select.appendChild(opt); -- cgit v1.2.3 From f167bc52a056c634cc2edd70be21d298d7e76aab Mon Sep 17 00:00:00 2001 From: Onestay Date: Sun, 23 Apr 2017 15:36:26 +0200 Subject: removed all trailing spaces (I think) --- public/js/home.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'public') diff --git a/public/js/home.js b/public/js/home.js index 1b99e0d..a9ca41c 100644 --- a/public/js/home.js +++ b/public/js/home.js @@ -7,7 +7,6 @@ upload.maxFileSize; upload.album; upload.checkIfPublic = function(){ - axios.get('/api/check') .then(function (response) { upload.isPrivate= response.data.private; @@ -62,7 +61,6 @@ upload.verifyToken = function(token, reloadOnError){ } upload.prepareUpload = function(){ - // I think this fits best here because we need to check for a valid token before we can get the albums if (upload.token) { var select = document.querySelector('select'); @@ -109,7 +107,6 @@ upload.prepareUpload = function(){ } upload.prepareDropzone = function(){ - var previewNode = document.querySelector('#template'); previewNode.id = ''; var previewTemplate = previewNode.parentNode.innerHTML; -- cgit v1.2.3