lundi 16 mai 2016

How to utilize Bootstrap Ti Ta Toggle Checkbox with Flask

Python/Flask/Bootstrap noob here. I'm trying to build a web-app to control a speaker selector. I'm using bootstrap and Ti-Ta Toggles to beautify the app a bit, but basically it consists of 4-5 checkbox/toggles. Here's what my HTML looks like right now:

<form name="input" action="/" method="post">
                  <div class="row">
                    <div class="col-md-6">
                      <table class="table">
                        <tbody>
                          <tr>
                            <td>Living Room</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-00" type="checkbox" onclick="this.form.submit()" checked><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Kitchen</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-01" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Dining Room</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-02" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Unconnected</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-info">
                                    <label>
                                        <input name="spkrs-03" type="checkbox" onclick="this.form.submit()" disabled><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>
                          <tr>
                            <td>Protection</td>
                            <td>
                                <div class="checkbox checkbox-slider-lg checkbox-slider--a  checkbox-slider-warning">
                                    <label>
                                        <input name="protection" type="checkbox" onclick="this.form.submit()"><span></span>
                                    </label>
                                </div>
                            </td>
                          </tr>

                          </tbody>
                      </table>
                    </div>

So, what I'm trying to figure out is how to handle the POST data from the checkbox inputs in my Python/Flask app. I was trying to do a simple test which looks like the following:

from flask import Flask, request, render_template
import time

app = Flask(__name__)

@app.route('/', methods=['POST','GET'])
def change():
    if request.method == 'POST':
        spkr_00_state = request.args['spkrs-00']
        spkr_01_state = request.args['spkrs-01']
        spkr_02_state = request.args['spkrs-02']
        protection_state = request.args['protection']
        speaker_states = [spkrs_00_state, spkrs_01_state, spkrs_02_state, protection_state]
        return render_template('index.html', speaker_states=speakers_states)
    else:
        return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=80)

However, I get Bad Request messages, etc. So, I'm a bit lost on how this should work. Should I create separate forms for each toggle? Should I put "try" if statements around the request.args?

Aucun commentaire:

Enregistrer un commentaire