diff --git a/gallery/api.py b/gallery/api.py index 0852064..7952ddc 100644 --- a/gallery/api.py +++ b/gallery/api.py @@ -133,7 +133,7 @@ def upload(): # Get metadata and colors img_exif = mt.Metadata(img_path).yoink() img_colors = ColorThief(img_path).get_palette(color_count=3) - + # Save to database try: query = db.Posts(author_id = g.user.id, diff --git a/gallery/db.py b/gallery/db.py index ae336ca..e903b6b 100644 --- a/gallery/db.py +++ b/gallery/db.py @@ -12,6 +12,8 @@ from sqlalchemy.orm import declarative_base, relationship, backref, mapped_colum path_to_db = os.path.join(platformdirs.user_config_dir('onlylegs'), 'gallery.sqlite') engine = create_engine(f'sqlite:///{path_to_db}', echo=False) +# engine = create_engine(f'postgresql://username:password@host:port/database_name', echo=False) +# engine = create_engine(f'mysql://username:password@host:port/database_name', echo=False) base = declarative_base() diff --git a/gallery/routing.py b/gallery/routing.py index eeec90a..343a18b 100644 --- a/gallery/routing.py +++ b/gallery/routing.py @@ -22,7 +22,10 @@ def index(): """ Home page of the website, shows the feed of latest images """ - images = db_session.query(db.Posts.file_name, db.Posts.id, db.Posts.created_at).order_by(db.Posts.id.desc()).all() + images = db_session.query(db.Posts.file_name, + db.Posts.id, + db.Posts.created_at + ).order_by(db.Posts.id.desc()).all() return render_template('index.html', images=images, @@ -35,10 +38,12 @@ def image(image_id): """ Image view, shows the image and its metadata """ - img = db_session.query(db.Posts).filter_by(id=image_id).first() - + img = db_session.query(db.Posts).filter(db.Posts.id == image_id).first() + author = db_session.query(db.Users.username).filter(db.Users.id == img.author_id).first()[0] + img.author_username = author + if img is None: - abort(404) + abort(404, 'Image not found') return render_template('image.html', image=img, exif=img.image_exif) diff --git a/gallery/static/js/main.js b/gallery/static/js/main.js index 1844d14..e98f3df 100644 --- a/gallery/static/js/main.js +++ b/gallery/static/js/main.js @@ -5,7 +5,7 @@ document.onscroll = function() { document.querySelector('.background-decoration').style.opacity = `${1 - window.scrollY / 621}`; document.querySelector('.background-decoration').style.top = `-${window.scrollY / 5}px`; } catch (e) { - console.log('No background decoration found'); + // Do nothing if banner not found } try { @@ -16,7 +16,7 @@ document.onscroll = function() { } } catch (e) { - console.log('No banner found'); + // Do nothing if banner not found } if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { @@ -41,128 +41,3 @@ for (var i = 0; i < times.length; i++) { var date = new Date(time); times[i].innerHTML = date.toLocaleString('en-GB'); } - -function addNotification(text='Sample notification', type=4) { - var container = document.querySelector('.notifications'); - - // Create notification element - var div = document.createElement('div'); - div.classList.add('sniffle__notification'); - div.onclick = function() { - if (div.parentNode) { - div.classList.add('sniffle__notification--hide'); - - setTimeout(function() { - container.removeChild(div); - }, 500); - } - }; - - // Create icon element and append to notification - var icon = document.createElement('span'); - icon.classList.add('sniffle__notification-icon'); - switch (type) { - case 1: - div.classList.add('sniffle__notification--success'); - icon.innerHTML = '\ - \ - '; - break; - case 2: - div.classList.add('sniffle__notification--error'); - icon.innerHTML = '\ - \ - '; - break; - case 3: - div.classList.add('sniffle__notification--warning'); - icon.innerHTML = '\ - \ - '; - break; - default: - div.classList.add('sniffle__notification--info'); - icon.innerHTML = '\ - \ - '; - break; - } - div.appendChild(icon); - - // Create text element and append to notification - var description = document.createElement('span'); - description.classList.add('sniffle__notification-text'); - description.innerHTML = text; - div.appendChild(description); - - // Create span to show time remaining - var timer = document.createElement('span'); - timer.classList.add('sniffle__notification-time'); - div.appendChild(timer); - - // Append notification to container - container.appendChild(div); - setTimeout(function() { - div.classList.add('sniffle__notification-show'); - }, 100); - - // Remove notification after 5 seconds - setTimeout(function() { - if (div.parentNode) { - div.classList.add('sniffle__notification--hide'); - - setTimeout(function() { - container.removeChild(div); - }, 500); - } - }, 5000); -} - -function popUpShow(title, body, actions, content) { - var popup = document.querySelector('.pop-up'); - var popupContent = document.querySelector('.pop-up-content'); - var popupActions = document.querySelector('.pop-up-controlls'); - - // Set tile and description - h3 = document.createElement('h3'); - h3.innerHTML = title; - p = document.createElement('p'); - p.innerHTML = body; - - popupContent.innerHTML = ''; - popupContent.appendChild(h3); - popupContent.appendChild(p); - - // Set content - if (content != '') { - popupContent.innerHTML += content; - } - - // Set buttons that will be displayed - popupActions.innerHTML = ''; - if (actions != '') { - popupActions.innerHTML += actions; - } - popupActions.innerHTML += ''; - - // Show popup - popup.classList.add('pop-up__active'); -} - -function popupDissmiss() { - var popup = document.querySelector('.pop-up'); - - popup.classList.add('pop-up__hide'); - - setTimeout(function() { - popup.classList = 'pop-up'; - }, 200); -} - -document.addEventListener('keydown', function(event) { - if (event.key === 'Escape') { - if (document.querySelector('.pop-up').classList.contains('pop-up__active')) { - popupDissmiss(); - } - } -}); \ No newline at end of file diff --git a/gallery/static/js/ui/notifications.js b/gallery/static/js/ui/notifications.js new file mode 100644 index 0000000..9d46f2e --- /dev/null +++ b/gallery/static/js/ui/notifications.js @@ -0,0 +1,75 @@ +function addNotification(text='Sample notification', type=4) { + var container = document.querySelector('.notifications'); + + // Create notification element + var div = document.createElement('div'); + div.classList.add('sniffle__notification'); + div.onclick = function() { + if (div.parentNode) { + div.classList.add('sniffle__notification--hide'); + + setTimeout(function() { + container.removeChild(div); + }, 500); + } + }; + + // Create icon element and append to notification + var icon = document.createElement('span'); + icon.classList.add('sniffle__notification-icon'); + switch (type) { + case 1: + div.classList.add('sniffle__notification--success'); + icon.innerHTML = '\ + \ + '; + break; + case 2: + div.classList.add('sniffle__notification--error'); + icon.innerHTML = '\ + \ + '; + break; + case 3: + div.classList.add('sniffle__notification--warning'); + icon.innerHTML = '\ + \ + '; + break; + default: + div.classList.add('sniffle__notification--info'); + icon.innerHTML = '\ + \ + '; + break; + } + div.appendChild(icon); + + // Create text element and append to notification + var description = document.createElement('span'); + description.classList.add('sniffle__notification-text'); + description.innerHTML = text; + div.appendChild(description); + + // Create span to show time remaining + var timer = document.createElement('span'); + timer.classList.add('sniffle__notification-time'); + div.appendChild(timer); + + // Append notification to container + container.appendChild(div); + setTimeout(function() { + div.classList.add('sniffle__notification-show'); + }, 100); + + // Remove notification after 5 seconds + setTimeout(function() { + if (div.parentNode) { + div.classList.add('sniffle__notification--hide'); + + setTimeout(function() { + container.removeChild(div); + }, 500); + } + }, 5000); +} \ No newline at end of file diff --git a/gallery/static/js/ui/popup.js b/gallery/static/js/ui/popup.js new file mode 100644 index 0000000..4e71651 --- /dev/null +++ b/gallery/static/js/ui/popup.js @@ -0,0 +1,48 @@ +function popUpShow(title, body, actions, content) { + var popup = document.querySelector('.pop-up'); + var popupContent = document.querySelector('.pop-up-content'); + var popupActions = document.querySelector('.pop-up-controlls'); + + // Set tile and description + h3 = document.createElement('h3'); + h3.innerHTML = title; + p = document.createElement('p'); + p.innerHTML = body; + + popupContent.innerHTML = ''; + popupContent.appendChild(h3); + popupContent.appendChild(p); + + // Set content + if (content != '') { + popupContent.innerHTML += content; + } + + // Set buttons that will be displayed + popupActions.innerHTML = ''; + if (actions != '') { + popupActions.innerHTML += actions; + } + popupActions.innerHTML += ''; + + // Show popup + popup.classList.add('pop-up__active'); +} + +function popupDissmiss() { + var popup = document.querySelector('.pop-up'); + + popup.classList.add('pop-up__hide'); + + setTimeout(function() { + popup.classList = 'pop-up'; + }, 200); +} + +document.addEventListener('keydown', function(event) { + if (event.key === 'Escape') { + if (document.querySelector('.pop-up').classList.contains('pop-up__active')) { + popupDissmiss(); + } + } +}); \ No newline at end of file diff --git a/gallery/static/js/upload.js b/gallery/static/js/upload.js index 6da0b91..3753f02 100644 --- a/gallery/static/js/upload.js +++ b/gallery/static/js/upload.js @@ -26,9 +26,7 @@ function uploadFile(){ formData.append("description", $("#description").val()); formData.append("tags", $("#tags").val()); formData.append("submit", $("#submit").val()); - - //let bar = $('.bar'); - + // Upload the information $.ajax({ url: '/api/upload', @@ -37,23 +35,10 @@ function uploadFile(){ contentType: false, processData: false, beforeSend: function() { - //bar.width('0%'); - var percentVal = 0; console.log("Uploading..."); }, - uploadProgress: function(event, position, total, percentComplete) { - //bar.width(percentComplete + '%'); - percentVal = percentComplete; - console.log(percentVal); - }, - complete: function(xhr) { - //bar.width('100%'); - //bar.class += " loading"; - console.log("Upload complete"); - }, success: function (response) { addNotification("File uploaded successfully!", 1); - // popupDissmiss(); // Close popup console.log('File processed successfully'); }, error: function (response) { @@ -75,11 +60,8 @@ function uploadFile(){ addNotification('Error uploading file, blame someone', 2); break; } + console.log('Error uploading file'); }, - always: function (response) { - //bar.class += ""; - console.log("Upload complete"); - } }); // Empty values diff --git a/gallery/templates/image.html b/gallery/templates/image.html index 6507482..80dd57a 100644 --- a/gallery/templates/image.html +++ b/gallery/templates/image.html @@ -60,37 +60,9 @@ {% endif %} -
- {% if image['post_alt'] %} -
- - - - - -
- - - -

Alt

-
-
-

{{ image['post_alt'] }}

-
-
- {% endif %} {% if image['post_description'] %}
@@ -129,13 +101,18 @@ Author - {{ image['author_id'] }} + {{ image['author_username'] }} Upload date {{ image['created_at'] }} +
+ {% for col in image.image_colours %} + + {% endfor %} +
{% for tag in exif %} diff --git a/gallery/templates/layout.html b/gallery/templates/layout.html index fcd3d35..db17bd3 100644 --- a/gallery/templates/layout.html +++ b/gallery/templates/layout.html @@ -6,7 +6,20 @@ Gallery + + + + + + + + + + + + +
@@ -87,12 +100,6 @@
- - {% if g.user %} - - {% else %} - - {% endif %}