TandoorRecipes/cookbook/templates/settings.html

{% extends "base.html" %}
{% load i18n %}
{% load crispy_forms_tags %}
{% load static %}

{% block title %}{% trans 'Settings' %}{% endblock %}

{% block extra_head %}
    {{ preference_form.media }}
{% endblock %}


{% block content %}

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'view_settings' %}">{% trans 'Settings' %}</a></li>
        </ol>
    </nav>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" id="myTab" role="tablist" style="margin-bottom: 2vh">
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'account' %} active {% endif %}" id="account-tab" data-toggle="tab"
               href="#account" role="tab"
               aria-controls="account"
               aria-selected="{% if active_tab == 'account' %} 'true' {% else %} 'false' {% endif %}">
                {% trans 'Account' %}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'preferences' %} active {% endif %}" id="preferences-tab"
               data-toggle="tab" href="#preferences" role="tab"
               aria-controls="preferences"
               aria-selected="{% if active_tab == 'preferences' %} 'true' {% else %} 'false' {% endif %}">
                {% trans 'Preferences' %}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'api' %} active {% endif %}" id="api-tab" data-toggle="tab"
               href="#api" role="tab"
               aria-controls="api"
               aria-selected="{% if active_tab == 'api' %} 'true' {% else %} 'false' {% endif %}">
                {% trans 'API-Settings' %}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'search' %} active {% endif %}" id="search-tab" data-toggle="tab"
               href="#search" role="tab"
               aria-controls="search"
               aria-selected="{% if active_tab == 'search' %} 'true' {% else %} 'false' {% endif %}">
                {% trans 'Search-Settings' %}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link {% if active_tab == 'shopping' %} active {% endif %}" id="shopping-tab" data-toggle="tab"
               href="#shopping" role="tab"
               aria-controls="search"
               aria-selected="{% if active_tab == 'shopping' %} 'true' {% else %} 'false' {% endif %}">
                {% trans 'Shopping-Settings' %}</a>
        </li>

    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane {% if active_tab == 'account' %} active {% endif %}" id="account" role="tabpanel"
             aria-labelledby="account-tab">
            <h4>{% trans 'Name Settings' %}</h4>
            <form action="." method="post">
                {% csrf_token %}
                {{ user_name_form|crispy }}
                <button class="btn btn-success" type="submit" name="user_name_form"><i
                        class="fas fa-save"></i> {% trans 'Save' %}</button>
            </form>

            <h4>{% trans 'Account Settings' %}</h4>

            <a href="{% url 'account_email' %}" class="btn btn-primary">{% trans 'Emails' %}</a>
            <a href="{% url 'account_change_password' %}" class="btn btn-primary">{% trans 'Password' %}</a>

            <a href="{% url 'socialaccount_connections' %}" class="btn btn-primary">{% trans 'Social' %}</a>
            <br/>
            <br/>
            <br/>
            <br/>

        </div>
        <div class="tab-pane {% if active_tab == 'preferences' %} active {% endif %}" id="preferences" role="tabpanel"
             aria-labelledby="preferences-tab">


            <div class="row">
                <div class="col col-md-12">
                    <h4><i class="fas fa-language fa-fw"></i> {% trans 'Language' %}</h4>
                </div>
            </div>


            <div class="row">
                <div class="col-md-12">
                    <form action="{% url 'set_language' %}" method="post">{% csrf_token %}
                        <input class="form-control" name="next" type="hidden" value="{{ redirect_to }}">
                        <select name="language" class="form-control">
                            {% get_current_language as LANGUAGE_CODE %}
                            {% get_available_languages as LANGUAGES %}
                            {% get_language_info_list for LANGUAGES as languages %}
                            {% for language in languages %}
                                <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %}
                                        selected{% endif %}>
                                    {{ language.name_local }} ({{ language.code }})
                                </option>
                            {% endfor %}
                        </select>
                        <br/>
                        <button class="btn btn-success" type="submit"><i class="fas fa-save"></i> {% trans 'Save' %}
                        </button>
                    </form>
                </div>

            </div>

            <div class="row">
                <div class="col col-md-12">
                    <h4><i class="fas fa-palette fa-fw"></i> {% trans 'Style' %}</h4>
                </div>
            </div>
            <div class="row">
                <div class="col col-md-12">
                    <form action="." method="post">
                        {% csrf_token %}
                        {{ preference_form|crispy }}
                        <button class="btn btn-success" type="submit" name="preference_form"><i
                                class="fas fa-save"></i> {% trans 'Save' %}</button>
                    </form>
                </div>
            </div>


        </div>
        <div class="tab-pane {% if active_tab == 'api' %} active {% endif %}" id="api" role="tabpanel"
             aria-labelledby="api-tab">

            <div class="row">
                <div class="col col-md-12">
                    <h4><i class="fas fa-terminal fa-fw"></i> {% trans 'API Token' %}</h4>
                    {% trans 'You can use both basic authentication and token based authentication to access the REST API.' %}
                    <br/>
                    <br/>
                </div>
            </div>

            <div class="row">
                <div class="col col-md-12">

                    <div class="input-group mb-3">
                        <input class="form-control" value="{{ api_token }}" id="id_token">
                        <div class="input-group-append">
                            <button class="input-group-btn btn btn-primary" onclick="copyToken()"><i
                                    class="far fa-copy"></i></button>
                        </div>
                    </div>
                    <br/>
                    {% trans 'Use the token as an Authorization header prefixed by the word token as shown in the following examples:' %}
                    <br/>
                    <code>Authorization: Bearer {{ api_token }}</code> {% trans 'or' %}<br/>
                    <code>curl -X GET http://your.domain.com/api/recipes/ -H 'Authorization:
                        Bearer {{ api_token }}'</code>
                </div>
            </div>


        </div>
        <div class="tab-pane {% if active_tab == 'search' %} active {% endif %}" id="search" role="tabpanel"
             aria-labelledby="search-tab">
            <h4>{% trans 'Search Settings' %}</h4>
            {% trans 'There are many options to configure the search depending on your personal preferences.' %}
            {% trans 'Usually you do <b>not need</b> to configure any of them and can just stick with either the default or one of the following presets.' %}
            {% trans 'If you do want to configure the search you can read about the different options <a href="/docs/search/">here</a>.' %}

            <div class="card-deck mt-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{% trans 'Fuzzy' %}</h5>
                        <p class="card-text">{% trans 'Find what you need even if your search or the recipe contains typos. Might return more results than needed to make sure you find what you are looking for.' %}</p>
                        <p class="card-text"><small class="text-muted">{% trans 'This is the default behavior' %}</small></p>
                        <button class="btn btn-primary card-link" onclick="applyPreset('fuzzy')">{% trans 'Apply' %}</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{% trans 'Precise' %}</h5>
                        <p class="card-text">{% trans 'Allows fine control over search results but might not return results if too many spelling mistakes are made.' %}</p>
                        <p class="card-text"><small class="text-muted">{% trans 'Perfect for large Databases' %}</small></p>
                        <button class="btn btn-primary card-link" onclick="applyPreset('precise')">{% trans 'Apply' %}</button>
                    </div>
                </div>

            </div>

            <hr/>
            <form action="./#search" method="post" id="id_search_form">
                {% csrf_token %}
                {{ search_form|crispy }}
                <button class="btn btn-success" type="submit" name="search_form" id="search_form_button"><i
                        class="fas fa-save"></i> {% trans 'Save' %}</button>
            </form>
        </div>
        <div class="tab-pane {% if active_tab == 'shopping' %} active {% endif %}" id="shopping" role="tabpanel"
             aria-labelledby="shopping-tab">
            <h4>{% trans 'Shopping Settings' %}</h4>

            <form action="./#shopping" method="post" id="id_shopping_form">
                {% csrf_token %}
                {{ shopping_form|crispy }}
                <button class="btn btn-success" type="submit" name="shopping_form" id="shopping_form_button"><i
                        class="fas fa-save"></i> {% trans 'Save' %}</button>
            </form>
        </div>

    </div>

    <script type="application/javascript">
        $(function() {
            $('#id_search-trigram_threshold').get(0).type = 'range';
        });

        function applyPreset(preset) {
            $('#id_search-preset').val(preset);
            $('#search_form_button').click();
        }

        function copyToken() {
            let token = $('#id_token');
            token.select();
            document.execCommand("copy");
        }

        // Javascript to enable link to tab
        var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
        if (hash) {
            $('.nav-tabs a[href="#' + hash + '"]').tab('show');
        }

        // Change hash for page-reload
        $('.nav-tabs a').on('shown.bs.tab', function(e) {
            window.location.hash = e.target.hash;
        })
        
        {% comment %}
        // listen for events
        $(document).ready(function() {
            hideShow()
            // call hideShow when the user clicks on the mealplan_autoadd checkbox
            $("#id_shopping-mealplan_autoadd_shopping").click(function(event) {
                hideShow();
            });
        })

        function hideShow() {
            if(document.getElementById('id_shopping-mealplan_autoadd_shopping').checked == true) {
                $('#div_id_shopping-mealplan_autoexclude_onhand').show();
                $('#div_id_shopping-mealplan_autoinclude_related').show();
            }
            else {
                $('#div_id_shopping-mealplan_autoexclude_onhand').hide();
                $('#div_id_shopping-mealplan_autoinclude_related').hide();
            } 
        }
        {% endcomment %}
    </script>
{% endblock %}