Update to reccommended file structure

Use reccommended database structure
Switch to SQLite and update scheme along with it
This commit is contained in:
Michał Gdula 2023-01-10 12:39:29 +00:00
parent 29d204f95e
commit a499e6c840
41 changed files with 544 additions and 342 deletions

View file

@ -0,0 +1,24 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app">
<h1>Login</h1>
<div id="login" class="login">
<form method="post">
<label for="username">Username</label>
<input name="username" id="username" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<input type="submit" value="Log In">
</form>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
</div>
</div>
{% endblock %}

View file

@ -0,0 +1,24 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app">
<h1>register</h1>
<div id="register" class="register">
<form method="post">
<label for="username">Username</label>
<input name="username" id="username" required>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
<input type="submit" value="Register">
</form>
{% for message in get_flashed_messages() %}
<div class="flash">{{ message }}</div>
{% endfor %}
</div>
</div>
{% endblock %}

View file

@ -0,0 +1,12 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app err-warning">
<h1>{{error}}</h1>
<p>{{msg}}</p>
</div>
{% endblock %}

View file

@ -0,0 +1,12 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app">
<h1>Image Group</h1>
<p>{{group_id}}</p>
</div>
{% endblock %}

View file

@ -0,0 +1,17 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app">
<div class="image__container">
<img class="image__item" src="/uploads/original/{{ fileName }}" onload="imgFade(this)" style="display:none;"/>
</div>
<div class="image__info">
<h2>{{ fileName }}</h2>
<p>{{ id }}</p>
</div>
</div>
{% endblock %}

View file

@ -0,0 +1,55 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app">
<h1>Gallery</h1>
<div id="gallery" class="gallery"></div>
</div>
<script>
let imageList = [];
let imageIndex = 0;
function loadMore(startIndex, amount = 20) {
for (let i = startIndex; i < startIndex + amount; i++) {
if (i < imageList.length) {
loadImg(imageList[i][0], imageList[i][1]);
}
}
imageIndex = startIndex + amount;
}
function loadImg(id, fileName) {
var imgDiv = `
<a class="gallery__item" href="/image/${id}">
<div class="gallery__item-info">
<p>${id}</p>\
<h2>${fileName}</h2>
</div>
<span class="gallery__item-filter"></span>
<img class="gallery__item-image" src="https://supersecreteuploadtest.leggy.dev/usr/images/${fileName}" onload="imgFade(this)" style="display:none;">
</a>
`;
$(imgDiv).hide().appendTo('#gallery').fadeIn(250);
}
$.ajax({
url: '/fileList/original',
type: 'get',
success: function(response) {
imageList = response;
loadMore(0, 30);
}
});
$(window).scroll(function() {
if ($(window).height() + $(window).scrollTop() >= $(document).height() - 500) {
loadMore(imageIndex);
}
});
</script>
{% endblock %}

View file

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<link rel="stylesheet" href="{{url_for('static', filename='theme/style.css')}}" defer>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
</head>
<body>
<nav id="navRoot">
<div>
<a href="{{url_for('index')}}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor">
<path d="M2 8v10h12V8H2zm2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-2v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2zm2 0h8a2 2 0 0 1 2 2v4h2V2H6v4zm0 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path><path d="M7 6a3 3 0 1 1 6 0h-2a1 1 0 0 0-2 0H7zm1.864 13.518l2.725-4.672a1 1 0 0 1 1.6-.174l1.087 1.184 1.473-1.354-1.088-1.183a3 3 0 0 0-4.8.52L7.136 18.51l1.728 1.007zm6.512-12.969a2.994 2.994 0 0 1 3.285.77l1.088 1.183-1.473 1.354-1.087-1.184A1 1 0 0 0 16 8.457V8c0-.571-.24-1.087-.624-1.451z"></path>
</svg>
<span>Home</span>
</a>
<a href="{{url_for('group')}}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="24" fill="currentColor">
<path d="M17 4H9.415l-.471-1.334A1.001 1.001 0 0 0 8 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm-6.17-2H17a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h5c1.306 0 2.417.835 2.83 2z"></path>
</svg>
<span>Groups</span>
</a>
<a href="{{url_for('upload')}}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" width="24" fill="currentColor">
<path d="M8 3.414v5.642a1 1 0 1 1-2 0V3.414L4.879 4.536A1 1 0 0 1 3.464 3.12L6.293.293a1 1 0 0 1 1.414 0l2.829 2.828A1 1 0 1 1 9.12 4.536L8 3.414zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
</svg>
<span>Upload</span>
</a>
</div>
<div>
<a href="{{url_for('profile')}}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="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-14a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V8a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V8a2 2 0 0 0-2-2zM5.91 16.876a8.033 8.033 0 0 1-1.58-1.232 5.57 5.57 0 0 1 2.204-1.574 1 1 0 1 1 .733 1.86c-.532.21-.993.538-1.358.946zm8.144.022a3.652 3.652 0 0 0-1.41-.964 1 1 0 1 1 .712-1.868 5.65 5.65 0 0 1 2.284 1.607 8.032 8.032 0 0 1-1.586 1.225z"></path>
</svg>
<span>Profile</span>
</a>
<a href="{{url_for('settings')}}">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -2 24 24" width="24" fill="currentColor">
<path d="M9.815 3.094a3.467 3.467 0 0 1-2.78-1.09l-.084-.001a3.467 3.467 0 0 1-2.781 1.09 3.477 3.477 0 0 1-1.727 2.51 3.471 3.471 0 0 1 0 2.794 3.477 3.477 0 0 1 1.727 2.51 3.467 3.467 0 0 1 2.78 1.09h.084a3.467 3.467 0 0 1 2.78-1.09 3.477 3.477 0 0 1 1.727-2.51 3.471 3.471 0 0 1 0-2.794 3.477 3.477 0 0 1-1.726-2.51zM14 5.714a1.474 1.474 0 0 0 0 2.572l-.502 1.684a1.473 1.473 0 0 0-1.553 2.14l-1.443 1.122A1.473 1.473 0 0 0 8.143 14l-2.304-.006a1.473 1.473 0 0 0-2.352-.765l-1.442-1.131A1.473 1.473 0 0 0 .5 9.968L0 8.278a1.474 1.474 0 0 0 0-2.555l.5-1.69a1.473 1.473 0 0 0 1.545-2.13L3.487.77A1.473 1.473 0 0 0 5.84.005L8.143 0a1.473 1.473 0 0 0 2.358.768l1.444 1.122a1.473 1.473 0 0 0 1.553 2.14L14 5.714zm-5.812 9.198a7.943 7.943 0 0 0 2.342-.73 3.468 3.468 0 0 1-.087.215 3.477 3.477 0 0 1 1.727 2.51 3.467 3.467 0 0 1 2.78 1.09h.084a3.467 3.467 0 0 1 2.78-1.09 3.477 3.477 0 0 1 1.727-2.51 3.471 3.471 0 0 1 0-2.794 3.477 3.477 0 0 1-1.726-2.51 3.467 3.467 0 0 1-2.78-1.09h-.084l-.015.016a8.077 8.077 0 0 0 .002-2.016L16.144 6a1.473 1.473 0 0 0 2.358.768l1.444 1.122a1.473 1.473 0 0 0 1.553 2.14L22 11.714a1.474 1.474 0 0 0 0 2.572l-.502 1.684a1.473 1.473 0 0 0-1.553 2.14l-1.443 1.122a1.473 1.473 0 0 0-2.359.768l-2.304-.006a1.473 1.473 0 0 0-2.352-.765l-1.442-1.131a1.473 1.473 0 0 0-1.545-2.13l-.312-1.056zM7 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm8 8a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</svg>
<span>Settings</span>
</a>
</div>
</nav>
<main>
<header>
{% block header %}{% endblock %}
<span></span>
</header>
{% block content %}
{% endblock %}
<i class="ph-arrow-circle-up" id="topButton"></i>
</main>
<script>
let navToggle = true;
document.onscroll = function() {
document.querySelector('header').style.opacity = `${1 - window.scrollY / 169}`;
document.querySelector('header img').style.cssText = `object-position: center ${window.scrollY / 2}px`;
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
document.querySelector('#topButton').style.opacity = 1;
document.querySelector('#topButton').style.right = "0.75rem";
} else {
document.querySelector('#topButton').style.opacity = 0;
document.querySelector('#topButton').style.right = "-3rem";
}
}
document.querySelector('#topButton').onclick = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function imgFade(obj) {
$(obj).fadeIn(621);
}
</script>
</body>
</html>

View file

@ -0,0 +1,22 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app">
<h1>User</h1>
<p>{{user_id}}</p>
<ul>
{% if g.user %}
<li><span>{{ g.user['username'] }}</span>
<li><a href="{{ url_for('auth.logout') }}">Log Out</a>
{% else %}
<li><a href="{{ url_for('auth.register') }}">Register</a>
<li><a href="{{ url_for('auth.login') }}">Log In</a>
{% endif %}
</ul>
</div>
{% endblock %}

View file

@ -0,0 +1,11 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app">
<h1>Settings</h1>
</div>
{% endblock %}

View file

@ -0,0 +1,100 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}
<div class="app">
<h1>Upload!!!!!</h1>
<div id="upload" class="upload">
<form method="post" enctype="multipart/form-data" id="uploadForm" style="display: flex;flex-direction: column;gap: 1rem;">
<label>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" width="24" fill="currentColor">
<path d="M8 3.414v5.642a1 1 0 1 1-2 0V3.414L4.879 4.536A1 1 0 0 1 3.464 3.12L6.293.293a1 1 0 0 1 1.414 0l2.829 2.828A1 1 0 1 1 9.12 4.536L8 3.414zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
</svg>
<input type="file" name="file" id="file" class="input-file"/>
</label>
<label>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" width="24" fill="currentColor">
<path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</svg>
<input type="text" name="alt" placeholder="alt" id="alt"/>
</label>
<label>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" width="24" fill="currentColor">
<path d="M5.72 14.456l1.761-.508 10.603-10.73a.456.456 0 0 0-.003-.64l-.635-.642a.443.443 0 0 0-.632-.003L6.239 12.635l-.52 1.82zM18.703.664l.635.643c.876.887.884 2.318.016 3.196L8.428 15.561l-3.764 1.084a.901.901 0 0 1-1.11-.623.915.915 0 0 1-.002-.506l1.095-3.84L15.544.647a2.215 2.215 0 0 1 3.159.016zM7.184 1.817c.496 0 .898.407.898.909a.903.903 0 0 1-.898.909H3.592c-.992 0-1.796.814-1.796 1.817v10.906c0 1.004.804 1.818 1.796 1.818h10.776c.992 0 1.797-.814 1.797-1.818v-3.635c0-.502.402-.909.898-.909s.898.407.898.91v3.634c0 2.008-1.609 3.636-3.593 3.636H3.592C1.608 19.994 0 18.366 0 16.358V5.452c0-2.007 1.608-3.635 3.592-3.635h3.592z"></path>
</svg>
<input type="text" name="description" placeholder="description" id="description"/>
</label>
<label>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -3 24 24" width="24" fill="currentColor">
<path d="M11.586 15.071L13 13.657l1.414 1.414 6.165-6.165 1.09-3.552-2.484-2.483-1.079.336-1.598-1.598L18.591.96a2 2 0 0 1 2.008.496l2.483 2.483a2 2 0 0 1 .498 2L22.345 9.97l-7.93 7.93-2.83-2.828zM14.236.75l2.482 2.483a2 2 0 0 1 .498 2l-1.235 4.028-7.93 7.931-7.78-7.778L8.17 1.516 12.227.254a2 2 0 0 1 2.008.496zM3.1 9.414l4.95 4.95 6.164-6.165 1.09-3.552-2.484-2.483-3.585 1.115L3.1 9.414zm7.424-2.475a1.5 1.5 0 1 1 2.121-2.121 1.5 1.5 0 0 1-2.12 2.121zm6.886 1.022l.782-2.878c.45.152.755.325.917.518a1.5 1.5 0 0 1-.185 2.113c-.29.244-.795.326-1.514.247z"></path>
</svg>
<input type="text" name="tags" placeholder="tags" id="tags"/>
</label>
<label>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="24" fill="currentColor">
<path d="M10.83 2H17a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3h5c1.306 0 2.417.835 2.83 2zM17 4H9.415l-.471-1.334A1.001 1.001 0 0 0 8 2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path><path d="M1 5h18v2H1z"></path>
</svg>
<span>group1</span>
<input type="checkbox" name="group" placeholder="group"/>
<span>group2</span>
<input type="checkbox" name="group" placeholder="group"/>
<span>group3</span>
<input type="checkbox" name="group" placeholder="group"/>
<span>group4</span>
<input type="checkbox" name="group" placeholder="group"/>
</label>
<input type="submit" value="Upload" name="submit" id="submit"/>
</form>
</div>
</div>
<script>
$("#uploadForm").submit(function(event) {
// AJAX takes control of subby form
event.preventDefault();
// Check for empty upload
if ($("#file").val() === "") {
alert('Gwha! Pls provide image');
} else {
// Make form
var formData = new FormData();
formData.append("file", $("#file").prop("files")[0]);
formData.append("alt", $("#alt").val());
formData.append("description", $("#description").val());
formData.append("tags", $("#tags").val());
formData.append("submit", $("#submit").val());
// Upload the information
$.ajax({
url: '/upload/form',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function (response) {
alert(response)
}
});
// Empty values
$("#image").val("");
$("#alt").val("");
$("#description").val("");
$("#tags").val("");
$("#submit").val("");
}
});
</script>
{% endblock %}