theluyuan/shynet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update litepicker and add ranges plugin

Browse Source 
Fix litepicker colors

Fix litepicker event

Add custom ranges to litepicker

Fix code style

Remove some date ranges

Fix date ranges

Replace yesterday date range with last 3 days

Update packages

Improve litepicker box shadow
This commit is contained in:
Paweł Jastrzębski 2021-04-21 11:47:50 +02:00 committed by R. Miles McCain
parent 3a01fefcff
commit 073bd94112
6 changed files with 234 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
package-lock.json generated
View File

@ -1,12 +1,153 @@
{
"name": "shynet",
"lockfileVersion": 2,
"requires": true,
"lockfileVersion": 1,
"packages": {
"": {
"license": "Apache-2.0",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.1",
"a17t": "^0.5.1",
"apexcharts": "^3.24.0",
"flag-icon-css": "^3.5.0",
"inter-ui": "^3.15.0",
"litepicker": "^2.0.11"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
"integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/a17t": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/a17t/-/a17t-0.5.1.tgz",
"integrity": "sha512-peIPrH9eDiu49LLzLlSTFFrXj6WLlEX3TRsUkqyyOHi/i58ilJ/eERnu7AcswXhuCBx+/2W9EUuHM+8iAq4ipg=="
},
"node_modules/apexcharts": {
"version": "3.26.2",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.26.2.tgz",
"integrity": "sha512-CD7bad4ygwc9rs9vOQDDagUcoJ1mcc9BwNSiQB14l6jiZBCQKrXxnG4I1ZjJ2MIel/Y5GmsJFs8HTcZBqpe/Ew==",
"dependencies": {
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
"svg.filter.js": "^2.0.2",
"svg.pathmorphing.js": "^0.1.3",
"svg.resize.js": "^1.4.3",
"svg.select.js": "^3.0.1"
},
"funding": {
"url": "https://github.com/apexcharts/apexcharts.js?sponsor=1"
}
},
"node_modules/flag-icon-css": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-3.5.0.tgz",
"integrity": "sha512-pgJnJLrtb0tcDgU1fzGaQXmR8h++nXvILJ+r5SmOXaaL/2pocunQo2a8TAXhjQnBpRLPtZ1KCz/TYpqeNuE2ew=="
},
"node_modules/inter-ui": {
"version": "3.18.1",
"resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.18.1.tgz",
"integrity": "sha512-W3LnAirp6a1ixpAHZwr9gH52KlOQOAp0oqbmIoGi2dAIlcIB7auJgLr9XFHUzYy2FoZ0Nf7aPe/nHMZB4/Zvdg=="
},
"node_modules/litepicker": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.11.tgz",
"integrity": "sha512-7MECMp2EDGIYDIz9QT24t9hWpgBD9JD57ZdDrbffNMGfbw0JVhBhvlYsyaIUuYhywtLvgmI5lfulM7XF2HLEkg=="
},
"node_modules/svg.draggable.js": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
"dependencies": {
"svg.js": "^2.0.1"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.easing.js": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
"integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
"dependencies": {
"svg.js": ">=2.3.x"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.filter.js": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
"integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
"dependencies": {
"svg.js": "^2.2.5"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.js": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
},
"node_modules/svg.pathmorphing.js": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
"dependencies": {
"svg.js": "^2.4.0"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.resize.js": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
"dependencies": {
"svg.js": "^2.6.5",
"svg.select.js": "^2.1.2"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.resize.js/node_modules/svg.select.js": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
"dependencies": {
"svg.js": "^2.2.5"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/svg.select.js": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
"dependencies": {
"svg.js": "^2.6.5"
},
"engines": {
"node": ">= 0.8.0"
}
}
},
"dependencies": {
"@fortawesome/fontawesome-free": {
"version": "5.15.1",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
"integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.3.tgz",
"integrity": "sha512-rFnSUN/QOtnOAgqFRooTA3H57JLDm0QEG/jPdk+tLQNL/eWd+Aok8g3qCI+Q1xuDPWpGW/i9JySpJVsq8Q0s9w=="
},
"a17t": {
"version": "0.5.1",
@ -14,9 +155,9 @@
"integrity": "sha512-peIPrH9eDiu49LLzLlSTFFrXj6WLlEX3TRsUkqyyOHi/i58ilJ/eERnu7AcswXhuCBx+/2W9EUuHM+8iAq4ipg=="
},
"apexcharts": {
"version": "3.24.0",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.24.0.tgz",
"integrity": "sha512-iT6czJCIVrmAtrcO90MZTQCvC+xi6R6Acf0jNH/d40FVTtCfcqECuKIh5iAMyOTtgUb7+fQ8rbadH2bm1kbL9Q==",
"version": "3.26.2",
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.26.2.tgz",
"integrity": "sha512-CD7bad4ygwc9rs9vOQDDagUcoJ1mcc9BwNSiQB14l6jiZBCQKrXxnG4I1ZjJ2MIel/Y5GmsJFs8HTcZBqpe/Ew==",
"requires": {
"svg.draggable.js": "^2.2.2",
"svg.easing.js": "^2.0.0",
@ -32,14 +173,14 @@
"integrity": "sha512-pgJnJLrtb0tcDgU1fzGaQXmR8h++nXvILJ+r5SmOXaaL/2pocunQo2a8TAXhjQnBpRLPtZ1KCz/TYpqeNuE2ew=="
},
"inter-ui": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.15.0.tgz",
"integrity": "sha512-6v0WK8FHkVYbNQZ7L9O5tP8280pgTBR9ydxqYwssMuUH6SZO70ZFK/NQ1Ob8nNmOOzpUJAzT0WE73ty96z1tAQ=="
"version": "3.18.1",
"resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.18.1.tgz",
"integrity": "sha512-W3LnAirp6a1ixpAHZwr9gH52KlOQOAp0oqbmIoGi2dAIlcIB7auJgLr9XFHUzYy2FoZ0Nf7aPe/nHMZB4/Zvdg=="
},
"litepicker": {
"version": "1.5.7",
"resolved": "https://registry.npmjs.org/litepicker/-/litepicker-1.5.7.tgz",
"integrity": "sha512-4L2ZcF8iqCE4A/qGWS3PbdFplZR1g751x5SsZ87zCRZ4LQN1Fgezarnvqi0eHk/kDWK7Qx0HZ9Y4bNznJMF1xA=="
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/litepicker/-/litepicker-2.0.11.tgz",
"integrity": "sha512-7MECMp2EDGIYDIz9QT24t9hWpgBD9JD57ZdDrbffNMGfbw0JVhBhvlYsyaIUuYhywtLvgmI5lfulM7XF2HLEkg=="
},
"svg.draggable.js": {
"version": "2.2.2",

2
package.json
View File

@ -22,6 +22,6 @@
"apexcharts": "^3.24.0",
"flag-icon-css": "^3.5.0",
"inter-ui": "^3.15.0",
"litepicker": "^1.5.7"
"litepicker": "^2.0.11"
}
}

42
shynet/dashboard/mixins.py
View File

@ -1,12 +1,11 @@
from datetime import datetime, time
from urllib.parse import urlparse
from django.utils import timezone
class DateRangeMixin:
def get_start_date(self):
if self.request.GET.get("startDate") != None:
if self.request.GET.get("startDate") is not None:
found_time = timezone.datetime.strptime(
self.request.GET.get("startDate"), "%Y-%m-%d"
)
@ -15,7 +14,7 @@ class DateRangeMixin:
return timezone.now() - timezone.timedelta(days=30)
def get_end_date(self):
if self.request.GET.get("endDate") != None:
if self.request.GET.get("endDate") is not None:
found_time = timezone.datetime.strptime(
self.request.GET.get("endDate"), "%Y-%m-%d"
)
@ -23,8 +22,45 @@ class DateRangeMixin:
else:
return timezone.now()
def get_date_ranges(self):
now = timezone.now()
return [
{
'name': 'Last 3 days',
'start': now - timezone.timedelta(days=2),
'end': now,
},
{
'name': 'Last 30 days',
'start': now - timezone.timedelta(days=29),
'end': now,
},
{
'name': 'Last 90 days',
'start': now - timezone.timedelta(days=89),
'end': now,
},
{
'name': 'This month',
'start': now.replace(day=1),
'end': now,
},
{
'name': 'Last month',
'start': now.replace(day=1, month=now.month - 1),
'end': now.replace(day=1, month=now.month) - timezone.timedelta(days=1),
},
{
'name': 'This year',
'start': now.replace(day=1, month=1),
'end': now,
},
]
def get_context_data(self, **kwargs):
data = super().get_context_data(**kwargs)
data["start_date"] = self.get_start_date()
data["end_date"] = self.get_end_date()
data["date_ranges"] = self.get_date_ranges()
return data

7
shynet/dashboard/templates/base.html
View File

@ -10,7 +10,10 @@
{% include 'a17t/includes/head.html' %}
<link rel="icon" type="image/png" href="{% static 'dashboard/images/icon.png' %}">
<script src="{% static 'apexcharts/dist/apexcharts.min.js'%}"></script>
<script src="{% static 'litepicker/dist/js/main.js' %}"></script>
<script src="{% static 'litepicker/dist/nocss/litepicker.js' %}"></script>
<script src="{% static 'litepicker/dist/plugins/ranges.js' %}"></script>
<link rel="stylesheet" href="{% static 'litepicker/dist/css/litepicker.css' %}">
<script src="{% static 'dashboard/js/base.js' %}"></script>
<link rel="stylesheet" href="{% static 'dashboard/css/global.css' %}">
<link rel="stylesheet" href="{% static 'flag-icon-css/css/flag-icon.min.css' %}">
@ -122,4 +125,4 @@
{% endblock %}
</body>
</html>
</html>

44
shynet/dashboard/templates/dashboard/includes/date_range.html
View File

@ -5,29 +5,45 @@
<input type="input" id="rangePicker" placeholder="Date range" class="input ~neutral bg-neutral-000 cursor-pointer w-auto" readonly>
<style>
:root {
--litepickerMonthButtonHover: var(--color-urge);
--litepickerDayColorHover: var(--color-urge);
--litepickerDayIsTodayColor: var(--color-urge);
--litepickerDayIsInRange: var(--color-urge-normal-fill);
--litepickerDayIsStartBg: var(--color-urge);
--litepickerDayIsEndBg: var(--color-urge);
--litepickerButtonApplyBg: var(--color-urge);
--litepicker-button-prev-month-color-hover: var(--color-urge);
--litepicker-button-next-month-color-hover: var(--color-urge);
--litepicker-day-color-hover: var(--color-urge);
--litepicker-is-today-color: var(--color-urge);
--litepicker-is-in-range-color: var(--color-urge-normal-fill);
--litepicker-is-start-color-bg: var(--color-urge);
--litepicker-is-end-color-bg: var(--color-urge);
--litepicker-button-apply-color-bg: var(--color-urge);
}
.litepicker .container__predefined-ranges, .litepicker .container__months {
box-shadow: var(--fallback-box-shadow-normal) !important;
}
</style>
<script>
var picker = new Litepicker({
element: document.getElementById('rangePicker'),
plugins: ['ranges'],
singleMode: false,
format: "MMM DD 'YY",
maxDate: new Date(),
startDate: Date.parse(document.getElementById("startDate").getAttribute("value")),
endDate: Date.parse(document.getElementById("endDate").getAttribute("value")),
onSelect: function (startDate, endDate) {
document.getElementById("startDate").setAttribute("value", startDate.getFullYear() +
"-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
document.getElementById("endDate").setAttribute("value", endDate.getFullYear() + "-" +
(endDate.getMonth() + 1) + "-" + endDate.getDate());
document.getElementById("datePicker").submit();
ranges: {
customRanges: {
{% for date_range in date_ranges %}
'{{ date_range.name }}': [
new Date('{{ date_range.start.isoformat }}'),
new Date('{{ date_range.end.isoformat }}')
],
{% endfor %}
}
}
});
</script>
picker.on('selected', (startDate, endDate) => {
document.getElementById("startDate").setAttribute("value", startDate.getFullYear() +
"-" + (startDate.getMonth() + 1) + "-" + startDate.getDate());
document.getElementById("endDate").setAttribute("value", endDate.getFullYear() + "-" +
(endDate.getMonth() + 1) + "-" + endDate.getDate());
document.getElementById("datePicker").submit();
});
</script>

6
shynet/shynet/settings.py
View File

@ -301,7 +301,11 @@ NPM_ROOT_PATH = "../"
NPM_FILE_PATTERNS = {
"a17t": [os.path.join("dist", "a17t.css"), os.path.join("dist", "tailwind.css")],
"apexcharts": [os.path.join("dist", "apexcharts.min.js")],
"litepicker": [os.path.join("dist", "js", "main.js")],
"litepicker": [
os.path.join("dist", "nocss", "litepicker.js"),
os.path.join("dist", "css", "litepicker.css"),
os.path.join("dist", "plugins", "ranges.js"),
],
"turbolinks": [os.path.join("dist", "turbolinks.js")],
"stimulus": [os.path.join("dist", "stimulus.umd.js")],
"inter-ui": [os.path.join("Inter (web)", "*")],