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">{{ gettext("Yunohost application generation form") }}</h1>
<p style="text-align: center; margin-left:5%">Version: {{ generator_info['GENERATOR_VERSION'] }}</p>

<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 collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("1/9 - General information") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <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 collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("2/9 - Informations about the application") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <p><i>{{ gettext("The word upstream refers to the original project that maintains the 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 collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("3/9 - Integration in YunoHost") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <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 collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("4/9 - Questions to ask during installation") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <p>
              <em>{{ gettext("This part is meant to indicate the questions that will be asked.") }}</em>
              <br/>
              <em>{{ gettext("NB: only standard questions are asked here, it might be required to complete it by hand using other questions as a guide.") }}</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 collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("5/9 - Ressources to initialise") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <p>
              <em>{{ gettext("Technical elements configured before launching the 'real' app install script. Usually : creating a system user, downloading app sources, initialiser le dossier d'install et de données, install apt dependencies, create a database, ...") }}</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 collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("6/9 - Specific technology") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
            {{ 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> {{ gettext("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> {{ gettext("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> {{ gettext("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> {{ gettext("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 collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("7/9 - App configuration") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
            {{ 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 collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("8/9 - General and advanced documentation") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
          <p><i>{{ gettext("A more complete presentation that the summary completed above, explaining to what correspond the software, the eventual warnings and specific details on its functioning in Yunohost (it's the place where one can warn about integration issues).") }}</i></p>
          {{ form_field(main_form.description) }}
          {{ form_field(main_form.disclaimer) }}

          <p><i>{{ gettext("Indications to show at key steps to manage the package : installation, update, message to the admin account. You usually don't have to fill them.") }}</i></p>
          {{ form_field(main_form.pre_install) }}
          {{ form_field(main_form.post_install) }}
          {{ form_field(main_form.pre_upgrade) }}
          {{ form_field(main_form.post_upgrade) }}
          {{ form_field(main_form.admin) }}


      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading collapse-button">
        <h2 class="panel-title collapse-title">{{ gettext("9/9 - Advanced options") }}</h2>
      </div>
      <div class="panel-body collapsible collapsed">
            {{ 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 -->
    <p class="text-center">
        {{ main_form.submit_preview(class="btn btn-primary") }}
        {{ main_form.submit_download(class="btn btn-primary") }}
    </p>

    <!-- Submit button for demo values-->
    <script>
        function fillFormWithDefaultValues() {
            console.log("Filling the form with minimal dummy values")
            document.getElementById('app_id').value = "awesome_app_demo"
            document.getElementById('app_name').value = "Awesome demo app"
            document.getElementById('description_en').value = "Dummy app to demonstrate Yunohost app generator"
            document.getElementById('description_fr').value = "Application factice de démonstration du générateur d'application Yunohost"
            document.getElementById('version').value = "1.0~ynh1"
            document.getElementById('architectures').value = "all"
            // document.getElementById('ldap').value = "not_relevant"
            // document.getElementById('sso').value = "not_relevant"
            document.getElementById('license').value = "AGPL-3.0"
            document.getElementById('code').value = "https://github.com/YunoHost/example_ynh/"
            document.getElementById('source_url').value = "https://github.com/YunoHost/example_ynh/archive/1235ae57a3a285a4024d028d860f56980fa5ed19.tar.gz"
            document.getElementById('sha256sum').value = "471ff03ae251812d3d042fb7e9206c812de5bf07bd4ac4c95763278702eff30a"        }
    </script>
    <p class="text-center">
        {{ main_form.submit_demo(class="btn btn-primary") }}
    </p>

    </form>
    </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 collapse-button">
        <h3 class="panel-title collapse-title">{{ file.destination_path }}</h3>
      </div>
      <div class="panel-body collapsible collapsed" style="padding: 0;">
          <pre style="margin:0;">{{ file.content }}</pre>
      </div>
    </div>
{% endfor %}
{% endif %}

</div>

<script>
    var coll = document.getElementsByClassName("collapse-button");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {

        if (this.classList.contains('expanded')) {
          this.classList.remove('expanded');
          this.nextElementSibling.classList.add('collapsed');
        } else {
          this.classList.add('expanded');
          this.nextElementSibling.classList.remove('collapsed');
        }

        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
      });
    }
</script>
{% endblock %}