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

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

0 голосов
/ 27 июня 2018

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

image

Я думал об использовании wtfforms SubmitField, но я не совсем понимаю, как реализовать это динамическое поведение между моим файлом 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 %}

1 Ответ

0 голосов
/ 27 июня 2018

Вы можете использовать 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>

enter image description here

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

В шаблоне немного изменить 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, однако он демонстрирует, как можно взаимодействовать с бэкэндом при использовании переключателя.

...