js

js 导航菜单切换

{% extends "layout.html" %}
{% load has_group %}
{% load permission_tags %}
{% block title %} 配置文件管理 {% endblock %}
{% block static %}
<link rel="stylesheet" href="/static/css/codemirror.css"></link>
 <a href="/pusher/config/" class="config-btn">返回上页</a>
<span class="bwapp-tit">{{ system }}</span>
<span id="version" class="version-text"></span>
<div style="float: right;">
    {% if user|has_role:'security'%}
    <button type="button" id="push_to_redis_header" class="skyToBlue common-btn">配置下发</button>
    <button type="button" id="uri_rewrite_push_to_redis_header" class="skyToBlue uri-rewrite-common-btn">uri rewrite 配置下发</button>
    {% endif %}    
</div>
<div class="config_detail_cont">
    <ul class="config_detail_nav">
        {% if user|has_role:'operations,admin,application_test'%}
        <li data-content="percent">流量百分比</li>
        {% endif %}
        {% if user|has_role:'security,admin'%}
        <li data-content="uri_rewrite">Uri Rewrite</li>
        {% endif %}
        {% if user|has_role:'security,admin'%}
        <li data-content="static_manage">静态资源配置 </li>
        {% endif %}
        {% if user|has_role:'operations,admin,application_test,security'%}
        <li data-content="source_file" class="v-pills-tab">配置源文件</li>
        {% endif %}
    </ul>
    <!-- 多个 class 以 空格 分隔 -->
    <div class="flow-table-wrap uri_rewrite" id="v-pills-hp" role="tabpanel" aria-labelledby="v-pills-fl-tab">
        {% include "pusher/uri_rewrite.html" %}
    </div>
    <div class="flow-table-wrap static_manage" id="v-pills-hp" role="tabpanel" aria-labelledby="v-pills-fl-tab">
        {% include "pusher/static_manage.html" %}
    </div>
    <div class="flow-table-wrap source_file" id="v-pills-source" role="tabpanel" aria-labelledby="v-pills-source-tab">
        <div id="editor">
        </div>
    </div>
</div> 
<script src="/static/js/uri_rewrite.js"></script>
<script src="/static/js/static_manage.js"></script>
<script src="/static/js/uri_rewrite.js"></script>

// class 为 config_detail_nav ，里面 class 为 li 的； 
$(".config_detail_nav li").click(function (e) {
    // data-* 为 自定义属性， 这里是 data-content 的值
    var checkClass = $(this).data('content');

    // https://www.runoob.com/jsref/prop-element-classlist.html html5 classList 属性
    if (e.target.classList.contains('v-pills-tab')) {
        $.ajax({
            url: "/pusher/config/local/value/",
            type: "GET",
            data: {
                app: "{{ system }}"
            },
            success: function (data) {
                console.log(data)
                $("#editor").html("<pre><code>" + escapeHtml(data.data) + "</code></pre>");
                $('pre code').each(function (i, block) {
                    hljs.highlightBlock(block);
                });
                // app_config = data.data;
            },
            fail: function (e) {
                console.log(e);
            },
        });
    }
        $(this).addClass("skyToBlue").siblings("li").removeClass("skyToBlue");
        // 添加 skyToBlue class, 同胞中 li 的 移除 skyToBlue class。 
        if(checkClass == 'uri_rewrite'){
            $('.common-btn').hide()
            // 隐藏 和 显示
            $('.uri-rewrite-common-btn').show()
        }else{
            $('.common-btn').show()
            $('.uri-rewrite-common-btn').hide()
        }
    $(`.flow-table-wrap.${checkClass}`).show().siblings(".flow-table-wrap").hide();
    window.localStorage.setItem('active_content', $('.config_detail_nav .skyToBlue').data('content'));
});
//  setItem, getItem, removeItem  存，取，移除。


    jQuery(document).ready(function ($) {
        let active_content = window.localStorage.getItem('active_content');
        if (active_content) {
            // data-content 的属性值为 ${active_content} 的, class 为 config_detail_nav 内 li 的 元素
            // trigger() 方法触发被选元素的指定事件类型
            $(`.config_detail_nav li[data-content="${active_content}"]`).trigger('click')
        } else {
            $('.config_detail_nav li')[0].classList.add('skyToBlue')
            let first_content = $('.config_detail_nav li')[0].dataset.content;
            $(`.flow-table-wrap.${first_content}`).css('dispaly', 'block')
        }
    }



// uri rewrite push config to redis
        $("#uri_rewrite_push_to_redis_header").click(function () {
            pop_confirm("确定下发配置到Redis?", function () {
                $.ajax({
                    url: "/pusher/config/validate/urirewrite/",
                    type: "POST",
                    data: {
                        app_name: '{{ system }}',
                        status: '{{ status }}',
                        csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
                        // config: app_config
                    }
                }).done(function (data) {
                    if (data.status === "OK") {
                        var form = document.createElement("form")
                        form.method = "POST"
                        form.action = "/pusher/config/urirewrite/"
                        form.style.cssText = "display:none"
                        var editor = document.createElement("input")
                        editor.name = "editor"
                        // editor.value = app_config
                        form.appendChild(editor)
                        var app_name = document.createElement("input")
                        app_name.name = "app_name"
                        app_name.value = '{{ system }}'
                        form.appendChild(app_name)
                        var status = document.createElement("input")
                        status.name = "status"
                        status.value = '{{ status }}'
                        form.appendChild(status)
                        var csrftoken = document.createElement("input")
                        csrftoken.name = "csrfmiddlewaretoken"
                        csrftoken.value = document.getElementsByName('csrfmiddlewaretoken')[0].value
                        form.appendChild(csrftoken)
                        document.body.appendChild(form)
                        form.submit();
                        pop_success("下发配置");
                    } else {
                        pop_success(data.message)
                    }
                }).fail(function (error) {
                    pop_success(error.message)
                })
            });
        })

<td class="versions" id="{{ genre_list.0 }}">
                    <a href="javascript:;" onclick="getVersionState(event, '{{ genre_list.0 }}')" class="config-version-status">点击查看</a>

</td>
<td>
  <a href="/app/config/file/{{app.name }}" class="config-btn" > 配置</a>
  {% if user|has_role:'admin'%}
    <a href="javascript:;" onclick="clearConf(event, '{{ sys }}')" class="config-move">清空</a>
    {% endif %}
</td>



<script type="text/javascript">


  function getVersionState(e, sysname) {
        $.ajax({
            url: "/pusher/config/versionstatus/",
            type: "POST",
            data: {
                sysname: sysname,
                csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
            }
        }).done(function (data) {
            var element = document.getElementById(sysname)
            let span = element.lastChild
          // 判断 是否已经有 span,  没有才添加。
            if(span.tagName =='span' || span.tagName=='SPAN'){
                return
            }else{
                var para = document.createElement("span");
                var node = document.createTextNode(data.data);
                para.appendChild(node);
                element.appendChild(para)
            }

        }).fail(function (error) {
            pop_warning(error)
        })
    }
</script>