added error alert in front-end

pins/views.py

@@ -1,5 +1,5 @@
 from django.shortcuts import render
-from django.views.generic import ListView
+from django.views.generic import TemplateView
 
 from rest_framework.response import Response
 from rest_framework.permissions import AllowAny, IsAuthenticated
@@ -10,11 +10,9 @@ from picontrol.control import read_pin, read_all_pin, write_pin_value, write_pin
 from pins.pagination import PaginationAPIView
 from pins.serializers import PinSerializer
 
-class PinIndexView(ListView):
+class PinIndexView(TemplateView):
     template_name = 'pins/index.html'
 
-    def get_queryset(self):
-        return read_all_pin()
 
 class PinView(PaginationAPIView):
     serializer_class = PinSerializer

statics/static_dirs/js/pintable.js

@@ -1,6 +1,6 @@
 var app = angular.module('pinTableApp', []);
 app.controller('pinTableController', function($scope, $http) {
-    $scope.refresh_list = function(pin_list){
+    $scope.refresh_list = function(){
         var new_pinlist = [];
         var temp_pinlist = [];
         $scope.pinlist.forEach(function (item, index) {
@@ -19,7 +19,7 @@ app.controller('pinTableController', function($scope, $http) {
     $http.get("/pins/api/")
         .then(function(response) {
             $scope.pinlist = response.data.results;
-            $scope.pins = $scope.refresh_list($scope.pinlist);
+            $scope.pins = $scope.refresh_list();
         });
 
     $scope.change_mode = function (physical, mode_code) {
@@ -28,14 +28,27 @@ app.controller('pinTableController', function($scope, $http) {
             {mode: mode_code},
             {headers: {'Content-Type': 'application/json', 'X-CSRFToken': token}})
             .then(function (response) {
-                if(response.status == 200 && response.data.operation){
-                    console.log(response.data.pin);
+                if(response.data.operation){
                     $scope.pinlist[physical-1] = response.data.pin;
-                    $scope.pins = $scope.refresh_list($scope.pinlist);
+                    $scope.pins = $scope.refresh_list();
                 }
             })
             .catch((err) => {
-                $scope.pins = $scope.refresh_list($scope.pinlist);
+                var error_msg, footer_msg = '';
+                console.log(err);
+                if(err.status == 403){
+                    error_msg = err.data.detail;
+                    footer_msg = '<a href="/login">Login</a>';
+                }else{
+                    error_msg = err.data.mode
+                }
+                Swal.fire({
+                    type: 'error',
+                    title: 'Oops...',
+                    text: error_msg,
+                    footer: footer_msg
+                });
+                $scope.pins = $scope.refresh_list();
             })
     };
 
@@ -46,24 +59,27 @@ app.controller('pinTableController', function($scope, $http) {
             {value: new_value},
             {headers: {'Content-Type': 'application/json', 'X-CSRFToken': token}})
             .then(function (response) {
-                if(response.status == 200 && response.data.operation){
+                if(response.data.operation){
                     $scope.pinlist[physical-1] = response.data.pin;
-                    $scope.pins = $scope.refresh_list($scope.pinlist);
+                    $scope.pins = $scope.refresh_list();
                 }
             })
             .catch((err) => {
-                $scope.pins = $scope.refresh_list($scope.pinlist);
+                var error_msg, footer_msg = '';
+                if(err.status == 403){
+                    error_msg = err.data.detail;
+                    footer_msg = '<a href="/login">Login</a>';
+                }else{
+                    error_msg = err.data.value
+                }
+                Swal.fire({
+                    type: 'error',
+                    title: 'Oops...',
+                    text: error_msg,
+                    footer: footer_msg
+                });
+                $scope.pins = $scope.refresh_list();
             })
     }
 
-});
-
-$(document).ready(function() {
-    $('.container').on('click', '.radioBtn a', function() {
-        var sel = $(this).data('title');
-        var tog = $(this).data('toggle');
-        $(this).parent().next('.' + tog).prop('value', sel);
-        $(this).parent().find('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]').removeClass('active').addClass('notActive');
-        $(this).parent().find('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive').addClass('active');
-    });
 });

templates/base.html

@@ -10,7 +10,6 @@
       <link rel="stylesheet" href="{% static 'css/checkbox.css' %}">
       <link rel="stylesheet" href="{% static 'css/style.css' %}">
 
-      <script src="{% static 'js/angular.min.js' %}"></script>
 
       <title>Restpi | {% block title %}{% endblock %}</title>
       {% block extraHead %}{% endblock %}
@@ -20,7 +19,7 @@
 
     {% block mainarea %}{% endblock %}
 
-
+    <script src="{% static 'js/angular.min.js' %}"></script>
     <script src="{% static 'js/jquery-3.3.1.slim.min.js' %}"></script>
     <script src="{% static 'js/popper.min.js' %}"></script>
     <script src="{% static 'js/bootstrap.min.js' %}"></script>

templates/navbar.html

@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg navbar-light navbar-restpi">
     <div class="container">
-        <a class="navbar-brand" href="#">RestPi</a>
+        <a class="navbar-brand" href="/">RestPi</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>

templates/pins/index.html

@@ -1,6 +1,9 @@
 {% extends 'base.html' %}
 {% load staticfiles %}
 {% block title %}Pins{% endblock %}
+{% block extraHead %}
+    <link rel="stylesheet" href="{% static 'css/sweetalert2.min.css' %}">
+{% endblock %}
 
 {% block mainarea %}
     {% csrf_token %}
@@ -94,5 +97,6 @@
 
 {% endblock %}
 {% block extraFoot %}
+    <script src="{% static 'js/sweetalert2.min.js' %}"></script>
     <script src="{% static 'js/pintable.js' %}"></script>
 {% endblock %}