tetalab/tetawebapp
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

"Initial commit"

Browse Source
This commit is contained in:
Doug Le Tough
2018-02-26 10:16:29 +01:00
parent b745381002
commit c450687586
39 changed files with 1473 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
participer.thsf.net/templates/ajax.html Normal file
View 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
participer.thsf.net/templates/ajax_html.html Normal file
View 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
participer.thsf.net/templates/articles.html Normal file
View 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
participer.thsf.net/templates/articles_by_id.html Normal file
View 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
participer.thsf.net/templates/basics.html Normal file
View 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
participer.thsf.net/templates/database.html Normal file
View 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
participer.thsf.net/templates/error.html Normal file
View 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
participer.thsf.net/templates/index.html Normal file
View 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
participer.thsf.net/templates/inputs.html Normal file
View 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
participer.thsf.net/templates/login.html Normal file
View 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
participer.thsf.net/templates/todo.html Normal file
View 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 %}