added base template, litte styling and upload ui for images
This commit is contained in:
parent
60bd4344ea
commit
f945c858da
|
|
@ -0,0 +1,139 @@
|
|||
# Byte-compiled / optimized / DLL files
|
||||
__pycache__/
|
||||
*.py[cod]
|
||||
*$py.class
|
||||
|
||||
# C extensions
|
||||
*.so
|
||||
|
||||
# Distribution / packaging
|
||||
.Python
|
||||
build/
|
||||
develop-eggs/
|
||||
dist/
|
||||
downloads/
|
||||
eggs/
|
||||
.eggs/
|
||||
lib/
|
||||
lib64/
|
||||
parts/
|
||||
sdist/
|
||||
var/
|
||||
wheels/
|
||||
share/python-wheels/
|
||||
*.egg-info/
|
||||
.installed.cfg
|
||||
*.egg
|
||||
MANIFEST
|
||||
|
||||
# PyInstaller
|
||||
# Usually these files are written by a python script from a template
|
||||
# before PyInstaller builds the exe, so as to inject date/other infos into it.
|
||||
*.manifest
|
||||
*.spec
|
||||
|
||||
# Installer logs
|
||||
pip-log.txt
|
||||
pip-delete-this-directory.txt
|
||||
|
||||
# Unit test / coverage reports
|
||||
htmlcov/
|
||||
.tox/
|
||||
.nox/
|
||||
.coverage
|
||||
.coverage.*
|
||||
.cache
|
||||
nosetests.xml
|
||||
coverage.xml
|
||||
*.cover
|
||||
*.py,cover
|
||||
.hypothesis/
|
||||
.pytest_cache/
|
||||
cover/
|
||||
|
||||
# Translations
|
||||
*.mo
|
||||
*.pot
|
||||
|
||||
# Django stuff:
|
||||
*.log
|
||||
local_settings.py
|
||||
db.sqlite3
|
||||
db.sqlite3-journal
|
||||
|
||||
# Flask stuff:
|
||||
instance/
|
||||
.webassets-cache
|
||||
|
||||
# Scrapy stuff:
|
||||
.scrapy
|
||||
|
||||
# Sphinx documentation
|
||||
docs/_build/
|
||||
|
||||
# PyBuilder
|
||||
.pybuilder/
|
||||
target/
|
||||
|
||||
# Jupyter Notebook
|
||||
.ipynb_checkpoints
|
||||
|
||||
# IPython
|
||||
profile_default/
|
||||
ipython_config.py
|
||||
|
||||
# pyenv
|
||||
# For a library or package, you might want to ignore these files since the code is
|
||||
# intended to run in multiple environments; otherwise, check them in:
|
||||
# .python-version
|
||||
|
||||
# pipenv
|
||||
# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
|
||||
# However, in case of collaboration, if having platform-specific dependencies or dependencies
|
||||
# having no cross-platform support, pipenv may install dependencies that don't work, or not
|
||||
# install all needed dependencies.
|
||||
#Pipfile.lock
|
||||
|
||||
# PEP 582; used by e.g. github.com/David-OConnor/pyflow
|
||||
__pypackages__/
|
||||
|
||||
# Celery stuff
|
||||
celerybeat-schedule
|
||||
celerybeat.pid
|
||||
|
||||
# SageMath parsed files
|
||||
*.sage.py
|
||||
|
||||
# Environments
|
||||
.env
|
||||
.venv
|
||||
env/
|
||||
venv/
|
||||
ENV/
|
||||
env.bak/
|
||||
venv.bak/
|
||||
|
||||
# Spyder project settings
|
||||
.spyderproject
|
||||
.spyproject
|
||||
|
||||
# Rope project settings
|
||||
.ropeproject
|
||||
|
||||
# mkdocs documentation
|
||||
/site
|
||||
|
||||
# mypy
|
||||
.mypy_cache/
|
||||
.dmypy.json
|
||||
dmypy.json
|
||||
|
||||
# Pyre type checker
|
||||
.pyre/
|
||||
|
||||
# pytype static type analyzer
|
||||
.pytype/
|
||||
|
||||
# Cython debug symbols
|
||||
cython_debug/
|
||||
config.py
|
||||
2
app.py
2
app.py
|
|
@ -81,7 +81,7 @@ def test():
|
|||
return render_template('error.html', error=error)
|
||||
content = base64.b64decode(jresp['content']).decode('UTF-8')
|
||||
sha = jresp['sha']
|
||||
return render_template('test.html',content=content,sha=sha,path=path)
|
||||
return render_template('test.html',filecontent=content,sha=sha,path=path)
|
||||
|
||||
@app.route('/update', methods=['POST'])
|
||||
def update():
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
#drop-area {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 20px;
|
||||
width: 480px;
|
||||
font-family: sans-serif;
|
||||
margin: 100px auto;
|
||||
padding: 20px;
|
||||
}
|
||||
#drop-area.highlight {
|
||||
border-color: purple;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
.my-form {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#gallery {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#gallery img {
|
||||
width: 150px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
background: #ccc;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.button:hover {
|
||||
background: #ddd;
|
||||
}
|
||||
#fileElem {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
let dropArea = document.getElementById('drop-area');
|
||||
let filesDone = 0
|
||||
let filesToDo = 0
|
||||
let progressBar = document.getElementById('progress-bar')
|
||||
|
||||
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, preventDefaults, false)
|
||||
})
|
||||
|
||||
function preventDefaults (e) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
;['dragenter', 'dragover'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, highlight, false)
|
||||
})
|
||||
|
||||
;['dragleave', 'drop'].forEach(eventName => {
|
||||
dropArea.addEventListener(eventName, unhighlight, false)
|
||||
})
|
||||
|
||||
function highlight(e) {
|
||||
dropArea.classList.add('highlight')
|
||||
}
|
||||
|
||||
function unhighlight(e) {
|
||||
dropArea.classList.remove('highlight')
|
||||
}
|
||||
|
||||
dropArea.addEventListener('drop', handleDrop, false)
|
||||
|
||||
function handleDrop(e) {
|
||||
let dt = e.dataTransfer
|
||||
let files = dt.files
|
||||
|
||||
handleFiles(files)
|
||||
}
|
||||
|
||||
function handleFiles(files) {
|
||||
files = [...files]
|
||||
initializeProgress(files.length)
|
||||
files.forEach(uploadFile)
|
||||
files.forEach(previewFile)
|
||||
}
|
||||
function uploadFile(file) {
|
||||
let url = 'YOUR URL HERE'
|
||||
let formData = new FormData()
|
||||
|
||||
formData.append('file', file)
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(progressDone) // <- Add `progressDone` call here
|
||||
.catch(() => { /* Error. Inform the user */ })
|
||||
}
|
||||
|
||||
function previewFile(file) {
|
||||
let reader = new FileReader()
|
||||
reader.readAsDataURL(file)
|
||||
reader.onloadend = function() {
|
||||
let fig = document.createElement('figure')
|
||||
fig.id = file.name
|
||||
document.getElementById('gallery').appendChild(fig)
|
||||
let img = document.createElement('img')
|
||||
img.src = reader.result
|
||||
document.getElementById(file.name).appendChild(img)
|
||||
let caption = document.createElement('figcaption')
|
||||
caption.textContent = file.name
|
||||
document.getElementById(file.name).appendChild(caption)
|
||||
}
|
||||
}
|
||||
|
||||
function initializeProgress(numfiles) {
|
||||
progressBar.value = 0
|
||||
filesDone = 0
|
||||
filesToDo = numfiles
|
||||
}
|
||||
|
||||
function progressDone() {
|
||||
filesDone++
|
||||
progressBar.value = filesDone / filesToDo * 100
|
||||
}
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
|
||||
|
||||
<style>
|
||||
pre { max-width: 100%; overflow: scroll; }
|
||||
</style>
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
{% if user %}
|
||||
<div>
|
||||
Logged in as
|
||||
|
|
@ -14,7 +11,4 @@
|
|||
{% else %}
|
||||
<a href="/login">login</a>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
{% block head %}
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
|
||||
|
||||
<!-- jQuery and JS bundle w/ Popper.js -->
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
|
||||
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">{% block content %}{% endblock %}</div>
|
||||
<div id="footer">
|
||||
{% block footer %}
|
||||
© Copyright 2020 by <a href="https://seidlm.at/">Matthias Seidl</a>.
|
||||
{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,13 +1,31 @@
|
|||
<style>
|
||||
pre { max-width: 100%; overflow: scroll; }
|
||||
</style>
|
||||
<form action='/update' method='POST'>
|
||||
<textarea rows = "5" cols = "60" name = "content" id="content">
|
||||
{% if content %}
|
||||
{{ content }}
|
||||
{% endif %}
|
||||
</textarea><br>
|
||||
<input type='hidden' id='sha' name='sha' value="{{ sha }}">
|
||||
<input type='hidden' id='path' name='path' value="{{ path }}">
|
||||
<button type="submit">Update in GIT!!</button>
|
||||
</form>
|
||||
{% extends "layout.html" %}
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<form action='/update' method='POST'>
|
||||
<textarea rows = "30" cols = "120" name = "content" id="content">
|
||||
{% if filecontent %}
|
||||
{{ filecontent }}
|
||||
{% endif %}
|
||||
</textarea><br>
|
||||
<input type='hidden' id='sha' name='sha' value="{{ sha }}">
|
||||
<input type='hidden' id='path' name='path' value="{{ path }}">
|
||||
<button type="submit">Update in GIT!!</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class='col-md'>
|
||||
<div id="drop-area">
|
||||
<form class="my-form">
|
||||
<p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
|
||||
<input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this.files)">
|
||||
<label class="button" for="fileElem">Select some files</label>
|
||||
</form>
|
||||
<progress id="progress-bar" max=100 value=0></progress>
|
||||
<div id="gallery"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="{{ url_for('static',filename='upload.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue