Flask - кнопка переключения с динамической меткой

Я новичок в Flask и хочу создать кнопку включения / выключения на моем веб-сайте. Мне было интересно, если и как это возможно, включая динамический ярлык. Следующая картинка показывает, что я имею в виду:

Я думал об использовании wtfformsSubmitField но я не совсем знаю, как реализовать это динамическое поведение между моим файлом rout.py и моим HTML-шаблоном. Я думал что-то вроде этого:

forms.py:

from flask_wtf import FlaskForm
from wtforms import SubmitField

class PowerSwitchForm(FlaskForm):
    power_switch = SubmitField("ON")

routes.py:

from flask import render_template, flash, redirect, url_for
from app import app
from app.forms import PowerSwitchForm

@app.route('/power', methods=['GET', 'POST'])
def power():
  power_switch = PowerSwitchForm()
  if power_switch.power_switch.label.text == "ON" and power_switch.validate():
    flash("Power has been turned ON")
    power_switch.power_switch.label.text = "OFF"
    return redirect(url_for('power')
  elif power_switch.power_switch.label.text == "OFF" and power_switch.validate():
    flash("Power has been turned OFF")
    power_switch.power_switch.label.text = "ON"
    return redirect(url_for('power')
  return render_template('power.html', form0=power_switch)

power.html:

<!DOCTYPE html>

{% extends "base.html" %}

{% block content %}
<h2>Power switch</h2>
<form action="" method="post" novalidate>
  {{ form0.hidden_tag() }}
  {{ form0.power_switch() }}
</form>    
{% endblock %}
Источник

2 ответа

Ты можешь использовать jquery для обработки желаемой операции при нажатии кнопки переключения. Кроме того, если есть бэкэнд-процесс, который должен выполняться при переключении кнопки, ajax может быть использован. Этот ответ демонстрирует оба. bootstrap-toggle это библиотека, которая обеспечивает простую реализацию переключателя Чтобы использовать, скопируйте header значения тегов ниже:

Простой переключатель, который отображает "переключено" или "отключено": 

<html>
  <body>
    <head>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
      <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
      <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    </head>
    <input type="checkbox" class='toggle' checked data-toggle="toggle">
    <div class='status'>Toggled</div>
  </body>
  <script>
  $(document).ready(function() {
   $('.toggle').click(function() {
      var current_status = $('.status').text();
      if (current_status === 'Untoggled'){
         $('.status').html('Toggled');
      }
      else{
        $('.status').html('Untoggled');
      }

    });
   });
 </script>
</html>

Переключатель, запускающий серверный сценарий как для "переключенного", так и "отключенного":

В шаблоне слегка измените script:

<script>
 $(document).ready(function() {
  $('.toggle').click(function() {
   var current_status = $('.status').text();
   $.ajax({
    url: "/get_toggled_status",
    type: "get",
     data: {status: current_status},
     success: function(response) {
      $(".status").html(response);
     },
     error: function(xhr) {
      //Do Something to handle error
     }
   });
  });
});
</script>

Затем в вашем приложении создайте маршрут /get_toggled_status:

@app.route('/get_toggled_status') 
def toggled_status():
  current_status = flask.request.args.get('status')
  return 'Toggled' if current_status == 'Untoggled' else 'Untoggled'

Этот пример делает то же самое, что и чистый html / jquery Решение, однако, демонстрирует, как с сервером можно обмениваться данными при использовании переключателя.

Источник

Я также новичок в Flask. А вот чистый код Python с флягой, который я пробовал. Похоже, это работает.

в templates / demo.html:

      {% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block content %}
<div class="page-header">
    {{ wtf.quick_form(form) }}
</div>
{% endblock %}

в demo.py:

      from flask              import Flask, render_template, redirect, url_for                          
from flask_bootstrap    import Bootstrap
from flask_wtf          import FlaskForm
from wtforms            import SubmitField

class PowerState(FlaskForm) :
    state = SubmitField('OFF')

app = Flask(__name__)
Bootstrap(app)

app.config['SECRET_KEY'] = 'YOUR SECRET KEY'

@app.route('/', methods=['GET', 'POST'])
def home() :
    form = PowerState()

    if form.validate_on_submit() :
        if form.state.label.text == 'OFF' :
            PowerState.state = SubmitField('ON')
        elif form.state.label.text == 'ON' :
            PowerState.state = SubmitField('OFF')

        return redirect(url_for('home'))
    return render_template('demo.html', form=form)

затем запустите: колба запустить

С уважением, Alex.Wu

Источник
Другие вопросы по тегам