Dev node (#3511)

* [Update] 添加节点详情Modal

* [Update] 更新翻译

apps/assets/templates/assets/_node_detail_modal.html

@@ -0,0 +1,68 @@
+{% extends '_modal.html' %}
+{% load i18n %}
+{% load static %}
+<style>
+    .modal-body {
+        background-color: white !important;
+    }
+</style>
+{% block modal_id %}node_detail_modal{% endblock %}
+
+{% block modal_title %}{% trans "Node detail" %}{% endblock %}
+
+
+{% block modal_body %}
+<form class="form-horizontal" action="" style="padding-top: 20px">
+<div>
+    <div class="form-group">
+        <label for="" class="col-sm-2 control-label">{% trans 'ID' %}</label>
+        <div class="col-sm-8">
+            <p class="form-control-static" id="id_node_detail_id_view"></p>
+        </div>
+        <div class="col-sm-2" style="padding-left: 2px">
+            <a class="btn btn-white btn-sm btn-node-detail-copy-id"><i class="fa fa-copy"></i></a>
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="" class="col-sm-2 control-label">{% trans 'Name' %}</label>
+        <div class="col-sm-8" >
+            <p class="form-control-static" id="id_node_detail_name_view"></p>
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="" class="col-sm-2 control-label">{% trans 'Full name' %}</label>
+        <div class="col-sm-8" >
+            <p class="form-control-static" id="id_node_detail_full_name_view"></p>
+        </div>
+    </div>
+    <div class="form-group">
+        <label for="" class="col-sm-2 control-label">{% trans 'Key' %}</label>
+        <div class="col-sm-8">
+            <p class="form-control-static" id="id_node_detail_key_view"></p>
+        </div>
+    </div>
+</div>
+</form>
+<script src="{% static "js/plugins/clipboard/clipboard.min.js" %}"></script>
+<script>
+
+function initClipboard() {
+    var clipboard = new Clipboard('.btn-node-detail-copy-id', {
+        text: function (trigger) {
+            return $("#id_node_detail_id_view").html()
+        }
+    });
+    clipboard.on("success", function (e) {
+        toastr.success("{% trans "Copy success" %}")
+    })
+}
+$(document).ready(function () {
+    initClipboard();
+})
+</script>
+
+{% endblock %}
+
+{% block modal_button %}
+<button data-dismiss="modal" class="btn btn-white" type="button">{% trans "Close" %}</button>
+{% endblock %}

apps/assets/templates/assets/asset_list.html

@@ -127,6 +127,7 @@
 {% include 'assets/_asset_update_modal.html' %}
 {% include 'assets/_asset_import_modal.html' %}
 {% include 'assets/_asset_list_modal.html' %}
+{% include 'assets/_node_detail_modal.html' %}
 {% endblock %}
 
 {% block custom_foot_js %}
@@ -198,6 +199,8 @@ function initTree() {
             <li class="divider"></li>
             <li id="show_current_asset" class="btn-show-current-asset" style="display: none;" tabindex="-1"><a><i class="fa fa-hand-o-up"></i> {% trans 'Display only current node assets' %}</a></li>
             <li id="show_all_asset" class="btn-show-all-asset" style="display: none;" tabindex="-1"><a><i class="fa fa-th"></i> {% trans 'Displays all child node assets' %}</a></li>
+            <li class="divider"></li>
+            <li id="menu_node_detail" class="btn-node-detail" tabindex="-1"><a><i class="fa fa-info-circle"></i> {% trans 'Node detail' %}</a></li>
         `
     })
 }
@@ -547,6 +550,30 @@ $(document).ready(function(){
         flash_message: false
     });
 
+}).on('click', '#menu_node_detail', function(e) {
+    e.preventDefault();
+    var the_url = "{% url 'api-assets:node-detail' pk=DEFAULT_PK %}";
+    the_url = the_url.replace("{{ DEFAULT_PK }}", current_node_id);
+    function drawingNodeDetailModal(data){
+        $('#id_node_detail_id_view').html(data['id']);
+        $('#id_node_detail_name_view').html(data['name']);
+        $('#id_node_detail_full_name_view').html(data['full_value']);
+        $('#id_node_detail_key_view').html(data['key']);
+        $('#node_detail_modal').modal();
+    }
+    function error(data) {
+        alert(data)
+    }
+    function success(data) {
+        drawingNodeDetailModal(data)
+    }
+    requestApi({
+        url: the_url,
+        error: error,
+        method: 'GET',
+        success: success,
+        flash_message: false
+    });
 })
 
 </script>