mirror of
https://github.com/YunoHost/apps.git
synced 2024-09-03 20:06:07 +02:00
826639058e
* appgenerator: rework css using tailwind + misc cleanup, wording * appgenerator: tweak gettext + update translations (at least fr) * appgenerator: bump version idk
361 lines
15 KiB
HTML
361 lines
15 KiB
HTML
{% import "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 "base.html" %}
|
|
|
|
{% block main %}
|
|
<div class="mx-auto w-full text-center p-8">
|
|
<img alt="YunoHost application logo" src="{{ url_for('static', filename='yunohost-package.png') }}" class="w-32 mx-auto">
|
|
<h1 class="text-2xl font-bold">
|
|
{{ _("Yunohost application generation form") }}
|
|
</h1>
|
|
<p>Version: {{ generator_info['GENERATOR_VERSION'] }}</p>
|
|
<script>
|
|
function changeLanguage(lang) {
|
|
var url = "{{ url_for('set_language', language=lang) }}" + lang;
|
|
window.location.href = url;
|
|
}
|
|
</script>
|
|
<div>
|
|
{% for lang in AVAILABLE_LANGUAGES.items() %}
|
|
<button class="btn btn-sm bg-gray-200" type="button" onclick="changeLanguage('{{ lang[0] }}')">{{ lang[1] }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<form method="POST" role="form">
|
|
|
|
{{ main_form.hidden_tag() }}
|
|
<div class="text-red-800">
|
|
{{ wtf.form_errors(main_form, hiddens="only") }}
|
|
</div>
|
|
|
|
{{ form_field(main_form.generator_mode) }}
|
|
|
|
<div class="panel">
|
|
<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">
|
|
<div class="panel-heading collapse-button">
|
|
<h2 class="panel-title collapse-title">{{ gettext("2/9 - Upstream information") }}</h2>
|
|
</div>
|
|
<div class="panel-body collapsible collapsed">
|
|
<p class="tip">{{ gettext("The word 'upstream' refers to the original project that develops and maintains the app") }}</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">
|
|
<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">
|
|
<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 class="tip">
|
|
{{ gettext("This part is meant to indicate the questions that will be asked.") }}
|
|
<br/>
|
|
{{ gettext("NB: only standard questions are asked here, it might be required to complete it by hand using other questions as a guide.") }}
|
|
</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">
|
|
<div class="panel-heading collapse-button">
|
|
<h2 class="panel-title collapse-title">{{ gettext("5/9 - Resources to initialize") }}</h2>
|
|
</div>
|
|
<div class="panel-body collapsible collapsed">
|
|
<p class="tip">
|
|
{{ 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, ...") }}
|
|
</p>
|
|
|
|
<h3>Sources du logiciel</h3>
|
|
<div class="pl-2">
|
|
{{ 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">
|
|
<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");
|
|
let systemd_execstart = document.getElementById("systemd_execstart");
|
|
|
|
install_snippet.classList.add("font-mono");
|
|
systemd_execstart.classList.add("font-mono");
|
|
|
|
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">
|
|
<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">
|
|
<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">
|
|
{{ form_field(main_form.description) }}
|
|
{{ 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">
|
|
<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") }}
|
|
<br/>
|
|
{{ main_form.submit_demo(class="btn") }}
|
|
</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>
|
|
|
|
|
|
</form>
|
|
|
|
<hr class="my-2" />
|
|
|
|
{% if generated_files %}
|
|
<div>
|
|
<h2 class="text-center">Code généré</h2>
|
|
{% for file in generated_files %}
|
|
<div class="panel">
|
|
<div class="panel-heading collapse-button">
|
|
<h3 class="panel-title collapse-title">{{ file.destination_path }}</h3>
|
|
</div>
|
|
<div class="panel-body collapsible collapsed p-0">
|
|
<pre class="m-0">{{ file.content }}</pre>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<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 %}
|
|
|
|
|