Updated home page

Results/Results/settings.py

@@ -11,6 +11,7 @@ https://docs.djangoproject.com/en/4.1/ref/settings/
 """
 
 from pathlib import Path
+import os
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -25,18 +26,22 @@ SECRET_KEY = 'django-insecure-==z9@atc)#1c@%@+txwiie=3qk)9r92antn3b$v#4o8r2q63&d
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ["*", "192.168.5.105"]
 
 
 # Application definition
 
 INSTALLED_APPS = [
+    'baton',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+#    'rest_framework_datatables'
+    'mainapp',
+    'baton.autodiscover',
 ]
 
 MIDDLEWARE = [
@@ -122,3 +127,18 @@ STATICFILES_DIRS = [BASE_DIR / 'static/']
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+# Rest Framework for Data Table
+
+#REST_FRAMEWORK = {
+#    'DEFAULT_RENDERER_CLASSES': (
+#        'rest_framework.renderers.JSONRenderer',
+#        'rest_framework.renderers.BrowsableAPIRenderer',
+#        'rest_framework_datatables.renderers.DatatablesRenderer',
+#    ),
+#    'DEFAULT_FILTER_BACKENDS': (
+#        'rest_framework_datatables.filters.DatatablesFilterBackend',
+#    ),
+#    'DEFAULT_PAGINATION_CLASS': 'rest_framework_datatables.pagination.DatatablesPageNumberPagination',
+#    'PAGE_SIZE': 50,
+#}

Results/Results/urls.py

@@ -13,10 +13,11 @@ Including another URLconf
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
-from django.contrib import admin
+from baton.autodiscover import admin
 from django.urls import path, include
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('baton/', include('baton.urls')),
     path('', include('mainapp.urls')),
 ]

Results/mainapp/filters.py

@@ -0,0 +1,23 @@
+from decimal import Decimal
+from django.db.models import Q
+import django_filters
+from .models import Scoreboard
+
+class ProductFilter(django_filters.FilterSet):
+    query = django_filters.CharFilter(method='universal_search',
+                                      label="")
+
+    class Meta:
+        model = Scoreboard
+        fields = ['query']
+
+    def universal_search(self, queryset, name, value):
+        if value.replace(".", "", 1).isdigit():
+            value = Decimal(value)
+            return Scoreboard.objects.filter(
+                Q(price=value) | Q(cost=value)
+            )
+
+        return Scoreboard.objects.filter(
+            Q(name__icontains=value) | Q(category__icontains=value)
+        )

Results/mainapp/models.py

@@ -1,3 +1,20 @@
 from django.db import models
 
-# Create your models here.
+# products/models.py
+from django.db import models
+
+class Scoreboard(models.Model):
+    class Status(models.IntegerChoices):
+        ACTIVE = 1, "Active"
+        INACTIVE = 2, "Inactive"
+        ARCHIVED = 3, "Archived"
+
+    name = models.CharField(max_length=255)
+    category = models.CharField(max_length=255)
+    price = models.DecimalField(max_digits=10, decimal_places=2)
+    cost = models.DecimalField(max_digits=10, decimal_places=2)
+    status = models.PositiveSmallIntegerField(choices=Status.choices)
+
+    def __str__(self):
+        return self.name
+

Results/mainapp/templates/index.html

@@ -7,64 +7,9 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
     <title>Home</title>
 
-    <style>
-      body {
-        background-color: #0d5979;
-      }
-
-      .bd-placeholder-img {
-        font-size: 1.125rem;
-        text-anchor: middle;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        user-select: none;
-      }
-
-      @media (min-width: 768px) {
-        .bd-placeholder-img-lg {
-          font-size: 3.5rem;
-        }
-      }
-
-      .b-example-divider {
-        height: 3rem;
-        background-color: rgba(0, 0, 0, .1);
-        border: solid rgba(0, 0, 0, .15);
-        border-width: 1px 0;
-        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-      }
-
-      .b-example-vr {
-        flex-shrink: 0;
-        width: 1.5rem;
-        height: 100vh;
-      }
-
-      .bi {
-        vertical-align: -.125em;
-        fill: currentColor;
-      }
-
-      .nav-scroller {
-        position: relative;
-        z-index: 2;
-        height: 2.75rem;
-        overflow-y: hidden;
-      }
-
-      .nav-scroller .nav {
-        display: flex;
-        flex-wrap: nowrap;
-        padding-bottom: 1rem;
-        margin-top: -1px;
-        overflow-x: auto;
-        text-align: center;
-        white-space: nowrap;
-        -webkit-overflow-scrolling: touch;
-      }
-    </style>
-
-    
+    <!-- Styles -->
+    {% load static %}
+    <link rel="stylesheet" href="{% static 'css/index.css' %}">
   </head>
 
 <body>

Results/mainapp/templates/results.html

@@ -5,4 +5,5 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
-    <title>Results</title>
+    <title>Results</title>
+    

Results/mainapp/templates/scoreboard.html

@@ -12,10 +12,10 @@
       }
     </style>
 
-<body>
+  <body>
   <div class="row justify-content-center">
     <div class="col">
-      <table class="table table-responsive table-striped table-hover table-bordered border-primary ">
+      <table class="table table-responsive table-striped table-hover table-bordered border-primary" contenteditable>
       <thead>
         <tr>
           <th scope="col">#</th>

Results/static/css/index.css

@@ -0,0 +1,67 @@
+body {
+    background-color: #0d5979;
+}
+
+.bd-placeholder-img {
+    font-size: 1.125rem;
+    text-anchor: middle;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+@media (min-width: 768px) {
+    .bd-placeholder-img-lg {
+      font-size: 3.5rem;
+    }
+}
+
+.b-example-divider {
+    height: 3rem;
+    background-color: rgba(0, 0, 0, .1);
+    border: solid rgba(0, 0, 0, .15);
+    border-width: 1px 0;
+    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.b-example-vr {
+    flex-shrink: 0;
+    width: 1.5rem;
+    height: 100vh;
+}
+
+.bi {
+    vertical-align: -.125em;
+    fill: currentColor;
+}
+
+.nav-scroller {
+    position: relative;
+    z-index: 2;
+    height: 2.75rem;
+    overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+    display: flex;
+    flex-wrap: nowrap;
+    padding-bottom: 1rem;
+    margin-top: -1px;
+    overflow-x: auto;
+    text-align: center;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+}
+
+.card{
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
+    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
+    cursor: pointer;
+}
+
+.card:hover{
+    transform: scale(1.05);
+    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
+}

Results/static/js/main.js

@@ -0,0 +1,28 @@
+$(function(){
+  'use strict';
+  var $page = $('#main'),
+      options = {
+        debug: true,
+        prefetch: true,
+        cacheLength: 2,
+        onStart: {
+          duration: 250, // Duration of our animation
+          render: function ($container) {
+            // Add your CSS animation reversing class
+            $container.addClass('is-exiting');
+            // Restart your animation
+            smoothState.restartCSSAnimations();
+          }
+        },
+        onReady: {
+          duration: 0,
+          render: function ($container, $newContent) {
+            // Remove your CSS animation reversing class
+            $container.removeClass('is-exiting');
+            // Inject the new content
+            $container.html($newContent);
+          }
+        }
+      },
+      smoothState = $page.smoothState(options).data('smoothState');
+});