Add admin app

adminapp/__init__.py

@@ -0,0 +1 @@
+"""Admin app."""

adminapp/admin.py

@@ -0,0 +1,5 @@
+"""Admin module for admin app."""
+
+from django.contrib import admin
+
+# Register your models here.

adminapp/apps.py

@@ -0,0 +1,10 @@
+"""Admin app."""
+
+from django.apps import AppConfig
+
+
+class AdminappConfig(AppConfig):
+    """Admin app config."""
+
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "adminapp"

adminapp/models.py

@@ -0,0 +1,5 @@
+"""Models for admin app."""
+
+from django.db import models
+
+# Create your models here.

adminapp/urls.py

@@ -0,0 +1,7 @@
+"""URL patterns for index app."""
+
+from django.urls import path
+
+from adminapp.views import *
+
+urlpatterns = [path("", index, name="admin-index"), path("pages/", pages, name="admin-index")]

adminapp/views.py

@@ -0,0 +1,37 @@
+"""Views module for index app."""
+
+from django.http.request import HttpRequest
+from django.http.response import HttpResponse
+from django.shortcuts import render
+
+
+def index(request: HttpRequest) -> HttpResponse:
+    """Index view.
+
+    Args:
+        request: The request object.
+
+    Returns:
+        response: The response object.
+    """
+    return render(
+        request,
+        "admin/index.html",
+        context={"title": "Admin"},
+    )
+
+
+def pages(request: HttpRequest) -> HttpResponse:
+    """Pages view.
+
+    Args:
+        request: The request object.
+
+    Returns:
+        response: The response object.
+    """
+    return render(
+        request,
+        "admin/pages.html",
+        context={"title": "Admin"},
+    )

autodonate/settings.py

@@ -59,6 +59,7 @@
     "autodonate.lib",
     "index.apps.IndexConfig",
     "api.apps.ApiConfig",
+    "adminapp.apps.AdminappConfig",
 ]
 
 if DEBUG:

autodonate/urls.py

@@ -7,15 +7,16 @@
 from decouple import config
 from django.conf import settings
 from django.conf.urls.static import static
-from django.contrib import admin
+from django.contrib import admin as django_admin
 from django.urls import include, path
 
 from autodonate.settings import DEBUG
 
 urlpatterns = [
     path("", include("index.urls")),
     path("api/", include("api.urls")),
-    path(config("DJANGO_ADMIN_URL", default="django-admin/"), admin.site.urls),
+    path(config("ADMIN_URL", default="admin/"), include("adminapp.urls")),
+    path(config("DJANGO_ADMIN_URL", default="django-admin/"), django_admin.site.urls),
 ]
 
 if DEBUG:
@@ -27,6 +28,6 @@
 
 
 #: Rename admin panel elements
-admin.site.site_title = "autodonate"
-admin.site.site_header = "Admin panel"
-admin.site.index_title = "autodonate"
+django_admin.site.site_title = "autodonate"
+django_admin.site.site_header = "Admin panel"
+django_admin.site.index_title = "autodonate"

index/views.py

@@ -17,15 +17,5 @@ def index(request: HttpRequest) -> HttpResponse:
     return render(
         request,
         "index.html",
-        context={
-            "title": "Index",
-            "props": {
-                "hero": {
-                    "title": "Лучший сервер",
-                    "subtitle": "Майнкрафт сервер для легенд",
-                    "players": 5,
-                    "ip": "example.com",
-                }
-            },
-        },
+        context={"title": "Index"},
     )

svelte/rollup.config.ts

@@ -97,11 +97,8 @@ function componentExportDetails(componentName: string) {
 let exportable = [];
 
 [
-    "Navbar",
-    "Hero",
-    "LastDonates",
-    "Donate",
-    "Features",
+    "Admin",
+    "AdminPages",
 ].forEach((d) => exportable.push(componentExportDetails(d)));
 
 export default exportable;

svelte/src/declarations/admin.ts

@@ -0,0 +1,8 @@
+import Admin from '../pages/Admin.svelte';
+
+const app = new Admin({
+    target: document.getElementById("admin-target"),
+    props: JSON.parse(document.getElementById("admin-props").textContent),
+});
+
+export default app;

svelte/src/declarations/adminpages.ts

@@ -0,0 +1,8 @@
+import Admin from '../pages/AdminPages.svelte';
+
+const app = new Admin({
+    target: document.getElementById("adminpages-target"),
+    props: JSON.parse(document.getElementById("adminpages-props").textContent),
+});
+
+export default app;

svelte/src/pages/Admin.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import NavbarAdmin from "../ui/NavbarAdmin.svelte";
+</script>
+
+<NavbarAdmin active="index"/>
+
+<div class="container">
+  <div class="row">
+    <div class="col">
+      Column
+    </div>
+    <div class="col">
+      Column
+    </div>
+    <div class="col">
+      Column
+    </div>
+  </div>
+</div>

svelte/src/pages/AdminPages.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    import WidgetCard from "../ui/WidgetCard.svelte";
+</script>
+
+<WidgetCard/>

svelte/src/ui/NavbarAdmin.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    export let active: string;
+
+    onMount(async () => {
+        document.getElementById("nav-"+active).classList.add("active");
+        document.getElementById("nav-"+active).classList.remove("text-white");
+	});
+</script>
+
+<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px; height: 100%;">
+  <a href="/admin/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none ms-2">
+    <i class="bi bi-gear-wide pe-1"></i>
+    <span class="fs-4">Admin</span>
+  </a>
+  <hr>
+  <ul class="nav nav-pills flex-column mb-auto">
+    <li class="nav-item">
+      <a href="/admin/" class="nav-link text-white" id="nav-index">
+        <i class="bi bi-app pe-1"></i>
+        Home
+      </a>
+    </li>
+    <li>
+      <a href="/admin/pages/" class="nav-link text-white" id="nav-pages">
+        <i class="bi bi-book pe-1"></i>
+        Pages
+      </a>
+    </li>
+  </ul>
+</div>

svelte/src/ui/WidgetCard.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { spring } from 'svelte/motion';
+  import { onMount } from 'svelte';
+
+  let element: HTMLElement;
+  let select: HTMLElement;
+  let coords = spring({ x: 0, y: 0 }, {
+        stiffness: 0.1,
+        damping: 0.25
+    });
+  let active: boolean = false;
+  let start_coords;
+  const disableselect = () => {  
+      return false
+  }
+  let selected: boolean = false;
+
+  onMount(async () => {
+    start_coords = element.getBoundingClientRect();
+    coords = spring({ x: start_coords.left, y: start_coords.top }, {
+        stiffness: 0.1,
+        damping: 0.25
+    });
+    select = document.getElementById("select");
+  });
+
+  function move(e: MouseEvent) {
+    if (active) {
+        document.onselectstart = disableselect;
+        coords.set({ x: e.clientX, y: e.clientY });
+        let rect = select.getBoundingClientRect();
+
+        if (rect.left < e.clientX && e.clientX < rect.left + rect.width &&
+            rect.top < e.clientX && e.clientY < rect.top + rect.height ) {
+            select.style.backgroundColor = "yellow";
+            selected = true;
+        } else {
+            select.style.backgroundColor = "red";
+            selected = false;
+        }
+    }
+  }
+
+  function mouseup() {
+    if (active) {
+        document.onselectstart = null;
+        active = false;
+        if (selected) {
+            select.style.backgroundColor = "red";
+            select.appendChild(element);
+        } else {
+            coords.set({ x: start_coords.left, y: start_coords.top });
+            select.removeChild(element);
+        }
+    }
+  }
+</script>
+
+<svelte:window on:mousemove="{move}" on:mouseup="{mouseup}"/>
+
+<div class="card position-absolute" bind:this="{element}"
+     style="width: 18rem; left: {$coords.x}; top: {$coords.y}">
+  <div style="width: 100%; height: 50px;" class="bg-dark" on:mousedown="{() => active = true}"/>
+  <div class="card-body">
+    <h5 class="card-title">Заголовок</h5>
+    <p class="card-text">Текст - рыба, показыающий насколько кофоб крутой.</p>
+    <a href="#" class="btn btn-primary">Кофоб крут</a>
+  </div>
+</div>
+
+<div id="select" style="width: 200px; height: 200px; background-color: red"></div>

templates/admin/index.html

@@ -0,0 +1,8 @@
+{% extends 'base.html' %}
+{% load svelte %}
+
+{% block nav %}{% endblock %}
+
+{% block content %}
+  {% svelte 'admin' %}
+{% endblock %}

templates/admin/pages.html

@@ -0,0 +1,8 @@
+{% extends 'base.html' %}
+{% load svelte %}
+
+{% block nav %}{% endblock %}
+
+{% block content %}
+  {% svelte 'adminpages' %}
+{% endblock %}

templates/base.html

@@ -11,7 +11,7 @@
 <body>
   <div id="static-prefix" class="visually-hidden">{% get_static_prefix %}</div>
   <div id="media-prefix" class="visually-hidden">{% get_media_prefix %}</div>
-  {% svelte "navbar" %}
+  {% block nav %}{% svelte "navbar" %}{% endblock %}
   {% block content %}Some content{% endblock %}
 </body>
 </html>