I with push my head through a conrete wall

I hate Joins
This commit is contained in:
Michał Gdula 2023-03-05 18:16:28 +00:00
parent 0a27d79a82
commit 91278e2d11
10 changed files with 180 additions and 187 deletions

View file

@ -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()

View file

@ -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)

View file

@ -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 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" fill="currentColor">\
<path d="M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z"></path>\
</svg>';
break;
case 2:
div.classList.add('sniffle__notification--error');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" fill="currentColor">\
<path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path>\
</svg>';
break;
case 3:
div.classList.add('sniffle__notification--warning');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -3 24 24" fill="currentColor">\
<path d="M12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.213 3.213 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096zm-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.12 1.12 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1z"></path>\
</svg>';
break;
default:
div.classList.add('sniffle__notification--info');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">\
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>\
</svg>';
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 += '<button class="pop-up__btn pop-up__btn-fill" onclick="popupDissmiss()">Nooooooo</button>';
// 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();
}
}
});

View file

@ -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 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" fill="currentColor">\
<path d="M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z"></path>\
</svg>';
break;
case 2:
div.classList.add('sniffle__notification--error');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" fill="currentColor">\
<path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path>\
</svg>';
break;
case 3:
div.classList.add('sniffle__notification--warning');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -3 24 24" fill="currentColor">\
<path d="M12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.213 3.213 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096zm-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.12 1.12 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1z"></path>\
</svg>';
break;
default:
div.classList.add('sniffle__notification--info');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">\
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>\
</svg>';
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);
}

View file

@ -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 += '<button class="pop-up__btn pop-up__btn-fill" onclick="popupDissmiss()">Nooooooo</button>';
// 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();
}
}
});

View file

@ -27,8 +27,6 @@ function uploadFile(){
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

View file

@ -60,37 +60,9 @@
</button>
</div>
{% endif %}
<!--
<div>
<button class="tool-btn" id="img-info">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</svg>
<span class="tool-tip">Info</span>
</button>
</div>
-->
</div>
<div class="image-info__container">
{% if image['post_alt'] %}
<div class="image-info">
<span class="image-info__collapse" id="collapse-info">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
</svg>
</span>
<div class="image-info__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2.5 24 24" fill="currentColor">
<path d="M3.656 17.979A1 1 0 0 1 2 17.243V15a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8.003l-4.347 2.979zm.844-3.093a.536.536 0 0 0 .26-.069l2.355-1.638A1 1 0 0 1 7.686 13H12a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5c0 .54.429.982 1 1 .41.016.707.083.844.226.128.134.135.36.156.79.003.063.003.177 0 .37a.5.5 0 0 0 .5.5z"></path><path d="M16 10.017a7.136 7.136 0 0 0 0 .369v-.37c.02-.43.028-.656.156-.79.137-.143.434-.21.844-.226.571-.018 1-.46 1-1V3a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1H5V2a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2v2.243a1 1 0 0 1-1.656.736L16 13.743v-3.726z"></path>
</svg>
<h2>Alt</h2>
</div>
<div class="image-info__content">
<p>{{ image['post_alt'] }}</p>
</div>
</div>
{% endif %}
{% if image['post_description'] %}
<div class="image-info">
<span class="image-info__collapse" id="collapse-info">
@ -129,13 +101,18 @@
</tr>
<tr>
<td>Author</td>
<td>{{ image['author_id'] }}</td>
<td>{{ image['author_username'] }}</td>
</tr>
<tr>
<td>Upload date</td>
<td><span class="time">{{ image['created_at'] }}</span></td>
</tr>
</table>
<div class="img-colours">
{% for col in image.image_colours %}
<span style="background-color: rgb({{col[0]}}, {{col[1]}}, {{col[2]}})"></span>
{% endfor %}
</div>
</div>
</div>
{% for tag in exif %}

View file

@ -6,7 +6,20 @@
<title>Gallery</title>
<link rel="icon" href="{{url_for('static', filename='images/icon.png')}}">
<link rel="stylesheet" href="{{url_for('static', filename='theme/style.css')}}" defer>
<!-- Jquery for AJAX -->
<script src="{{url_for('static', filename='js/jquery-3.6.3.min.js')}}"></script>
<!-- Main Script -->
<script src="{{ url_for('static', filename='js/main.js') }}" defer></script>
<!-- Login and Upload -->
<script src="{{ url_for('static', filename='js/upload.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/login.js') }}" defer></script>
<!-- UI -->
<script src="{{ url_for('static', filename='js/ui/popup.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/ui/notifications.js') }}" defer></script>
</head>
<body>
<div class="wrapper">
@ -87,12 +100,6 @@
</div>
</div>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% if g.user %}
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
{% else %}
<script src="{{ url_for('static', filename='js/login.js') }}"></script>
{% endif %}
<script>
{% for message in get_flashed_messages() %}
// Show notifications on page load

View file

@ -256,6 +256,28 @@
tr:last-of-type td
padding-bottom: 0
.img-colours
margin: 0
padding: 0
width: 100%
display: flex
gap: 0.5rem
span
margin: 0
padding: 0
width: 100%
height: 2rem
display: flex
justify-content: center
align-items: center
border-radius: $rad
.image-info__collapsed
height: 2.5rem