apps/tools/app_generator/templates/index.html

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

{% macro form_field(field,
                    form_type="basic",
                    horizontal_columns=('lg', 2, 10),
                    button_map={}) %}
{% if field.widget.input_type == 'checkbox' %}
    <div class="checkbox">
      <label>
        {{field()|safe}} {{field.label.text|safe}}
      </label>
      {%- if field.description -%}
        <p class="help-block">{{field.description|safe}}</p>
      {%- endif %}
    </div>
{% else %}
  {{ wtf.form_field(field, form_type, horizontal_columns, button_map) }}
{% endif %}
{% endmacro %}


{% extends "bootstrap/base.html" %}

{% block title %}
YunoHost app generator
{% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='stylesheet.css')}}">
{% endblock %}

{% block content %}
<div class="container" style="max-width: 800px;">
<h1 class="message text-center">Formulaire de génération d'une application Yunohost</h1>

<form id="main-form" class="form form-horizontal" method="POST" role="form">
    {{ main_form.hidden_tag() }}
    <div style="color: red;">
    {{ wtf.form_errors(main_form, hiddens="only") }}
    </div>

    {{ form_field(main_form.generator_mode) }}

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">1/8 - Informations générales</h2>
      </div>
      <div class="panel-body">
          <div>
            {{ form_field(main_form.app_name) }}
            {{ form_field(main_form.app_id) }}
            {{ form_field(main_form.description_en) }}
            {{ form_field(main_form.description_fr) }}
          </div>
      </div>
    </div>


    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">2/8 - Informations sur l'upstream</h2>
      </div>
      <div class="panel-body">
          <p><i>Le terme upstream désigne le projet original qui maintient l'app</i></p>
          <div>
            {{ form_field(main_form.license) }}
            {{ form_field(main_form.website) }}
            {{ form_field(main_form.demo) }}
            {{ form_field(main_form.admindoc) }}
            {{ form_field(main_form.userdoc) }}
            {{ form_field(main_form.code) }}
          </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">3/8 - Intégration dans YunoHost</h2>
      </div>
      <div class="panel-body">
          <div>
            {{ form_field(main_form.version) }}
            {{ form_field(main_form.maintainers) }}
            {{ form_field(main_form.multi_instance) }}
            {{ form_field(main_form.architectures) }}
            {{ form_field(main_form.ldap) }}
            {{ form_field(main_form.sso) }}
          </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">4/8 - Questions à poser pendant l'installation</h2>
      </div>
      <div class="panel-body">
          <p>
              <em>Cette partie sert à indiquer les questions qui devront être posées.</em>
              <br/>
              <em>NB: seules des questions standard sont proposées ici, il faudra éventuellement compléter à la main en
                  suivant le modèle des autres questions.</em>
          </p>

          <div>
            {{ form_field(main_form.domain_and_path) }}
            {{ form_field(main_form.init_main_permission) }}
            {{ form_field(main_form.init_admin_permission) }}
            {{ form_field(main_form.language) }}
          </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">5/8 - Ressources à initialiser</h2>
      </div>
      <div class="panel-body">
          <p>
              <em>Il s'agit d'éléments techniques configurés avant que le "vrai" script d'install de l'app ne soit lancé. Typiquement : créer un user système, télécharger les sources de l'app, initialiser le dossier d'install et de données, installer des dépendances avec apt, créer une base de donnée SQL, ...</em>
          </p>

          <h3>Sources du logiciel</h3>
          <div style="margin-left: 2em;">
            {{ form_field(main_form.source_url) }}
            {{ form_field(main_form.sha256sum) }}
            {{ form_field(main_form.auto_update) }}
          </div>


          <div>
            {{ form_field(main_form.system_user) }}
            {{ form_field(main_form.install_dir) }}
            {{ form_field(main_form.data_dir) }}
            {{ form_field(main_form.apt_dependencies) }}
            {{ form_field(main_form.database) }}
          </div>
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">6/8 - Technologie spécifique</h2>
      </div>
      <div class="panel-body">
            {{ form_field(main_form.main_technology) }}
            <div id="php_options">
                <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> You probably want to make sure to have 'phpX.Y-fpm' and others 'phpX.Y-foobar' libraries listed the apt dependencies earlier (with X.Y being the php version you want to use)</div>
                <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> The generated application draft will include an nginx configuration snippet that interfaces with PHP-FPM</div>
                {{ form_field(main_form.use_composer) }}
            </div>
            <div id="nodejs_options">
                {{ form_field(main_form.nodejs_version) }}
                {{ form_field(main_form.use_yarn) }}
            </div>
            <div id="python_options">
                <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> You probably want to make sure to have 'python3' and 'python3-venv' listed in the apt dependencies earlier. Other dependencies should be installed inside a venv (cf the proposed install snippet)</div>
            </div>
            {{ form_field(main_form.install_snippet) }}
            <div id="systemd_options">
                <div class="alert alert-info" role="alert"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> The generated application draft will include an nginx configuration snippet that reverse-proxies to a systemd service using an internal port</div>
                {{ form_field(main_form.systemd_execstart) }}
            </div>
      </div>
      <script>
        let main_technology = document.getElementById("main_technology");
        let install_snippet = document.getElementById("install_snippet");
        function update_main_technology()
        {
            document.getElementById("php_options").classList.add("hide");
            document.getElementById("nodejs_options").classList.add("hide");
            document.getElementById("python_options").classList.add("hide");
            document.getElementById("systemd_options").classList.add("hide");
            if (main_technology.value == "php") document.getElementById("php_options").classList.remove("hide");
            if (main_technology.value == "nodejs") document.getElementById("nodejs_options").classList.remove("hide");
            if (main_technology.value == "python") document.getElementById("python_options").classList.remove("hide");
            if ((main_technology.value != "php") && (main_technology.value != "none")) document.getElementById("systemd_options").classList.remove("hide");

            if (main_technology.value == "none")
            {
                install_snippet.value = "some_command --build";
            }
            else if (main_technology.value == "php")
            {
                if (document.getElementById("use_composer").checked)
                {
                    install_snippet.value = "ynh_install_composer";
                }
                else
                {
                    install_snippet.value = "some_command --build";
                }
            }
            else if (main_technology.value == "nodejs")
            {
                if (document.getElementById("use_yarn").checked)
                {
                    install_snippet.value = "ynh_exec_as $app $ynh_node_load_PATH yarn install --production --pure-lockfile\nynh_exec_as $app $ynh_node_load_PATH yarn build";
                }
                else 
                {
                    install_snippet.value = "ynh_exec_as $app $ynh_node_load_PATH $ynh_npm install --production --ignore-scripts\nynh_exec_as $app $ynh_node_load_PATH $ynh_npm run build"
                }
            }
            else if (main_technology.value == "python")
            {
                install_snippet.value = "python3 -m venv venv\nvenv/bin/pip3 install -r requirements.txt";
            }
            else if (main_technology.value == "ruby")
            {
                install_snippet.value = "ynh_gem update --system --no-document\nynh_gem install bundler foreman --no-document\nbundle config set --local deployment 'true'\nbundle config set --local without 'development test'\nbundle install";
            }
        }
        main_technology.addEventListener("change", update_main_technology);
        document.getElementById("use_composer").addEventListener("change", update_main_technology);
        document.getElementById("use_yarn").addEventListener("change", update_main_technology);
        update_main_technology();
      </script>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">7/8 - Configuration de l'app</h2>
      </div>
      <div class="panel-body">
            {{ form_field(main_form.use_custom_config_file) }}
            <!-- TODO : this show/hide the other fields -->
            <div id="custom_config_file_options">
            {{ form_field(main_form.custom_config_file) }}
            {{ form_field(main_form.custom_config_file_content) }}
            </div>
      </div>
      <script>
        let use_custom_config_file = document.getElementById("use_custom_config_file");
        function update_custom_config_file()
        {
            document.getElementById("custom_config_file_options").classList.add("hide");
            if (use_custom_config_file.checked) document.getElementById("custom_config_file_options").classList.remove("hide");
        }
        use_custom_config_file.addEventListener("change", update_custom_config_file);
        update_custom_config_file();
      </script>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h2 class="panel-title">8/8 - Options avancées</h2>
      </div>
      <div class="panel-body">
            {{ form_field(main_form.enable_change_url) }}
            {{ form_field(main_form.use_logrotate) }}
            {{ form_field(main_form.use_fail2ban) }}
            {{ form_field(main_form.fail2ban_regex) }}
            {{ form_field(main_form.use_cron) }}
            {{ form_field(main_form.cron_config_file) }}
      </div>
    </div>

    <!-- Submit button -->
    <div class="text-center">
        {{ main_form.submit_preview(class="btn btn-primary") }}
        {{ main_form.submit_download(class="btn btn-primary") }}
    </div>
</form>


<hr>

{% if generated_files %}
<h2>Code généré</h1>
{% for file in generated_files %}
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">{{ file.destination_path }}</h3>
      </div>
      <div class="panel-body" style="padding: 0;">
          <pre style="margin:0;">{{ file.content }}</pre>
      </div>
    </div>
{% endfor %}
{% endif %}

</div>
{% endblock %}