Argon Dashboard Django

Open-source Django Template crafted on top of Argon Dashboard, a modern Bootstrap 4 design. Start your development with a modern Bootstrap 4 Admin template for Django. Argon Dashboard is built with over 100 individual components, giving you the freedom of choosing and combining. If you want to code faster, with a smooth workflow, then you should try this template carefully developed with Django, a well-known Python Framework. Django codebase is crafted using a simple, modular structure that follows the best practices and provides authentication, database configuration, and deployment scripts for Docker and Gunicorn/Nginx stack.

Up-to-date dependencies: Django 3.2.6 LTS
SCSS compilation via Gulp
UI Kit: Argon Dashboard (Free Version)
Django Codebase - provided by AppSeed
UI-Ready app, SQLite Database, Django Native ORM
Modular design, clean code-base
Session-Based Authentication, Forms validation
Deployment scripts: Docker, Gunicorn / Nginx

Demo
Quick Start
Documentation
File Structure
Browser Support
Resources
Reporting Issues
Technical Support or Questions
Licensing
Useful Links

Demo

To authenticate use the default credentials test / ApS12_ZZs8 or create a new user on the registration page.

Argon Dashboard Django Login Page
Django Argon Charts - sample projects that showcase real information in charts

Quick start

UNZIP the sources or clone the private repository. After getting the code, open a terminal and navigate to the working directory, with product source code.

$ # Get the code
$ git clone https://github.com/creativetimofficial/argon-dashboard-django.git
$ cd argon-dashboard-django
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Start the app - custom port
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in browser: http://127.0.0.1:8000/

Note: To use the app, please access the registration page and create a new user. After authentication, the app will unlock the private pages.

Documentation

The documentation for the Argon Dashboard Django is hosted at our website.

Code-base structure

The project is coded using a simple and intuitive structure presented bellow:

< PROJECT ROOT >
   |
   |-- core/                               # Implements app configuration
   |    |-- settings.py                    # Defines Global Settings
   |    |-- wsgi.py                        # Start the app in production
   |    |-- urls.py                        # Define URLs served by all apps/nodes
   |
   |-- apps/
   |    |
   |    |-- home/                          # A simple app that serve HTML files
   |    |    |-- views.py                  # Serve HTML pages for authenticated users
   |    |    |-- urls.py                   # Define some super simple routes  
   |    |
   |    |-- authentication/                # Handles auth routes (login and register)
   |    |    |-- urls.py                   # Define authentication routes  
   |    |    |-- views.py                  # Handles login and registration  
   |    |    |-- forms.py                  # Define auth forms (login and register) 
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/                     # Templates used to render pages
   |         |-- includes/                 # HTML chunks and components
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Scripts common to all pages
   |         |
   |         |-- layouts/                   # Master pages
   |         |    |-- base-fullscreen.html  # Used by Authentication pages
   |         |    |-- base.html             # Used by common pages
   |         |
   |         |-- accounts/                  # Authentication pages
   |         |    |-- login.html            # Login page
   |         |    |-- register.html         # Register page
   |         |
   |         |-- home/                      # UI Kit Pages
   |              |-- index.html            # Index page
   |              |-- 404-page.html         # 404 page
   |              |-- *.html                # All other pages
   |
   |-- requirements.txt                     # Development modules - SQLite storage
   |
   |-- .env                                 # Inject Configuration via Environment
   |-- manage.py                            # Start the app - Django default start script
   |
   |-- ************************************************************************

The bootstrap flow

Django bootstrapper manage.py uses core/settings.py as the main configuration file
core/settings.py loads the app magic from .env file
Redirect the guest users to Login page
Unlock the pages served by app node for authenticated users

Recompile CSS

To recompile SCSS files, follow this setup:

Step #1 - Install tools

NodeJS 12.x or higher
Gulp - globally
- npm install -g gulp-cli
Yarn (optional)

Step #2 - Change the working directory to assets folder

$ cd apps/static/assets

Step #3 - Install modules (this will create a classic node_modules directory)

$ npm install
// OR
$ yarn

Step #4 - Edit & Recompile SCSS files

$ gulp scss

The generated file is saved in static/assets/css directory.

Deployment

The app is provided with a basic configuration to be executed in Docker, Gunicorn, and Waitress.

Docker execution

The application can be easily executed in a docker container. The steps:

Get the code

$ git clone https://github.com/creativetimofficial/argon-dashboard-django.git
$ cd argon-dashboard-django

Start the app in Docker

$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d

Visit http://localhost:85 in your browser. The app should be up & running.

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Demo: https://www.creative-tim.com/live/argon-dashboard-django
Download Page: https://www.creative-tim.com/product/argon-dashboard-django
Documentation: https://demos.creative-tim.com/argon-dashboard-django/docs/1.0/getting-started/getting-started-django.html
License Agreement: https://www.creative-tim.com/license
Support: https://www.creative-tim.com/contact-us
Issues: Github Issues Page

Reporting Issues

We use GitHub Issues as the official bug tracker for the Argon Dashboard Django. Here are some advices for our users that want to report an issue:

Make sure that you are using the latest version of the Argon Dashboard Django. Check the CHANGELOG from your dashboard on our website.
Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
Some issues may be browser-specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Copyright 2019 - present Creative Tim
Licensed under Creative Tim EULA

Useful Links

More products from Creative Tim
Tutorials
Freebies from Creative Tim
Affiliate Program (earn money)

Social Media

Twitter: https://twitter.com/CreativeTim
Facebook: https://www.facebook.com/CreativeTim
Dribbble: https://dribbble.com/creativetim
Instagram: https://www.instagram.com/CreativeTimOfficial

Argon Dashboard - Django Template - Provided by Creative Tim and AppSeed

[Bug] Datepicker not working for the dynamically added elements

Version

v1.2.0

Reproduction link

https://jsfiddle.net/8agyk0nu/28/#&togetherjs=M59CPKtfmx

Operating System

Linux

Device

Laptop

Browser & Version

Version 89.0.4389.90 (Official Build) Arch Linux (64-bit)

Steps to reproduce

Add dynamic content (html code) to a already loaded page (client side).
The client obtains the web page.
When a certain event happens (click a button) a JQuery script is launched to add dynamically content to the page.
The added content is a datepicker input with the following code :

<div id="datepicker-range-component" class="tab-pane tab-example-result fade show active" role="tabpanel" aria-labelledby="datepicker-range-component-tab">
             <div class="input-daterange datepicker row align-items-center">
               <div class="col">
                 <div class="form-group">
                   <div class="input-group input-group-alternative">
                     <div class="input-group-prepend">
                       <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                     </div>
                     <input class="form-control" placeholder="Start date" type="text" value="06/18/2020">
                   </div>
                 </div>
               </div>
               <div class="col">
                 <div class="form-group">
                   <div class="input-group input-group-alternative">
                     <div class="input-group-prepend">
                       <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                     </div>
                     <input class="form-control" placeholder="End date" type="text" value="06/22/2020">
                   </div>
                 </div>
               </div>
             </div>
           </div>

What is expected?

When clicking on the newly added item the date pop-up would open and allow the user to choose a range.

What is actually happening?

Nothing. When clicking on the input field nothing happens.

Solution

Fix the observer system so that it would take into account new datepicker items that are added to the page.

Additional comments

The date-picker library works for the statically rendered content (directly asked from the server) but not for the one that's added afterwards (once the page was loaded).
This can be seen even on the https://demos.creative-tim.com/argon-design-system/docs/plugins/datepicker.html website.
When adding an datepicker directly in the DOM (using the browser->elements->copy datepicker element -> paste element somewhere in the page) the script won't work. Is there a way to tell the library to take into account the newly created elements ?

creativetimofficial / argon-dashboard-django Goto Github PK