Utilisation de Flask-bootstrap
authorOlivier Tétard <olivier.tetard@miskin.fr>
Thu, 12 Nov 2015 09:16:47 +0000 (10:16 +0100)
committerOlivier Tétard <olivier.tetard@miskin.fr>
Thu, 12 Nov 2015 09:16:47 +0000 (10:16 +0100)
femtoblackweb.py
requirements.txt
templates/404.html
templates/analyze_file.html
templates/index.html
templates/layout.html
templates/testio.html [deleted file]
templates/upload.html

index 2ba0f90..8c0b2bd 100644 (file)
@@ -22,11 +22,14 @@ app.config.update({
     'SECRET_KEY': 'Eheucahduugei3aiyau3kizua%',
     'USERNAME': 'admin',
     'PASSWORD': 'default',
-    'UPLOAD_FOLDER': '/home/bot/flask/uploads',
-    'MAX_CONTENT_LENGTH': 50 * 1024 * 1024
+    'UPLOAD_FOLDER': os.path.join(os.path.dirname(os.path.realpath(__file__)), 'uploads'),
+    'MAX_CONTENT_LENGTH': 50 * 1024 * 1024,
+    'BOOTSTRAP_SERVE_LOCAL': True,
+    'BOOTSTRAP_QUERYSTRING_REVVING': True,
 })
-app.config.from_envvar('FLASKR_SETTINGS', silent=True)
+app.config.from_envvar('FEMTOBLACK_SETTINGS', silent=True)
 
+Bootstrap(app)
 socketio = SocketIO(app)
 
 @app.errorhandler(404)
index 9752b21..005711d 100644 (file)
@@ -1,11 +1,14 @@
 Flask==0.10.1
+Flask-Bootstrap==3.3.5.7
 Flask-SocketIO==1.0
 Jinja2==2.8
 MarkupSafe==0.23
 Werkzeug==0.10.4
+dominate==2.1.16
 eventlet==0.17.4
 greenlet==0.4.9
 itsdangerous==0.24
 python-engineio==0.7.1
 python-socketio==0.6.1
 six==1.10.0
+visitor==0.1.2
index 917df1e..902608e 100644 (file)
@@ -1,6 +1,11 @@
+{# -*- mode: jinja2 -*- #}
 {% extends "layout.html" %}
-{% block title %}Page non existante{% endblock %}
-{% block body %}
+
+{% block femto_title %}Page non existante{% endblock %}
+
+{% block femto_content %}
+
   <p>Cette page est non existante.</p>
   <p><a href="{{ url_for('index') }}">go somewhere nice</a></p>
+
 {% endblock %}
index c0a752e..071d86f 100644 (file)
+{# -*- mode: jinja2 -*- #}
 {% extends "layout.html" %}
-{% block body %}
-<h2>Analyse d’un nouveau fichier son : {{ filename }}</h2>
 
-<div class="sm2-bar-ui flat">
-    <div class="sm2-bar-ui">
+{% block femto_title %}Analyse d’un nouveau fichier son : {{ filename }}{% endblock %}
 
-        <div class="bd sm2-main-controls">
+{% block femto_content %}
 
-            <div class="sm2-inline-texture"></div>
-            <div class="sm2-inline-gradient"></div>
+  <div class="sm2-bar-ui flat">
+    <div class="sm2-bar-ui">
 
-            <div class="sm2-inline-element sm2-button-element">
-                <div class="sm2-button-bd">
-                    <a href="#play" class="sm2-inline-button play-pause">Play / pause</a>
-                </div>
-            </div>
+      <div class="bd sm2-main-controls">
 
-            <div class="sm2-inline-element sm2-inline-status">
+        <div class="sm2-inline-texture"></div>
+        <div class="sm2-inline-gradient"></div>
 
-                <div class="sm2-playlist">
-                    <div class="sm2-playlist-target">
-                        <!-- playlist <ul> + <li> markup will be injected here -->
-                        <!-- if you want default / non-JS content, you can put that here. -->
-                        <noscript><p>JavaScript is required.</p></noscript>
-                    </div>
-                </div>
+        <div class="sm2-inline-element sm2-button-element">
+          <div class="sm2-button-bd">
+            <a href="#play" class="sm2-inline-button play-pause">Play / pause</a>
+          </div>
+        </div>
 
-                <div class="sm2-progress">
-                    <div class="sm2-row">
-                        <div class="sm2-inline-time">0:00</div>
-                        <div class="sm2-progress-bd">
-                            <div class="sm2-progress-track">
-                                <div class="sm2-progress-bar"></div>
-                                <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
-                            </div>
-                        </div>
-                        <div class="sm2-inline-duration">0:00</div>
-                    </div>
-                </div>
+        <div class="sm2-inline-element sm2-inline-status">
 
+          <div class="sm2-playlist">
+            <div class="sm2-playlist-target">
+              <!-- playlist <ul> + <li> markup will be injected here -->
+              <!-- if you want default / non-JS content, you can put that here. -->
+              <noscript><p>JavaScript is required.</p></noscript>
             </div>
-
-            <div class="sm2-inline-element sm2-button-element sm2-volume">
-                <div class="sm2-button-bd">
-                    <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
-                    <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
+          </div>
+
+          <div class="sm2-progress">
+            <div class="sm2-row">
+              <div class="sm2-inline-time">0:00</div>
+              <div class="sm2-progress-bd">
+                <div class="sm2-progress-track">
+                  <div class="sm2-progress-bar"></div>
+                  <div class="sm2-progress-ball"><div class="icon-overlay"></div></div>
                 </div>
+              </div>
+              <div class="sm2-inline-duration">0:00</div>
             </div>
-        </div>
+          </div>
 
-        <div class="bd sm2-playlist-drawer sm2-element">
+        </div>
 
-            <div class="sm2-inline-texture">
-                <div class="sm2-box-shadow"></div>
-            </div>
+        <div class="sm2-inline-element sm2-button-element sm2-volume">
+          <div class="sm2-button-bd">
+            <span class="sm2-inline-button sm2-volume-control volume-shade"></span>
+            <a href="#volume" class="sm2-inline-button sm2-volume-control">volume</a>
+          </div>
+        </div>
+      </div>
 
-            <!-- playlist content is mirrored here -->
-
-            <div class="sm2-playlist-wrapper">
-                
-                <ul class="sm2-playlist-bd">
-                    <li>
-                        <div class="sm2-row">
-                            <div class="sm2-col sm2-wide">
-                                <a href="{{ url_for('download', filename=filename) }}"" class="exclude button-exclude inline-exclude"><b>blabla</b> - blublu </a>
-                            </div>
-                        </div>
-                    </li>                    
-                </ul>
-                
-            </div>
+      <div class="bd sm2-playlist-drawer sm2-element">
 
-            <div class="sm2-extra-controls">
+        <div class="sm2-inline-texture">
+          <div class="sm2-box-shadow"></div>
+        </div>
 
-                <div class="bd">
+        <!-- playlist content is mirrored here -->
 
-                    <div class="sm2-inline-element sm2-button-element">
-                        <a href="#prev" title="Previous" class="sm2-inline-button previous">&lt; previous</a>
-                    </div>
+        <div class="sm2-playlist-wrapper">
 
-                    <div class="sm2-inline-element sm2-button-element">
-                        <a href="#next" title="Next" class="sm2-inline-button next">&gt; next</a>
-                    </div>
+          <ul class="sm2-playlist-bd">
+            <li>
+              <div class="sm2-row">
+                <div class="sm2-col sm2-wide">
+                  <a href="{{ url_for('download', filename=filename) }}" class="exclude button-exclude inline-exclude"><b>blabla</b> - blublu </a>
                 </div>
+              </div>
+            </li>
+          </ul>
+
+        </div>
 
+        <div class="sm2-extra-controls">
+
+          <div class="bd">
+
+            <div class="sm2-inline-element sm2-button-element">
+              <a href="#prev" title="Previous" class="sm2-inline-button previous">&lt; previous</a>
             </div>
 
+            <div class="sm2-inline-element sm2-button-element">
+              <a href="#next" title="Next" class="sm2-inline-button next">&gt; next</a>
+            </div>
+          </div>
+
         </div>
-    </div>    
-</div>
-
-    <script>
-    swf_url = "{{ url_for('static', filename='soundmanager/swf') }}";
-    mp3_url = "{{ url_for('download', filename=filename) }}";
-
-    soundManager.setup({
-        // where to find flash audio SWFs, as needed
-        url: swf_url,
-        onready: function() {
-            var mySound = soundManager.createSound({
-                url: mp3_url,
-            });
-
-            console.log("Play, "+ mp3_url);
-            // ...and play it
-            //mySound.play();            
-        },
-        ontimeout: function() {
-            console.log("Error playing, "+ mp3_url);
-            // Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
-        }
-    });
-</script>
-    
+
+      </div>
+    </div>
+  </div>
+{% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+swf_url = "{{ url_for('static', filename='soundmanager/swf') }}";
+mp3_url = "{{ url_for('download', filename=filename) }}";
+
+soundManager.setup({
+    // where to find flash audio SWFs, as needed
+    url: swf_url,
+    onready: function() {
+        var mySound = soundManager.createSound({
+            url: mp3_url,
+        });
+
+        console.log("Play, "+ mp3_url);
+        // ...and play it
+        //mySound.play();
+    },
+    ontimeout: function() {
+        console.log("Error playing, "+ mp3_url);
+        // Hrmm, SM2 could not start. Missing SWF? Flash blocked? Show an error, etc.?
+    }
+});
+  </script>
 {% endblock %}
index b2be837..065efbe 100644 (file)
@@ -1,8 +1,10 @@
+{# -*- mode: jinja2 -*- #}
 {% extends "layout.html" %}
-{% block body %}
-<h2>Sommaire (très, oui)</h2>
 
-<ul>
-  <li><a href="{{ url_for('upload_file') }}">Analyser un nouveau fichier</a></li>
-</ul>
+{% block femto_title %}Accueil{% endblock %}
+
+{% block femto_content %}
+  <ul>
+    <li><a href="{{ url_for('upload_file') }}">Analyser un nouveau fichier</a></li>
+  </ul>
 {% endblock %}
index 45ea333..d256650 100644 (file)
@@ -1,27 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
+{# -*- mode: jinja2 -*- #}
+{% extends "bootstrap/base.html" %}
+{% block title %}Femtoblackpool{% endblock %}
 
-        <title>Femtoblackpool</title>
+{% block content %}
+  <div class="container">
+    <h1>Femtoblackpool // {% block femto_title %}{% endblock %}{% block femto_main_title %}{% endblock %}</h1>
 
-        <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
-        <link rel="stylesheet" href="{{ url_for('static', filename='soundmanager/demo/bar-ui/css/bar-ui.css') }}" />
-
-        <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
-        
-        <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
-        <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
-        <script src="{{ url_for('static', filename='soundmanager/script/soundmanager2.js') }}"></script>
-        <script src="{{ url_for('static', filename='soundmanager/demo/bar-ui/script/bar-ui.js') }}"></script>
-        <script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
-    </head>
-    <body>
-        <div class="container">
-            <h1><a href="{{ url_for('index') }}">Femtoblack. Pull!</a></h1>
-            {% block body %}{% endblock %}
-        </div>
-    </body>
-</html>
+    {% block femto_content %}{% endblock %}
+  </div>
+{% endblock %}
diff --git a/templates/testio.html b/templates/testio.html
deleted file mode 100644 (file)
index a786038..0000000
+++ /dev/null
@@ -1,88 +0,0 @@
-{% extends "layout.html" %}
-{% block body %}
-
- <form id="emit" method="POST" action='#'>
-        <input type="text" name="emit_data" id="emit_data" placeholder="Message">
-        <input type="submit" value="Echo">
-    </form>
-    <form id="broadcast" method="POST" action='#'>
-        <input type="text" name="broadcast_data" id="broadcast_data" placeholder="Message">
-        <input type="submit" value="Broadcast">
-    </form>
-    <form id="join" method="POST" action='#'>
-        <input type="text" name="join_room" id="join_room" placeholder="Room Name">
-        <input type="submit" value="Join Room">
-    </form>
-    <form id="leave" method="POST" action='#'>
-        <input type="text" name="leave_room" id="leave_room" placeholder="Room Name">
-        <input type="submit" value="Leave Room">
-    </form>
-    <form id="send_room" method="POST" action='#'>
-        <input type="text" name="room_name" id="room_name" placeholder="Room Name">
-        <input type="text" name="room_data" id="room_data" placeholder="Message">
-        <input type="submit" value="Send to Room">
-    </form>
-    <form id="close" method="POST" action="#">
-        <input type="text" name="close_room" id="close_room" placeholder="Room Name">
-        <input type="submit" value="Close Room">
-    </form>
-    <form id="disconnect" method="POST" action="#">
-        <input type="submit" value="Disconnect">
-    </form>
-    <h2>Receive:</h2>
-    <div id="log"></div>
-
-
-
-<script>
-  
-
-  $(document).ready(function(){
-
-namespace = '/test'; // change to an empty string to use the global namespace
-            // the socket.io documentation recommends sending an explicit package upon connection
-            // this is specially important when using the global namespace
-            var socket = io.connect('//' + document.domain + ':' + location.port + namespace);
-            // event handler for server sent data
-            // the data is displayed in the "Received" section of the page
-            socket.on('my response', function(msg) {
-                $('#log').append('<br>Received #' + msg.count + ': ' + msg.data);
-            });
-            // event handler for new connections
-            socket.on('connect', function() {
-                socket.emit('my event', {data: 'I\'m connected!'});
-            });
-            // handlers for the different forms in the page
-            // these send data to the server in a variety of ways
-            $('form#emit').submit(function(event) {
-                socket.emit('my event', {data: $('#emit_data').val()});
-                return false;
-            });
-            $('form#broadcast').submit(function(event) {
-                socket.emit('my broadcast event', {data: $('#broadcast_data').val()});
-                return false;
-            });
-            $('form#join').submit(function(event) {
-                socket.emit('join', {room: $('#join_room').val()});
-                return false;
-            });
-            $('form#leave').submit(function(event) {
-                socket.emit('leave', {room: $('#leave_room').val()});
-                return false;
-            });
-            $('form#send_room').submit(function(event) {
-                socket.emit('my room event', {room: $('#room_name').val(), data: $('#room_data').val()});
-                return false;
-            });
-            $('form#close').submit(function(event) {
-                socket.emit('close room', {room: $('#close_room').val()});
-                return false;
-            });
-            $('form#disconnect').submit(function(event) {
-                socket.emit('disconnect request');
-                return false;
-            });
-        });
-</script>
-
-{% endblock %}
index c004e62..0abdef7 100644 (file)
@@ -1,8 +1,11 @@
+{# -*- mode: jinja2 -*- #}
 {% extends "layout.html" %}
-{% block body %}
-<h2>Analyser un nouveau fichier son</h2>
 
-<form id="form1" enctype="multipart/form-data" method="post" action="">
+{% block femto_title %}Analyser un nouveau fichier son{% endblock %}
+
+{% block femto_content %}
+
+  <form id="form1" enctype="multipart/form-data" method="post" action="">
     <div class="row">
       <label for="fileToUpload">Select a File to Upload</label><br />
       <input type="file" name="file" id="fileToUpload" onchange="fileSelected();"/>
     </div>
 
     <div id="progressNumber"></div>
-</form>
-
-<script>
-    function fileSelected() {
-        var file = document.getElementById('fileToUpload').files[0];
-        if (file) {
-            var fileSize = 0;
-            if (file.size > 1024 * 1024)
-                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
-            else
-                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
-            
-            document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
-            document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
-            document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
-        }
+  </form>
+
+{% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+function fileSelected() {
+    var file = document.getElementById('fileToUpload').files[0];
+    if (file) {
+        var fileSize = 0;
+        if (file.size > 1024 * 1024)
+            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
+        else
+            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
+
+        document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
+        document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
+        document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
     }
+}
 
 function uploadFile() {
     var xhr = new XMLHttpRequest();
     var fd = new FormData(document.getElementById('form1'));
-    
+
     /* event listners */
     xhr.upload.addEventListener("progress", uploadProgress, false);
     xhr.addEventListener("load", uploadComplete, false);
@@ -71,8 +78,7 @@ function uploadFailed(evt) {
 
 function uploadCanceled(evt) {
     alert("The upload has been canceled by the user or the browser dropped the connection.");
-}  
-
-</script>
+}
 
+  </script>
 {% endblock %}