Merge pull request #392 from brickbox-io/script_editing

bb_dashboard/static/js/developer/custom_scripts.js

@@ -3,7 +3,9 @@ function AddScript() {
     $("#add_script").modal('toggle');
 }
 
-function DeleteScriptModal() {
+function DeleteScriptModal(script_id, script_name) {
+    document.getElementById("delete_script_button").dataset.script_id = script_id;
+    document.getElementById("script_name_confirmation").innerHTML = "Deleting: " + script_name;
     $("#delete_script").modal('toggle');
 }
 
@@ -30,3 +32,61 @@ function AddNewScript() {
     xhttp.send(formData);
 }
 
+/* ------------------------------- Edit Script ------------------------------ */
+function EditScript(script_id) {
+    var xhttp = new XMLHttpRequest();
+    var url = '/dashboard/tab/developer/script_edit/'+script_id;
+
+    xhttp.onload = function () {
+        var response = JSON.parse(this.responseText);
+        document.getElementById("update_script_button").dataset.script_id = script_id;
+        document.getElementById("edit_script_name").value = response['script_name'];
+        document.getElementById("edit_script_description").value = response['script_description'];
+        document.getElementById("edit_script_code").value = response['script_code'];
+        $("#edit_script").modal('toggle');
+    };
+
+    xhttp.open('GET', url);
+    xhttp.send();
+}
+
+/* ------------------------------ Update Script ----------------------------- */
+function UpdateScript(script_id) {
+    var script_name = document.getElementById("edit_script_name").value;
+    var script_description = document.getElementById("edit_script_description").value;
+    var script_code = document.getElementById("edit_script_code").value;
+
+    var formData = new FormData();
+    var xhttp = new XMLHttpRequest();
+    var url = '/dashboard/tab/developer/script_update'
+
+    formData.append('script_id', script_id);
+    formData.append('script_name', script_name);
+    formData.append('script_description', script_description);
+    formData.append('script_code', script_code);
+
+    xhttp.onload = function () {
+        $("#edit_script").modal('toggle');
+    }
+
+    xhttp.open('POST', url, true);
+    xhttp.setRequestHeader("X-CSRFToken", csrftoken);
+    xhttp.send(formData);
+}
+
+/* ------------------------------ Delete Script ----------------------------- */
+function DeleteScript(script_id) {
+    var formData = new FormData();
+    var xhttp = new XMLHttpRequest();
+    var url = '/dashboard/tab/developer/script_delete'
+
+    formData.append('script_id', script_id);
+
+    xhttp.onload = function () {
+        $("#delete_script").modal('toggle');
+    }
+
+    xhttp.open('POST', url, true);
+    xhttp.setRequestHeader("X-CSRFToken", csrftoken);
+    xhttp.send(formData);
+}

bb_dashboard/templates/developer.html

@@ -11,48 +11,49 @@
 
     <!-- ----------------------- START - Custom Scripts ------------------------ -->
     <div class="card">
-            <div class="card-header">
-                <h3 class="title">Custom Scripts</h3>
-            </div>
-
-            <div class="card-body">
-                <div class="table-responsive">
+        <div class="card-header">
+            <h3 class="title">Custom Scripts</h3>
+        </div>
 
-                    <table class="table">
+        <div class="card-body">
+            <div class="table-responsive">
 
-                        <!-- Table Head -->
-                        <thead>
-                            <tr>
-                                <!-- <th class="text-center">#</th> -->
-                                <th>Script Name</th>
-                                <th>Description</th>
-                                <th class="text-center">Edit</th>
-                                <th class="text-center">Delete</th>
-                            </tr>
-                        </thead>
+                <table class="table">
 
-                        <!-- Table Body -->
-                        <tbody id="brick_wall">
-                            {% include "developer/custom_script_table.html" %}
-                        </tbody>
+                    <!-- Table Head -->
+                    <thead>
+                        <tr>
+                            <!-- <th class="text-center">#</th> -->
+                            <th>Script Name</th>
+                            <th>Description</th>
+                            <th class="text-center">Edit</th>
+                            <th class="text-center">Delete</th>
+                        </tr>
+                    </thead>
 
-                    </table>
+                    <!-- Table Body -->
+                    <tbody id="brick_wall">
+                        {% include "developer/custom_script_table.html" %}
+                    </tbody>
 
-                </div>
-            </div>
+                </table>
 
-            <div class="card-footer text-center">
-                <button type="button" class="btn btn-success" onclick="AddScript();"> + Add Script </button>
             </div>
+        </div>
 
+        <div class="card-footer text-center">
+            <button type="button" class="btn btn-success" onclick="AddScript();"> + Add Script </button>
         </div>
+
     </div>
-    <!-- ----------------------- END - Custom Scripts ------------------------ -->
+</div>
+<!-- ----------------------- END - Custom Scripts ------------------------ -->
 
 </div>
 
 {% include "developer/modal_new_script.html" %}
-{% include "developer/delete-modal.html" %}
+{% include "developer/modal_delete_script.html" %}
+{% include "developer/modal_edit_script.html" %}
 
 {% endblock content %}
 

bb_dashboard/templates/developer/custom_script_table.html

@@ -6,13 +6,13 @@
 
     <td class="text-center">
 
-        <i class="material-icons">edit</i>
+        <i class="material-icons" onclick="EditScript({{ script.id }});">edit</i>
 
     </td>
 
     <td class="text-center">
 
-        <i onclick="DeleteScriptModal();" class="material-icons">delete</i>
+        <i onclick="DeleteScriptModal({{ script.id }}, '{{ script.name}}');" class="material-icons">delete</i>
 
     </td>
 

bb_dashboard/templates/developer/delete-modal.html → bb_dashboard/templates/developer/modal_delete_script.html

@@ -4,11 +4,14 @@
         <div class="modal-content">
             <div class="modal-body">
 
-               <h2 style="color: #32325d !important;">Are you sure you want to delete?</h2>
+                <h2 style="color: #32325d !important;">Are you sure you want to delete?</h2>
+
+                <h3 style="color: #32325d !important; text-align:center;" id="script_name_confirmation"></h3>
+
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Back</button>
-                <button type="button" class="btn btn-primary" id="delete_button" onclick="">Delete</button>
+                <button type="button" class="btn btn-primary" id="delete_script_button" onclick="DeleteScript(this.dataset.script_id)">Delete</button>
             </div>
         </div>
     </div>

bb_dashboard/templates/developer/modal_edit_script.html

@@ -0,0 +1,34 @@
+<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="AddScript" aria-hidden="true" id="edit_script">
+
+    <div class="modal-dialog modal-md" style="transform: translate(0, 0)">
+        <div class="modal-content">
+            <div class="modal-body">
+
+                <form class="form-group" autocomplete="off">
+
+                    <!-- Set Script Name Input -->
+                    <label for="script_name">Script Name</label>
+                    <input type="text" class="form-control" id="edit_script_name" style="color: black;" placeholder="">
+
+                    <br>
+
+                    <!-- Set Script Description Input -->
+                    <label for="script_description">Script Description</label>
+                    <textarea class="form-control" id="edit_script_description" style="color: black;" rows="3" placeholder=""></textarea>
+
+                    <br>
+
+                    <!-- Set Script Input -->
+                    <label for="script_code">Script</label>
+                    <textarea class="form-control" id="edit_script_code" style="color: black; max-height: none;" rows="10" placeholder=""></textarea>
+
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary" id="update_script_button" onclick="UpdateScript(this.dataset.script_id);">Save</button>
+            </div>
+        </div>
+    </div>
+
+</div>

bb_dashboard/templates/developer/modal_new_script.html

@@ -20,7 +20,7 @@
 
                     <!-- Set Script Input -->
                     <label for="script_code">Script</label>
-                    <textarea class="form-control" id="script_code" style="color: black;" rows="3" placeholder=""></textarea>
+                    <textarea class="form-control" id="script_code" style="color:black; max-height:none;" rows="10" placeholder=""></textarea>
 
                 </form>
             </div>

bb_dashboard/urls.py

@@ -15,7 +15,9 @@
 
     # ----------------------------------- Tabs ----------------------------------- #
     path('tab/developer/script_add/', views.add_new_script, name='add_new_script'),
-
+    path('tab/developer/script_edit/<int:script_id>', views.edit_script, name='edit_script'),
+    path('tab/developer/script_update', views.update_script, name='update_script'),
+    path('tab/developer/script_delete', views.delete_script, name='delete_script'),
 
     # ------------------- Backwards Compatability Page Handling ------------------ #
     re_path(r'^.*\.*', views.pages, name='pages'),

bb_dashboard/views/__init__.py

@@ -4,4 +4,4 @@
 
 from .views_colo import onboarding
 
-from .views_tab_developer import add_new_script
+from .views_tab_developer import add_new_script, edit_script, update_script, delete_script

bb_dashboard/views/views_tab_developer.py

@@ -1,6 +1,6 @@
 ''' bb_dashboard - views_tab_developer.py '''
 
-from django.http import HttpResponse
+from django.http import HttpResponse, JsonResponse
 from django.contrib.auth.decorators import login_required
 
 from bb_data.models import CustomScript
@@ -20,3 +20,56 @@ def add_new_script(request):
     new_script.save()
 
     return HttpResponse(status=200)
+
+@login_required
+def edit_script(request, script_id):
+    '''
+    URL: dashboard/tab/developer/script_edit/<int:script_id>/
+    Method: GET
+    Returns the script values to be edited
+    '''
+    script = CustomScript.objects.get(id=script_id)
+    return JsonResponse(
+        {
+            'script_name': script.name,
+            'script_description': script.description,
+            'script_code': script.script
+        }, status=200, safe=False)
+
+@login_required
+def update_script(request):
+    '''
+    URL: dashboard/tab/developer/script_update
+    Updates the script changes.
+    '''
+    script_id = request.POST.get('script_id')
+
+    script = CustomScript.objects.get(id=script_id)
+
+    if script.user != request.user:
+        return HttpResponse("Unable to edit selected script", status=403)
+
+    script.name = request.POST.get('script_name')
+    script.description = request.POST.get('script_description')
+    script.script = request.POST.get('script_code')
+    script.save()
+
+    return HttpResponse(status=200)
+
+@login_required
+def delete_script(request):
+    '''
+    URL: dashboard/tab/developer/script_delete
+    Method: POST
+    Deletes the script.
+    '''
+    script_id = request.POST.get('script_id')
+
+    script = CustomScript.objects.get(id=script_id)
+
+    if script.user != request.user:
+        return HttpResponse("Unable to delete selected script", status=403)
+
+    script.delete()
+
+    return HttpResponse(status=200)