Démelage de spaghettis !
This commit is contained in:
49
templates/ajax.html
Normal file
49
templates/ajax.html
Normal file
@@ -0,0 +1,49 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Ajax{% endblock %}
|
||||
{% block main %}
|
||||
<section class='inline'>
|
||||
<article class='left'>
|
||||
<h3>Get HTML response from AJAX</h3>
|
||||
<p>Click the refresh button to get the HTML response.</p>
|
||||
<p>The response may randomly be a voluntary error so you should try it more than once.</p>
|
||||
Refresh: <input type='button' class='refresh' value=' '
|
||||
onclick='javascript:get_html_from_ajax(document.getElementById("html_container"), "/get_html_from_ajax");'>
|
||||
</article>
|
||||
<article class='right'>
|
||||
<h3>Upload files with AJAX</h3>
|
||||
<p>Select files to upload</p>
|
||||
<p>The response may randomly be a voluntary error so you should try it more than once.</p>
|
||||
Upload files:
|
||||
<div class='file_upload'>
|
||||
<!--
|
||||
Input file is a tricky hack (see tetawebapp.css and tetawebapp.js)
|
||||
-->
|
||||
<input type='button' id='upload_icon_1' class='upload' title='Upload' value=' '/>
|
||||
<input type='file' id='upload_input_1' multiple
|
||||
title='Upload'
|
||||
onchange='javascript:upload_file_from_ajax(this, "/upload", "TETA_ERR");'
|
||||
onmouseover='javascript:lit(document.getElementById("upload_icon_1"));'
|
||||
onmouseout='javascript:unlit(document.getElementById("upload_icon_1"));'/>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<hr/>
|
||||
<article class='right' id='html_container'></article>
|
||||
<hr/>
|
||||
<section class='inline'>
|
||||
<article class='left'>
|
||||
<h3>Set value via AJAX</h3>
|
||||
<p>Send value to the application.</p>
|
||||
<p>If value is empty or is "We Make Porn" (case sensitive), an error is raised.</p>
|
||||
<input type='text' id='value_sender'>
|
||||
<input type='button' value="Try me" onclick='javascript:set_value_from_ajax(document.getElementById("value_sender"), "/set_value_from_ajax", "TETA_ERR");'>
|
||||
</article>
|
||||
<article class='right'>
|
||||
<h3>Get value from AJAX</h3>
|
||||
<p>Get a random value from the application.</p>
|
||||
<p>Randomly raises a voluntary error so you should try it more than once.</p>
|
||||
<input type='text' id='value_receiver'>
|
||||
<input type='button' value="Try me" onclick='javascript:get_value_from_ajax(document.getElementById("value_receiver"), "/get_value_from_ajax", "TETA_ERR");'>
|
||||
</article>
|
||||
</section>
|
||||
{% endblock %}
|
||||
24
templates/ajax_html.html
Normal file
24
templates/ajax_html.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<h3>This is the title</h3>
|
||||
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
<p>This <a href='/plop.html'>link</a> will lead to an error page</p>
|
||||
<p>
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia desers unt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
12
templates/articles.html
Normal file
12
templates/articles.html
Normal file
@@ -0,0 +1,12 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Articles{% endblock %}
|
||||
{% block main %}
|
||||
<article>
|
||||
<h3>Choose your article</h3>
|
||||
<p>
|
||||
Please select your article
|
||||
</p>
|
||||
</article>
|
||||
<article id='article_receiver'>
|
||||
</article>
|
||||
{% endblock %}
|
||||
65
templates/articles_by_id.html
Normal file
65
templates/articles_by_id.html
Normal file
@@ -0,0 +1,65 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Articles{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>Article #{{ ID }}</h3>
|
||||
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
<p>This <a href='/plop.html'>link</a> will lead to an error page</p>
|
||||
<p>
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia desers unt mollit anim id est laborum.
|
||||
</p>
|
||||
<ul>
|
||||
<li>plop</li>
|
||||
<li>plap</li>
|
||||
<li>plip</li>
|
||||
</ul>
|
||||
<ol>
|
||||
<li>plop</li>
|
||||
<li>plap</li>
|
||||
<li>plip</li>
|
||||
</ol>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</article>
|
||||
<article class='left'>
|
||||
<h3>Another disposition</h3>
|
||||
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore
|
||||
</p>
|
||||
<p>
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
|
||||
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
||||
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
|
||||
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
|
||||
officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</article>
|
||||
{% endblock %}
|
||||
68
templates/basics.html
Normal file
68
templates/basics.html
Normal file
@@ -0,0 +1,68 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Basics{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>Basics</h3>
|
||||
<p>
|
||||
Thanks to <a href='http://flask.pocoo.org/'>Python/Flask</a> with <strong>TetaWebApp</strong> most of the output things come to life via
|
||||
<a href='http://jinja.pocoo.org/docs/2.10/'>Jinja2 HTML templates</a>
|
||||
and is 100% <strong title='Bulshit inside'>HTML5 ready©</strong>.
|
||||
</p>
|
||||
<p>
|
||||
Colors and fonts are managed from separated CSS files letting you easily
|
||||
change the default theme to your favorite colors and icon set.
|
||||
</p>
|
||||
<pre>
|
||||
/*
|
||||
* Here are the font definitions.
|
||||
* You can modify it or create your own and make it loaded
|
||||
* after this one in the HTML header section of the index.html
|
||||
* template file.
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto Condensed";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: var(--font-normal);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto Condensed";
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: var(--font-bold);
|
||||
}
|
||||
</pre>
|
||||
<pre>
|
||||
/*
|
||||
* Here are the base color scheme and icon set.
|
||||
* You can modify it or create your own using the same variables
|
||||
* and make it loaded after this one but before the fonts.css in
|
||||
* the HTML header section of the index.html template file.
|
||||
*/
|
||||
:root {
|
||||
--coloured-bg: #FF5D00;
|
||||
--light-coloured-bg: #FFB387;
|
||||
--clear-bg: #E5E5E5;
|
||||
--mid-bg: #BBBBBB;
|
||||
--dark-bg: #2B2B2B;
|
||||
--dark-border: #888888;
|
||||
--text-color: #555555;
|
||||
--white: #FFFFFF;
|
||||
--black: #000000;
|
||||
--font-normal: url("/static/fonts/RobotoCondensed-Regular.ttf") format("truetype");
|
||||
--font-bold: url("/static/fonts/RobotoCondensed-Bold.ttf") format("truetype");
|
||||
--banner-logo: url(/static/images/logo.png);
|
||||
--add_icon: url(/static/images/add.png);
|
||||
--edit_icon: url(/static/images/edit.png);
|
||||
--login_icon: url(/static/images/login.png);
|
||||
--logout_icon: url(/static/images/logout.png);
|
||||
--refresh_icon: url(/static/images/refresh.png);
|
||||
--save_icon: url(/static/images/save.png);
|
||||
--search_icon: url(/static/images/search.png);
|
||||
--trash_icon: url(/static/images/trash.png);
|
||||
}
|
||||
</pre>
|
||||
</article>
|
||||
{% endblock %}
|
||||
12
templates/database.html
Normal file
12
templates/database.html
Normal file
@@ -0,0 +1,12 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Database{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>Accessing database</h3>
|
||||
<p>
|
||||
Even if using <a href='http://flask-sqlalchemy.pocoo.org/2.3/'>Flask-SQLAlchemy</a> to retrieve data
|
||||
stored in <strong>Postgres</strong> databases is the recommended way to use <strong>TetaWebApp</strong>,
|
||||
you're free to use the database connector that suits your need.
|
||||
</p>
|
||||
</article>
|
||||
{% endblock %}
|
||||
15
templates/error.html
Normal file
15
templates/error.html
Normal file
@@ -0,0 +1,15 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Erreur{% endblock %}
|
||||
{% block nav %}{% endblock %}
|
||||
{% block main %}
|
||||
<article class='error'>
|
||||
<h3>404 - Not found</h3>
|
||||
<p>The page you asked for was not found on this server.<br/>
|
||||
It may has been lost, it may has never existed.<br/>
|
||||
Maybe we don't care at all...</p>
|
||||
<p>
|
||||
<input type='button' value='Get me back to business' onclick='javascript:document.location="/";'/>
|
||||
</p>
|
||||
<img src='/static/images/404.png' alt='404 - Not found' title='404 - Not found'/>
|
||||
</article>
|
||||
{% endblock %}
|
||||
106
templates/index.html
Normal file
106
templates/index.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang='zxx'>
|
||||
<head>
|
||||
<title>TetaWebApp - {% block title %}Accueil{% endblock %}</title>
|
||||
<meta name="viewport" content="initial-scale=1.0" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/colors.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/fonts.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/styles/tetawebapp.css" />
|
||||
<link rel="icon" type="image/png" href="/static/images/favicon.png" />
|
||||
<script src="/static/scripts/tetawebapp.js"></script>
|
||||
</head>
|
||||
{% block bodyheader %}
|
||||
<body>
|
||||
{% endblock %}
|
||||
<header>{% block banner %}TetaWebApp{% endblock %}</header>
|
||||
<div class='content'>
|
||||
{% block nav %}
|
||||
<nav class='vertical'>
|
||||
{% block menu %}
|
||||
{% for item in menu %}
|
||||
{% for key in item[1] %}
|
||||
{% if item[2] == 1 %}
|
||||
<a class='selected' href='{{ key }}'>{{ item[0] }}</a>
|
||||
{% else %}
|
||||
<a href='{{ key }}'>{{ item[0] }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
</nav>
|
||||
{% endblock%}
|
||||
<main>
|
||||
{% if navbar %}
|
||||
<div class='navbar_container'>
|
||||
<ul class='horizontal'>
|
||||
{% for item in navbar %}
|
||||
{% set selected = ['', 'selected'] %}
|
||||
{% set last = ['right_border', 'last'] %}
|
||||
{% for url in item[1] %}
|
||||
<li><a class='{{ last[item[3]] }} {{ selected[item[2]] }}' href='{{ url }}'>{{ item[0] }}</a></li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>TetaWebApp demo</h3>
|
||||
<p>
|
||||
Welcome to the <strong>TetaWebApp</strong> demo
|
||||
</p>
|
||||
<p>
|
||||
TetaWebApp is a basic web application template based on <a href='http://flask.pocoo.org/'>Python/Flask</a>
|
||||
and <a href='https://www.w3schools.com/js/js_ajax_intro.asp'>AJAX</a> made by
|
||||
<a href='mailto:doug.letough@free.fr'>Doug Le Tough</a> from <a href='https://www.tetalab.org'>Tetalab</a>.
|
||||
</p>
|
||||
<p>
|
||||
The goal of this project is to provide a basic framework to make any web application you need while
|
||||
letting you complete freedom on how to use or extend it <strong>without</strong> using any Google,
|
||||
Bootstrap or any other piece of <strong>shitty free spyware</strong>.
|
||||
</p>
|
||||
TetaWebApp will <strong>never</strong> download or upload anything in any way.
|
||||
<p>
|
||||
</p>
|
||||
<p>There is <strong>no</strong> limitation, you can use all or only parts of <strong>TetaWebApp</strong>
|
||||
and you can <strong title='bullshit inside'>virtually</strong> do any app you want with TetaWebApp.
|
||||
</p>
|
||||
<p>
|
||||
But be sure that freedom has a cost: You <strong>will</strong> need work to make it work ;-)
|
||||
</p>
|
||||
<p>
|
||||
<strong>TetaWebApp</strong> is released under the only real <strong>free</strong> license: The
|
||||
<a href='http://www.wtfpl.net/'><img src='http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-2.png'
|
||||
title='WTFPL' alt='WTFPL' /></a>.
|
||||
</p>
|
||||
<pre>
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
Version 2, December 2004
|
||||
|
||||
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
|
||||
|
||||
Everyone is permitted to copy and distribute verbatim or modified
|
||||
copies of this license document, and changing it is allowed as long
|
||||
as the name is changed.
|
||||
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. You just DO WHAT THE FUCK YOU WANT TO.
|
||||
</pre>
|
||||
<p>
|
||||
Get a copy of <strong>TetaWebApp</strong>:<br/>
|
||||
<pre>
|
||||
git clone git://git.tetalab.org/tetalab/tetawebapp
|
||||
</pre>
|
||||
</p>
|
||||
</article>
|
||||
{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
{% block footer %}
|
||||
<footer>© - Tetalab - Le hacker space Toulousaing' putaing' cong' -</footer>
|
||||
{% endblock%}
|
||||
</body>
|
||||
</html>
|
||||
53
templates/inputs.html
Normal file
53
templates/inputs.html
Normal file
@@ -0,0 +1,53 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Inputs{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>The input collection</h3>
|
||||
<p>
|
||||
Have a look to the input collection:
|
||||
</p>
|
||||
<input type='text'/>
|
||||
<button>Click me</button>
|
||||
<br/>
|
||||
<textarea cols='25'></textarea>
|
||||
<br/>
|
||||
<select>
|
||||
{% for item in menu %}
|
||||
<option>{{ item[0] }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type='submit' value='Click me too'/>
|
||||
<br/>
|
||||
<input type='button' value='And me !' />
|
||||
<br/>
|
||||
<input type='button' class='add' title='Add' value=' '/>
|
||||
<input type='button' class='edit' title='Edit' value=' '/>
|
||||
<input type='button' class='login' title='Login' value=' '/>
|
||||
<input type='button' class='logout' title='Logout' value=' ' onclick='javascript:logout();'/>
|
||||
<input type='button' class='refresh' title='Refresh' value=' '/>
|
||||
<input type='button' class='save' title='Save' value=' '/>
|
||||
<input type='button' class='search' title='Search' value=' '/>
|
||||
<input type='button' class='trash' title='Trash' value=' '/>
|
||||
<!--
|
||||
Input file is a tricky hack (see tetawebapp.css and tetawebapp.js)
|
||||
-->
|
||||
<div class='file_upload'>
|
||||
<input type='button' id='upload_icon_1' class='upload' title='Upload' value=' '/>
|
||||
<input type='file' id='upload_input_1' name='files' multiple
|
||||
title='Upload'
|
||||
onchange='javascript:upload_file_from_ajax(this, "/upload", "TETA_ERR");'
|
||||
onmouseover='javascript:lit(document.getElementById("upload_icon_1"));'
|
||||
onmouseout='javascript:unlit(document.getElementById("upload_icon_1"));'/>
|
||||
</div>
|
||||
<br/>
|
||||
<pre>
|
||||
#!/bin/sh
|
||||
# This is code sample
|
||||
while [ 1 ]
|
||||
do
|
||||
echo "Tits or GTFO !"
|
||||
sleep .1
|
||||
done
|
||||
</pre>
|
||||
</article>
|
||||
{% endblock %}
|
||||
23
templates/login.html
Normal file
23
templates/login.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Login{% endblock %}
|
||||
{% block nav %}{% endblock %}
|
||||
{% block main %}
|
||||
<article class='login'>
|
||||
<h3>Login</h3>
|
||||
<p>The demo login is:</p>
|
||||
<ul>
|
||||
<li>Login: demo</li>
|
||||
<li>Password: demo</li>
|
||||
</ul>
|
||||
</article>
|
||||
{% if message != '' %}
|
||||
<pre>{{ message }}</pre>
|
||||
{% endif %}
|
||||
<article class='left'>
|
||||
<form method='POST' action='/login'>
|
||||
Login: <input id='login' name='login' type='text' />
|
||||
Password: <input id='password' name='password' type='password' />
|
||||
<input type='submit' value='Log me in' onclick='javascript:return verify_login();'>
|
||||
</form>
|
||||
</article>
|
||||
{% endblock %}
|
||||
18
templates/todo.html
Normal file
18
templates/todo.html
Normal file
@@ -0,0 +1,18 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}TODO{% endblock %}
|
||||
{% block main %}
|
||||
<article class='right'>
|
||||
<h3>TODO list</h3>
|
||||
<ul>
|
||||
<li><strike>Basic menu management</strike></li>
|
||||
<li>Installation wizard</li>
|
||||
<li>Back office for basic content management</li>
|
||||
<li><strike>Basic Ajax support</strike></li>
|
||||
<li><strike>Session management</strike></li>
|
||||
<li>File upload</li>
|
||||
<li>Basic documentation</li>
|
||||
<li><strike>Horizontal navbar</strike></li>
|
||||
<li><strike>License</strike></li>
|
||||
</ul>
|
||||
</article>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user