Test merge

This commit is contained in:
jokob-sk
2022-07-16 14:11:54 +10:00
3553 changed files with 249277 additions and 138612 deletions

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
.DS_Store
config/pialert.conf
db/

View File

@@ -7,7 +7,6 @@ Scan the devices connected to your WIFI / LAN and alert you the connection of
unknown devices. It also warns the disconnection of "always connected" devices.
![Main screen][main]
*(Apologies for my English and my limited knowledge of Python, php and
JavaScript)*
@@ -22,6 +21,9 @@ All credit for Pi.Alert goes to: [pucherot/Pi.Alert](https://github.com/pucherot
A pre-built image is available on :whale: Docker Hub: [jokobsk/Pi.Alert](https://registry.hub.docker.com/r/jokobsk/pi.alert).
The source :page_facing_up: Dockerfile is available [here](https://github.com/jokob-sk/Pi.Alert/blob/main/Dockerfile) with a detailed :books: [readme](https://github.com/jokob-sk/Pi.Alert/blob/main//dockerfiles/README.md) included.
![Main screen dark][main_dark]
optional Darkmode within this fork
## How it works
The system continuously scans the network for:
- New devices
@@ -53,6 +55,7 @@ In charge of:
described
- Store the information in the DB
- Report the changes detected by e-mail
- Optional speedtest for Device "Internet"
| ![Report 1][report1] | ![Report 2][report2] |
| -------------------- | -------------------- |
@@ -69,12 +72,25 @@ A web frontal that allows:
- Concurrent devices
- Down alerts
- IP's
- manuel nmap scans
- Optional speedtest for Device "Internet"
- ...
| ![Screen 1][screen1] | ![Screen 2][screen2] |
| -------------------- | -------------------- |
| ![Screen 3][screen3] | ![Screen 4][screen4] |
| ![Screen 5][screen5] | ![Screen 6][screen6] |
With the work of [jokob-sk/Pi.Alert](https://github.com/jokob-sk/Pi.Alert) and own extensions, the new maintenance page was added with various possibilities for maintenance and settings:
- Status Infos (active scans, database size, backup counter)
- Theme Selection (blue, red, green, yellow, black, purple)
- Language Selection (english, german)
- Light/Dark-Mode Switch
- Pause arp-scan
- DB maintenance tools
- DB Backup and Restore
![Maintain screen dark][maintain_dark]
# Installation
<!--- --------------------------------------------------------------------- --->
@@ -84,6 +100,9 @@ Linux distributions.
- One-step Automated Install:
#### `curl -sSL https://github.com/pucherot/Pi.Alert/raw/main/install/pialert_install.sh | bash`
- One-step Automated Install (forked) without Webserver:
#### `curl -sSL https://github.com/leiweibau/Pi.Alert/raw/main/install/pialert_install_no_webserver.sh | bash`
- [Installation Guide (step by step)](docs/INSTALL.md)
@@ -109,7 +128,7 @@ Linux distributions.
### Powered by:
| Product | Objetive |
| ------------ | -------------------------------------- |
| ------------- | ------------------------------------------------------- |
| Python | Programming language for the Back |
| PHP | Programming language for the Front-end |
| JavaScript | Programming language for the Front-end |
@@ -121,11 +140,20 @@ Linux distributions.
| arp-scan | Scan network using arp commands |
| Pi.hole | DNS Server with Ad-block |
| dnsmasq | DHCP Server |
| nmap | Network Scanner |
| zip | Filecompression Tool |
| speedtest-cli | Python SpeedTest https://github.com/sivel/speedtest-cli |
### License
GPL 3.0
[Read more here](LICENSE.txt)
Source of the animated GIF (Loading Animation)
https://commons.wikimedia.org/wiki/File:Loading_Animation.gif
Source of the selfhosted Fonts
https://github.com/adobe-fonts/source-sans
### Contact
pi.alert.application@gmail.com
@@ -138,6 +166,10 @@ Linux distributions.
[screen2]: ./docs/img/2_2_device_sessions.jpg "Screen 2"
[screen3]: ./docs/img/2_3_device_presence.jpg "Screen 3"
[screen4]: ./docs/img/3_presence.jpg "Screen 4"
[screen5]: ./docs/img/2_4_device_nmap.jpg "Screen 5"
[screen6]: ./docs/img/2_5_device_nmap_ready.jpg "Screen 6"
[report1]: ./docs/img/4_report_1.jpg "Report sample 1"
[report2]: ./docs/img/4_report_2.jpg "Report sample 2"
[main_dark]: /docs/img/1_devices_dark.jpg "Main screen dark"
[maintain_dark]: /docs/img/5_maintain.jpg "Maintain screen dark"

View File

@@ -34,6 +34,7 @@ import csv
#===============================================================================
PIALERT_BACK_PATH = os.path.dirname(os.path.abspath(__file__))
PIALERT_PATH = PIALERT_BACK_PATH + "/.."
STOPARPSCAN = PIALERT_PATH + "/db/setting_stoparpscan"
if (sys.version_info > (3,0)):
exec(open(PIALERT_PATH + "/config/version.conf").read())
@@ -81,8 +82,10 @@ def main ():
res = update_devices_MAC_vendors()
elif cycle == 'update_vendors_silent':
res = update_devices_MAC_vendors('-s')
else :
elif os.path.exists(STOPARPSCAN) == False :
res = scan_network()
elif os.path.exists(STOPARPSCAN) == True :
res = 0
# Check error
if res != 0 :
@@ -449,7 +452,13 @@ def execute_arpscan (pRetries):
# #101 - arp-scan subnet configuration
# Prepare command arguments
subnets = SCAN_SUBNETS.strip().split()
arpscan_args = ['sudo', 'arp-scan', '--ignoredups', '--retry=' + str(pRetries)] + subnets
# arp-scan for larger Networks like /16
# otherwise the system starts multiple processes. the 15min cronjob isn't necessary.
# the scan is about 4min on a /16 network
arpscan_args = ['sudo', 'arp-scan', '--ignoredups', '--bandwidth=512k', '--retry=3', SCAN_SUBNETS]
# Default arp-scan
# arpscan_args = ['sudo', 'arp-scan', SCAN_SUBNETS, '--ignoredups', '--retry=' + str(pRetries)]
# print (arpscan_args)
@@ -688,6 +697,17 @@ def print_scan_stats ():
(cycle,))
print (' IP Changes.........: ' + str ( sql.fetchone()[0]) )
# Add to History
sql.execute("SELECT * FROM Devices")
History_All = sql.fetchall()
History_All_Devices = len(History_All)
sql.execute("SELECT * FROM CurrentScan")
History_Online = sql.fetchall()
History_Online_Devices = len(History_Online)
History_Offline_Devices = History_All_Devices - History_Online_Devices
sql.execute ("INSERT INTO Online_History (Scan_Date, Online_Devices, Down_Devices, All_Devices) "+
"VALUES ( ?, ?, ?, ?)", (startTime, History_Online_Devices, History_Offline_Devices, History_All_Devices ) )
#-------------------------------------------------------------------------------
def create_new_devices ():
# arpscan - Insert events for new devices
@@ -931,7 +951,7 @@ def update_devices_data_from_scan ():
# New Apple devices -> Cycle 15
print_log ('Update devices - 6 Cycle for Apple devices')
sql.execute ("""UPDATE Devices SET dev_ScanCycle = 15
sql.execute ("""UPDATE Devices SET dev_ScanCycle = 1
WHERE dev_FirstConnection = ?
AND UPPER(dev_Vendor) LIKE '%APPLE%' """,
(startTime,) )
@@ -1174,6 +1194,9 @@ def email_reporting ():
SELECT dev_MAC FROM Devices WHERE dev_AlertEvents = 0
)""")
# Open text Template
# Open text Template
template_file = open(PIALERT_BACK_PATH + '/report_template.txt', 'r')
mail_text = template_file.read()

2013
back/speedtest-cli Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -1,3 +1,3 @@
VERSION = '3.02'
VERSION_YEAR = '2021'
VERSION_DATE = '2021-04-24'
VERSION = '3.5_leiweibau'
VERSION_YEAR = '2022'
VERSION_DATE = '2022-07-07'

Binary file not shown.

Before

Width:  |  Height:  |  Size: 168 KiB

After

Width:  |  Height:  |  Size: 231 KiB

BIN
docs/img/1_devices_dark.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 KiB

After

Width:  |  Height:  |  Size: 244 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 258 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 232 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 240 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 271 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

After

Width:  |  Height:  |  Size: 290 KiB

BIN
docs/img/5_maintain.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

View File

@@ -0,0 +1,17 @@
.fc-sat {
background-color: #444D56; }
.fc-sun {
background-color: #444D56; }
.fc-today {
background-color: #8D9AAC !important;
border: none !important;
}
.fc-cell-content {
background-color: #272c30;
}
.fc-widget-header {
background-color: #353c42;
}
.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead{
border-color: #353c42 !important;
}

679
front/css/dark-patch.css Normal file
View File

@@ -0,0 +1,679 @@
/* Pi-hole: A black hole for Internet advertisements
* (c) 2020 Pi-hole, LLC (https://pi-hole.net)
* Network-wide ad blocking via your own hardware.
*
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license.
*
* The colors used in this theme has been inspired by
* https://github.com/anvyst/adminlte-skin-midnight
*
* Additional fixes For Pi.Alert UI by leiweibau */
:root {
--datatable-bgcolor: rgba(64, 76, 88, 0.8);
}
html {
background-color: #353c42;
}
body {
background-color: #353c42;
color: #bec5cb;
}
h4 {
color: #44def1;
}
.content-header > .breadcrumb > li > a {
color: #bec5cb;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
border-top: 0;
}
.table > thead > tr.odd,
.table > tbody > tr.odd,
.table > tfoot > tr.odd {
background-color: #2a2f34;
}
.table > thead > tr.odd:hover,
.table > tbody > tr.odd:hover,
.table > tfoot > tr.odd:hover,
.table > thead > tr.even:hover,
.table > tbody > tr.even:hover,
.table > tfoot > tr.even:hover {
background-color: #1e2226;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
border: 1px solid #353c42;
}
.dataTables_wrapper input[type="search"] {
border-radius: 4px;
background-color: #353c42;
border: 0;
color: #bec5cb;
}
.dataTables_paginate .pagination li > a {
background-color: #353c42;
border-color: #353c42;
}
.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
cursor: not-allowed;
color: #bec5cb;
background-color: #353c42;
border-color: #353c42;
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
z-index: 2;
color: #bec5cb;
background-color: #54606b;
border-color: #54606b;
}
.wrapper,
.main-sidebar,
.left-side {
background-color: #272c30;
}
.user-panel > .info,
.user-panel > .info > a {
color: #fff;
}
.sidebar-menu > li.header {
color: #556068;
background-color: #1e2225;
}
.sidebar-menu > li > a {
border-left: 3px solid transparent;
}
.sidebar-menu > li:hover > a,
.sidebar-menu > li > a:focus,
.sidebar-menu > li.active > a {
color: #fff;
background-color: #22272a;
border-color: #3c8dbc;
}
.sidebar-menu > li > .treeview-menu {
margin: 0 1px;
background-color: #32393e;
}
.sidebar a {
color: #bec5cb;
}
.sidebar a:hover {
text-decoration: none;
}
.treeview-menu > li > a {
color: #949fa8;
}
.treeview-menu > li.active > a,
.treeview-menu > li > a:hover,
.treeview-menu > li > a:focus {
color: #fff;
}
.sidebar-form {
border-radius: 3px;
border: 1px solid #3e464c;
margin: 10px;
}
.sidebar-form input[type="text"],
.sidebar-form .btn {
box-shadow: none;
background-color: #3e464c;
border: 1px solid transparent;
height: 35px;
}
.sidebar-form input[type="text"] {
color: #666;
border-top-left-radius: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 2px;
}
.sidebar-form input[type="text"]:focus,
.sidebar-form input[type="text"]:focus + .input-group-btn .btn {
background-color: #fff;
color: #666;
}
.sidebar-form input[type="text"]:focus + .input-group-btn .btn {
border-left-color: #fff;
}
.sidebar-form .btn {
color: #999;
border-top-left-radius: 0;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 0;
}
.box,
.box-footer,
.info-box,
.box-comment,
.comment-text,
.comment-text .username {
color: #bec5cb;
background-color: #272c30;
}
.box-comments .box-comment {
border-bottom-color: #353c42;
}
.box-footer {
border-top: 1px solid #353c42;
}
.box-header.with-border {
border-bottom: 1px solid #353c42;
}
.box-solid,
.box {
border: 1px solid #272c30;
}
.box-solid > .box-header,
.box > .box-header {
color: #bec5cb;
}
.box-solid > .box-header .btn,
.box > .box-header .btn {
color: #bec5cb;
}
.box.box-info,
.box.box-primary,
.box.box-success,
.box.box-warning,
.box.box-danger {
border-top-width: 3px;
}
.box.box-info {
border-top-color: #00c0ef;
}
.box.box-primary {
border-top-color: #075383;
}
.box.box-success {
border-top-color: #00a65a;
}
.box.box-warning {
border-top-color: #ff851b;
}
.box.box-danger {
border-top-color: #dd4b39;
}
.main-header .navbar {
background-color: #272c30;
}
.main-header .navbar .nav > li > a,
.main-header .navbar .nav > li > .navbar-text {
color: #bec5cb;
max-height: 50px;
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:active,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a,
.main-header .navbar .nav .open > a:hover,
.main-header .navbar .nav .open > a:focus,
.main-header .navbar .nav > .active > a {
background-color: rgba(0, 0, 0, 0.1);
color: #f6f6f6;
}
.main-header .navbar .sidebar-toggle {
color: #bec5cb;
}
.main-header .navbar .sidebar-toggle:hover {
color: #f6f6f6;
background-color: rgba(0, 0, 0, 0.1);
}
.timeline li .timeline-item {
color: #bec5cb;
background-color: #272c30;
border-color: #353c42;
}
.timeline li .timeline-header {
border-bottom-color: #353c42;
}
.nav-stacked > li > a {
color: #bec5cb;
}
.nav-stacked > li > a:hover {
color: white;
background-color: #1e2226;
}
.content-wrapper,
.right-side {
background-color: #353c42;
}
.main-footer,
.nav-tabs-custom {
background-color: #272c30;
border-top-color: #353c42;
color: #bec5cb;
}
.main-footer .nav-tabs,
.nav-tabs-custom .nav-tabs {
background-color: #30383f;
border-bottom-color: #2f363b;
}
.main-footer .tab-content,
.nav-tabs-custom .tab-content {
background-color: #30383f;
}
.nav-tabs-custom > .nav-tabs {
background: rgba(64, 72, 80, 0.666);
}
.nav-tabs-custom > .nav-tabs > li {
margin-right: 1px;
color: #bec5cb;
}
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
border-left-color: #30383f;
border-right-color: #30383f;
background-color: #30383f;
color: #bec5cb;
}
.nav-tabs-custom > .nav-tabs > li:not(.active):hover {
border-top-color: #d2d6de;
background-color: transparent;
}
.nav-tabs-custom > .nav-tabs > li > a {
color: #8e959b;
}
.nav-tabs-custom > .nav-tabs > li > a:focus {
color: #3c8dbc;
}
.nav-tabs-custom > .nav-tabs > li:hover > a,
.nav-tabs-custom > .nav-tabs > li.active:hover > a {
background-color: #353c42;
color: #bec5cb;
}
.list-group {
color: #bec5cb;
background-color: #272c30;
}
.list-group .list-group-item {
border-color: #353c42;
background-color: #272c30;
}
.input-group .input-group-addon {
border-right: 1px solid #272c30;
}
.select2 .select2-selection {
background-color: #353c42;
color: #bec5cb;
border: 1px solid #353c42;
}
.select2 .select2-selection .select2-container--default,
.select2 .select2-selection .select2-selection--single,
.select2 .select2-selection .select2-selection--multiple,
.select2 .select2-selection .select2-selection__rendered {
color: #bec5cb;
}
.select2-dropdown {
background-color: #353c42;
color: #bec5cb;
border: 1px solid #353c42;
}
.select2-dropdown .select2-search__field {
background-color: #272c30;
color: #bec5cb;
border: 1px solid #353c42;
}
.select2-container--default.select2-container--open {
background-color: #272c30;
}
.layout-boxed {
background: url("../../img/boxed-bg-dark.png") repeat fixed;
}
.not-used {
background-color: #eee;
}
.not-used:hover {
background-color: #c5c5c5;
}
.used {
background-color: #fff;
}
.used:hover {
background-color: #ddd;
}
.graphs-grid {
background-color: rgba(255, 255, 255, 0.2);
}
.graphs-ticks {
color: #b8c7ce;
}
.queries-permitted {
background-color: #00a65a;
}
.queries-blocked {
background-color: #999;
}
.progress {
background-color: #333;
}
.bg-green {
background-color: #005c32 !important;
}
.bg-aqua {
background-color: #007997 !important;
}
.bg-yellow {
background-color: #b1720c !important;
}
.bg-red {
background-color: #913225 !important;
}
code,
pre {
padding: 2px 4px;
font-size: 90%;
color: #bec5cb;
background-color: #353c42;
border-radius: 4px;
}
/* Used in the Query Log table */
.text-green-light {
color: #5ca314 !important;
}
.text-green {
color: #00aa60 !important;
}
.text-orange {
color: #b1720c !important;
}
.text-red {
color: #bd2c19 !important;
}
.text-vivid-blue {
color: #007997 !important;
}
td.highlight {
background-color: rgba(255, 204, 0, 0.333);
}
.btn-default {
box-shadow: none;
background-color: #3e464c;
color: #bec5cb;
border: 1px solid #353c42;
}
/* Used in debug log page */
.log-red {
color: #ff4038;
}
.log-green {
color: #4c4;
}
.log-yellow {
color: #fb0;
}
.log-blue {
color: #48f;
}
.log-purple {
color: #b8e;
}
.log-cyan {
color: #0df;
}
.log-gray {
color: #999;
}
#output {
border-color: #505458;
background: #272c30;
}
/* Used by the long-term pages */
.daterangepicker {
background-color: #3e464c;
border-radius: 4px;
border: 1px solid #353c42;
}
.daterangepicker .ranges li:hover {
background-color: #353c42;
}
.daterangepicker .ranges li.active {
background-color: #1e2226; /* Color also used in table pagination */
}
.daterangepicker .calendar-table {
background-color: #3e464c;
border-radius: 4px;
border: 1px solid #353c42;
}
.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
background-color: #485158;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
background-color: #1e2226;
}
.daterangepicker td.active,
.daterangepicker td.active:hover,
.daterangepicker td.in-range:hover {
background-color: #225e92;
}
.daterangepicker td.in-range {
background-color: #1e2226;
color: #bec5cb;
}
input,
select,
select.form-control,
.form-group .input-group-addon,
.input-group .input-group-addon,
.form-group input,
.input-group input,
.form-group textarea,
.input-group textarea,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect,
.form-control,
div.dataTables_wrapper div.dataTables_length select {
background-color: #353c42;
color: #bec5cb;
border: 1px solid #3d444b;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: #353c42;
opacity: 1;
}
.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
background-color: #4c5761;
color: #bec5cb;
border: 1px solid #171c20;
}
.table-striped > tbody > tr:nth-of-type(2n + 1) {
background-color: #2d343a;
}
.panel,
.panel-body,
.panel-default > .panel-heading {
background-color: #3e464c;
border-radius: 4px;
border: 1px solid #353c42;
color: #bec5cb;
}
.box.box-solid.box-info,
.box.box-solid.box-info > .box-header {
color: #bec5cb;
background-color: #367fa9 !important;
border: 1px solid #367fa9;
}
input[type="password"]::-webkit-credentials-auto-fill-button {
background: #bfc5ca;
}
input[type="password"]::-webkit-caps-lock-indicator {
filter: invert(100%);
}
.network-never {
background-color: #661b02;
}
.network-recent {
background-color: #114100;
}
.network-old {
background-color: #525200;
}
.network-older {
background-color: #502b00;
}
.network-gradient {
background-image: linear-gradient(to right, #114100 0%, #525200 100%);
}
.icheckbox_polaris,
.icheckbox_futurico,
.icheckbox_minimal-blue {
margin-right: 10px;
}
.iradio_polaris,
.iradio_futurico,
.iradio_minimal-blue {
margin-right: 8px;
}
/* Overlay box with spinners as shown during data collection for graphs */
.box .overlay,
.overlay-wrapper .overlay {
z-index: 50;
background-color: rgba(53, 60, 66, 0.733);
border-radius: 3px;
}
.box .overlay > .fa,
.overlay-wrapper .overlay > .fa,
.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
color: #bec5cb !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
background-color: #353c42bb;
padding: 10px;
}
.modal-content {
background: #272c30;
}
.modal-header {
border-bottom-color: #353c42;
}
.modal-footer {
border-top-color: #353c42;
}
.close {
color: #383838;
}
/*** Fix login input visual misalignment ***/
#loginform,
#loginform input {
color: rgb(120, 127, 133);
}
.login-options input,
.login-options [class*="icheck-"] > input:first-child + input[type="hidden"] + label::before,
.login-options [class*="icheck-"] > input:first-child + label::before {
background: none;
border-color: rgb(120, 127, 133);
}
/*** Additional fixes For Pi.Alert UI ***/
.small-box {
border-radius: 10px;
}
.pa-small-box-aqua .inner {
background-color: rgb(45,108,133);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.pa-small-box-green .inner {
background-color: rgb(31,76,46);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.pa-small-box-yellow .inner {
background-color: rgb(151,104,37);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.pa-small-box-red .inner {
background-color: rgb(120,50,38);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.pa-small-box-gray .inner {
background-color: #777;
color: rgba(20,20,20,30%);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.pa-small-box-gray .inner h3 {
color: #bbb;
}
.text-gray-20 {
color: rgba(220,220,220,30%);
}
.bg-gray {
background-color: #888888 !important;
}
.badge.bg-green {
background-color: #00A000 !important;
}
.badge.bg-gray {
background-color: #888 !important;
}
#txtRecord {
background-color: #353c42;
border-color: #888888;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
background-color: rgb(189,192,198);
color: #444;
}
.db_info_table_cell:nth-child(1) {background: #272c30}
.db_info_table_cell:nth-child(2) {background: #272c30}
.db_tools_table_cell_a:nth-child(1) {background: #272c30}
.db_tools_table_cell_a:nth-child(2) {background: #272c30}
.db_tools_table_cell_b:nth-child(1) {background: #272c30}
.db_tools_table_cell_b:nth-child(2) {background: #272c30}
.db_info_table {
display: table;
border-spacing: 0em;
font-weight: 400;
font-size: 15px;
width: 100%;
margin: auto;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@@ -0,0 +1,4 @@
@font-face {
font-family: 'Source Sans Pro';
src: url('font/SourceSans3-Regular.otf.woff2') format('woff2');
}

View File

@@ -17,7 +17,6 @@
--color-red: #dd4b39;
}
/* -----------------------------------------------------------------------------
Text Classes
----------------------------------------------------------------------------- */
@@ -86,7 +85,6 @@
color: gray;
}
/* -----------------------------------------------------------------------------
Customized Main Menu
----------------------------------------------------------------------------- */
@@ -98,11 +96,14 @@
margin-left: 150px;
}
.main-sidebar, .left-side {
.main-sidebar,
.left-side {
width: 150px;
}
.content-wrapper, .right-side, .main-footer {
.content-wrapper,
.right-side,
.main-footer {
margin-left: 150px;
}
@@ -115,20 +116,20 @@
margin: 0;
}
.content-wrapper, .main-footer {
.content-wrapper,
.main-footer {
margin-left: 0px;
}
}
.sidebar-open .content-wrapper, .sidebar-open .main-footer {
.sidebar-open .content-wrapper,
.sidebar-open .main-footer {
-webkit-transform: translate(150px, 0);
-ms-transform: translate(150px, 0);
-o-transform: translate(150px, 0);
transform: translate(150px, 0)
}
.skin-yellow-light .sidebar-menu>li>a:hover {
background: #f0f0f0;
border-left-color: rgb(243, 156, 18);
@@ -139,8 +140,6 @@
border-left-color: rgb(243, 156, 18);
}
/* -----------------------------------------------------------------------------
Customized Boxes
----------------------------------------------------------------------------- */
@@ -160,7 +159,6 @@
font-size: 18px;
}
/* -------------------------------------------------------------------------- */
.pa-small-box-aqua {
border-top: 3px solid #00c0ef;
@@ -256,7 +254,6 @@
color: #a0a0a0;
}
/* -----------------------------------------------------------------------------
Customized Box Borders
----------------------------------------------------------------------------- */
@@ -276,7 +273,6 @@
border-top-color: #dd4b39;
}
/* -----------------------------------------------------------------------------
Custom Border
----------------------------------------------------------------------------- */
@@ -292,7 +288,6 @@
border-bottom-width: 3px
}
/* -----------------------------------------------------------------------------
Customized Tabs
----------------------------------------------------------------------------- */
@@ -306,7 +301,6 @@
padding: 10px 10px;
}
/* -----------------------------------------------------------------------------
Customized Menu dropdown
----------------------------------------------------------------------------- */
@@ -316,7 +310,6 @@
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
}
/* -----------------------------------------------------------------------------
Default Table config
----------------------------------------------------------------------------- */
@@ -324,11 +317,15 @@
padding: 4px;
}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
background-color: #FFFFD0;
}
.dataTables_info, .dataTables_paginate, .dataTables_length, .dataTables_filter {
.dataTables_info,
.dataTables_paginate,
.dataTables_length,
.dataTables_filter {
color: #B0B0B0;
}
@@ -350,13 +347,15 @@
background-color: #ffb060;
}
.pa-btn-records, .pa-btn-records:hover, .pa-btn-records:focus, .pa-btn-records:active {
.pa-btn-records,
.pa-btn-records:hover,
.pa-btn-records:focus,
.pa-btn-records:active {
border-color: #ddd;
background-color: #f4f4f4;
cursor: default;
}
/* -----------------------------------------------------------------------------
Customized Full Calendar
----------------------------------------------------------------------------- */
@@ -380,7 +379,9 @@
background-color: #FFF0E0;
}
.fc-resized-row { height: 26px !important; }
.fc-resized-row {
height: 26px !important;
}
.fc-transparent-border {
border-Color: transparent !important;
@@ -395,8 +396,6 @@
border-right: 5px solid #606060;
}
/* -----------------------------------------------------------------------------
Spin
----------------------------------------------------------------------------- */
@@ -440,7 +439,8 @@
border-color: #c3e6cb;
border-radius: 5px;
max-width: 1000px; /* 80% wrapper 1250px */
max-width: 1000px;
/* 80% wrapper 1250px */
width: 80%;
z-index: 9999;
@@ -452,3 +452,78 @@
display: none;
}
.dbtools-button {
display: inline-block;
width: 160px;
height: 60px;
white-space: normal;
word-wrap: break-word;
font-size: 16px;
border-radius: 10px;
padding: 4px;
}
.db_info_table_cell:nth-child(1) {
background: white
}
.db_info_table_cell:nth-child(2) {
background: white
}
.db_tools_table_cell_a:nth-child(1) {
background: white
}
.db_tools_table_cell_a:nth-child(2) {
background: white
}
.db_tools_table_cell_b:nth-child(1) {
background: white
}
.db_tools_table_cell_b:nth-child(2) {
background: white
}
.db_info_table {
display: table;
border-spacing: 0em;
font-weight: 400;
font-size: 15px;
width: 100%;
margin: auto;
}
.db_info_table_row {
display: table-row;
padding: 3px;
}
.db_info_table_cell {
display: table-cell;
padding: 3px;
padding-left: 10px;
}
.db_tools_table_cell_a {
display: table-cell;
text-align: center;
padding: 10px;
min-width: 180px;
width: 20%;
vertical-align: middle;
}
.db_tools_table_cell_b {
display: table-cell;
text-align: justify;
font-size: 16px;
vertical-align: middle;
padding: 10px;
}
.ajax_scripts_loading {
background-image: url('../img/Loading_Animation.gif');
background-repeat: no-repeat;
background-position: center;
height: 50px;
}

View File

@@ -25,11 +25,11 @@
<!-- period selector -->
<span class="breadcrumb" style="top: 0px;">
<select class="form-control" id="period" onchange="javascript: periodChanged();">
<option value="1 day">Today</option>
<option value="7 days">Last Week</option>
<option value="1 month" selected>Last Month</option>
<option value="1 year">Last Year</option>
<option value="100 years">All info</option>
<option value="1 day"><?php echo $pia_lang['DevDetail_Periodselect_today'];?></option>
<option value="7 days"><?php echo $pia_lang['DevDetail_Periodselect_LastWeek'];?></option>
<option value="1 month" selected><?php echo $pia_lang['DevDetail_Periodselect_LastMonth'];?></option>
<option value="1 year"><?php echo $pia_lang['DevDetail_Periodselect_LastYear'];?></option>
<option value="100 years"><?php echo $pia_lang['DevDetail_Periodselect_All'];?></option>
</select>
</span>
</section>
@@ -45,7 +45,7 @@
<div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
<div class="inner"> <h3 id="deviceStatus" style="margin-left: 0em"> -- </h3> </div>
<div class="icon"> <i id="deviceStatusIcon" class=""></i> </div>
<div class="small-box-footer pa-small-box-footer"> Current Status <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['DevDetail_Shortcut_CurrentStatus'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -56,7 +56,7 @@
<div class="small-box bg-green pa-small-box-green pa-small-box-2">
<div class="inner"> <h3 id="deviceSessions"> -- </h3> </div>
<div class="icon"> <i class="fa fa-plug"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Sesions <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['DevDetail_Shortcut_Sessions'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -67,7 +67,7 @@
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="deviceEvents" style="margin-left: 0em"> -- </h3> </div>
<div id="deviceEventsIcon" class="icon"> <i class="fa fa-calendar"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Presence <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['DevDetail_Shortcut_Presence'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -78,7 +78,7 @@
<div class="small-box bg-red pa-small-box-red pa-small-box-2">
<div class="inner"> <h3 id="deviceDownAlerts"> -- </h3> </div>
<div class="icon"> <i class="fa fa-warning"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Down Alerts <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['DevDetail_Shortcut_DownAlerts'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -94,10 +94,11 @@
<div id="navDevice" class="nav-tabs-custom">
<ul class="nav nav-tabs" style="fon t-size:16px;">
<li> <a id="tabDetails" href="#panDetails" data-toggle="tab"> Details </a></li>
<li> <a id="tabSessions" href="#panSessions" data-toggle="tab"> Sessions </a></li>
<li> <a id="tabPresence" href="#panPresence" data-toggle="tab"> Presence </a></li>
<li> <a id="tabEvents" href="#panEvents" data-toggle="tab"> Events </a></li>
<li> <a id="tabDetails" href="#panDetails" data-toggle="tab"> <?php echo $pia_lang['DevDetail_Tab_Details'];?> </a></li>
<li> <a id="tabNmap" href="#panNmap" data-toggle="tab"> <?php echo $pia_lang['DevDetail_Tab_Nmap'];?> </a></li>
<li> <a id="tabSessions" href="#panSessions" data-toggle="tab"> <?php echo $pia_lang['DevDetail_Tab_Sessions'];?> </a></li>
<li> <a id="tabPresence" href="#panPresence" data-toggle="tab"> <?php echo $pia_lang['DevDetail_Tab_Presence'];?> </a></li>
<li> <a id="tabEvents" href="#panEvents" data-toggle="tab"> <?php echo $pia_lang['DevDetail_Tab_Events'];?> </a></li>
<div class="btn-group pull-right">
<button type="button" class="btn btn-default" style="padding: 10px; min-width: 30px;"
@@ -124,12 +125,12 @@
<div class="row">
<!-- column 1 -->
<div class="col-lg-4 col-sm-6 col-xs-12">
<h4 class="bottom-border-aqua">Main Info</h4>
<h4 class="bottom-border-aqua"><?php echo $pia_lang['DevDetail_MainInfo_Title'];?></h4>
<div class="box-body form-horizontal">
<!-- MAC -->
<div class="form-group">
<label class="col-sm-3 control-label">MAC</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_mac'];?></label>
<div class="col-sm-9">
<input class="form-control" id="txtMAC" type="text" readonly value="--">
</div>
@@ -137,7 +138,7 @@
<!-- Name -->
<div class="form-group">
<label class="col-sm-3 control-label">Name</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_Name'];?></label>
<div class="col-sm-9">
<input class="form-control" id="txtName" type="text" value="--">
</div>
@@ -145,7 +146,7 @@
<!-- Owner -->
<div class="form-group">
<label class="col-sm-3 control-label">Owner</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_Owner'];?></label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtOwner" type="text" value="--">
@@ -161,7 +162,7 @@
<!-- Type -->
<div class="form-group">
<label class="col-sm-3 control-label">Type</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_Type'];?></label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtDeviceType" type="text" value="--">
@@ -181,7 +182,7 @@
<!-- Vendor -->
<div class="form-group">
<label class="col-sm-3 control-label">Vendor</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_Vendor'];?></label>
<div class="col-sm-9">
<input class="form-control" id="txtVendor" type="text" value="--">
</div>
@@ -189,7 +190,7 @@
<!-- Favorite -->
<div class="form-group">
<label class="col-sm-3 control-label">Favorite</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_Favorite'];?></label>
<div class="col-sm-9" style="padding-top:6px;">
<input class="checkbox blue hidden" id="chkFavorite" type="checkbox">
</div>
@@ -197,7 +198,7 @@
<!-- Group -->
<div class="form-group">
<label class="col-sm-3 control-label">Group</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_Group'];?></label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtGroup" type="text" value="--">
@@ -218,7 +219,7 @@
<!-- Location -->
<div class="form-group">
<label class="col-sm-3 control-label">Location</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_Location'];?></label>
<div class="col-sm-9">
<div class="input-group">
<input class="form-control" id="txtLocation" type="text" value="--">
@@ -241,7 +242,7 @@
<!-- Comments -->
<div class="form-group">
<label class="col-sm-3 control-label">Comments</label>
<label class="col-sm-3 control-label"><?php echo $pia_lang['DevDetail_MainInfo_Comments'];?></label>
<div class="col-sm-9">
<textarea class="form-control" rows="3" id="txtComments"></textarea>
</div>
@@ -252,12 +253,12 @@
<!-- column 2 -->
<div class="col-lg-4 col-sm-6 col-xs-12">
<h4 class="bottom-border-aqua">Session Info</h4>
<h4 class="bottom-border-aqua"><?php echo $pia_lang['DevDetail_SessionInfo_Title'];?></h4>
<div class="box-body form-horizontal">
<!-- Status -->
<div class="form-group">
<label class="col-sm-5 control-label">Status</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_SessionInfo_Status'];?></label>
<div class="col-sm-7">
<input class="form-control" id="txtStatus" type="text" readonly value="--">
</div>
@@ -265,7 +266,7 @@
<!-- First Session -->
<div class="form-group">
<label class="col-sm-5 control-label">First Session</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_SessionInfo_FirstSession'];?></label>
<div class="col-sm-7">
<input class="form-control" id="txtFirstConnection" type="text" readonly value="--">
</div>
@@ -273,7 +274,7 @@
<!-- Last Session -->
<div class="form-group">
<label class="col-sm-5 control-label">Last Session</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_SessionInfo_LastSession'];?></label>
<div class="col-sm-7">
<input class="form-control" id="txtLastConnection" type="text" readonly value="--">
</div>
@@ -281,7 +282,7 @@
<!-- Last IP -->
<div class="form-group">
<label class="col-sm-5 control-label">Last IP</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_SessionInfo_LastIP'];?></label>
<div class="col-sm-7">
<input class="form-control" id="txtLastIP" type="text" readonly value="--">
</div>
@@ -289,7 +290,7 @@
<!-- Static IP -->
<div class="form-group">
<label class="col-sm-5 control-label">Static IP</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_SessionInfo_StaticIP'];?></label>
<div class="col-sm-7" style="padding-top:6px;">
<input class="checkbox blue hidden" id="chkStaticIP" type="checkbox">
</div>
@@ -300,21 +301,21 @@
<!-- column 3 -->
<div class="col-lg-4 col-sm-6 col-xs-12">
<h4 class="bottom-border-aqua">Events & Alerts config</h4>
<h4 class="bottom-border-aqua"><?php echo $pia_lang['DevDetail_EveandAl_Title'];?></h4>
<div class="box-body form-horizontal">
<!-- Scan Cycle -->
<div class="form-group">
<label class="col-sm-5 control-label">Scan Cycle</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_EveandAl_ScanCycle'];?></label>
<div class="col-sm-7">
<div class="input-group">
<input class="form-control" id="txtScanCycle" type="text" value="--" readonly style="background-color: #fff;">
<input class="form-control" id="txtScanCycle" type="text" value="--" readonly >
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="dropdownButtonScanCycle">
<span class="fa fa-caret-down"></span></button>
<ul id="dropdownScanCycle" class="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)" onclick="setTextValue('txtScanCycle','1 min')"> Scan 1 min every 5 min</a></li>
<li><a href="javascript:void(0)" onclick="setTextValue('txtScanCycle','15 min');"> Scan 12 min every 15 min</a></li>
<!-- <li><a href="javascript:void(0)" onclick="setTextValue('txtScanCycle','15 min');"> Scan 12 min every 15 min</a></li> -->
<li><a href="javascript:void(0)" onclick="setTextValue('txtScanCycle','0 min');"> Don't Scan</a></li>
</ul>
</div>
@@ -324,7 +325,7 @@
<!-- Alert events -->
<div class="form-group">
<label class="col-sm-5 control-label">Alert All Events</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_EveandAl_AlertAllEvents'];?></label>
<div class="col-sm-7" style="padding-top:6px;">
<input class="checkbox blue hidden" id="chkAlertEvents" type="checkbox">
</div>
@@ -332,7 +333,7 @@
<!-- Alert Down -->
<div class="form-group">
<label class="col-sm-5 control-label">Alert Down</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_EveandAl_AlertDown'];?></label>
<div class="col-sm-7" style="padding-top:6px;">
<input class="checkbox red hidden" id="chkAlertDown" type="checkbox">
</div>
@@ -340,10 +341,10 @@
<!-- Skip Notifications -->
<div class="form-group">
<label class="col-sm-5 control-label" style="padding-top: 0px; padding-left: 0px;">Skip repeated notifications during</label>
<label class="col-sm-5 control-label" style="padding-top: 0px; padding-left: 0px;"><?php echo $pia_lang['DevDetail_EveandAl_Skip'];?></label>
<div class="col-sm-7">
<div class="input-group">
<input class="form-control" id="txtSkipRepeated" type="text" value="--" readonly style="background-color: #fff;">
<input class="form-control" id="txtSkipRepeated" type="text" value="--" readonly >
<div class="input-group-btn">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="dropdownButtonSkipRepeated">
<span class="fa fa-caret-down"></span></button>
@@ -361,7 +362,7 @@
<!-- New Device -->
<div class="form-group">
<label class="col-sm-5 control-label">New Device:</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_EveandAl_NewDevice'];?>:</label>
<div class="col-sm-7" style="padding-top:6px;">
<input class="checkbox orange hidden" id="chkNewDevice" type="checkbox">
</div>
@@ -369,7 +370,7 @@
<!-- Archived -->
<div class="form-group">
<label class="col-sm-5 control-label">Archived:</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_EveandAl_Archived'];?>:</label>
<div class="col-sm-7" style="padding-top:6px;">
<input class="checkbox blue hidden" id="chkArchived" type="checkbox">
</div>
@@ -377,7 +378,7 @@
<!-- Randomized MAC -->
<div class="form-group" >
<label class="col-sm-5 control-label">Random MAC:</label>
<label class="col-sm-5 control-label"><?php echo $pia_lang['DevDetail_EveandAl_RandomMAC'];?>:</label>
<div class="col-sm-7" style="padding-top:6px;">
<span id="iconRandomMACinactive" data-toggle="tooltip" data-placement="right" title="Random MAC is Inactive">
<i style="font-size: 24px;" class="text-gray glyphicon glyphicon-random"></i> &nbsp &nbsp </span>
@@ -385,7 +386,7 @@
<span id="iconRandomMACactive" data-toggle="tooltip" data-placement="right" title="Random MAC is Active" class="hidden">
<i style="font-size: 24px;" class="text-yellow glyphicon glyphicon-random"></i> &nbsp &nbsp </span>
<a href="https://github.com/pucherot/Pi.Alert/blob/main/docs/RAMDOM_MAC.md" target="_blank" style="color: #777;">
<a href="https://github.com/leiweibau/Pi.Alert/blob/main/docs/RAMDOM_MAC.md" target="_blank" style="color: #777;">
<i class="fa fa-info-circle"></i> </a>
</div>
</div>
@@ -397,11 +398,11 @@
<div class="col-xs-12">
<div class="pull-right">
<button type="button" class="btn btn-default pa-btn pa-btn-delete" style="margin-left:0px;"
id="btnDelete" onclick="askDeleteDevice()"> Delete Device </button>
id="btnDelete" onclick="askDeleteDevice()"> <?php echo $pia_lang['DevDetail_button_Delete'];?> </button>
<button type="button" class="btn btn-default pa-btn" style="margin-left:6px;"
id="btnRestore" onclick="getDeviceData(true)"> Reset Changes </button>
id="btnRestore" onclick="getDeviceData(true)"> <?php echo $pia_lang['DevDetail_button_Reset'];?> </button>
<button type="button" disabled class="btn btn-primary pa-btn" style="margin-left:6px; "
id="btnSave" onclick="setDeviceData()" > Save </button>
id="btnSave" onclick="setDeviceData()" > <?php echo $pia_lang['DevDetail_button_Save'];?> </button>
</div>
</div>
@@ -415,17 +416,97 @@
<table id="tableSessions" class="table table-bordered table-hover table-striped ">
<thead>
<tr>
<th>Order</th>
<th>Connection</th>
<th>Disconnection</th>
<th>Duration</th>
<th>IP</th>
<th>Additional info</th>
<th><?php echo $pia_lang['DevDetail_SessionTable_Order'];?></th>
<th><?php echo $pia_lang['DevDetail_SessionTable_Connection'];?></th>
<th><?php echo $pia_lang['DevDetail_SessionTable_Disconnection'];?></th>
<th><?php echo $pia_lang['DevDetail_SessionTable_Duration'];?></th>
<th><?php echo $pia_lang['DevDetail_SessionTable_IP'];?></th>
<th><?php echo $pia_lang['DevDetail_SessionTable_Additionalinfo'];?></th>
</tr>
</thead>
</table>
</div>
<!-- tab page 5 ------------------------------------------------------------ -->
<div class="tab-pane fade" id="panNmap">
<?php
if ($_REQUEST['mac'] == 'Internet') {
?>
<h4 class="">Online Speedtest</h4>
<div style="width:100%; text-align: center; margin-bottom: 50px;">
<button type="button" id="speedtestcli" class="btn btn-default pa-btn" style="margin: auto;" onclick="speedtestcli()">Start Speedtest</button>
</div>
<script>
function speedtestcli() {
$( "#scanoutput" ).empty();
$.ajax({
method: "POST",
url: "./php/server/speedtestcli.php",
beforeSend: function() { $('#scanoutput').addClass("ajax_scripts_loading"); },
complete: function() { $('#scanoutput').removeClass("ajax_scripts_loading"); },
success: function(data, textStatus) {
$("#scanoutput").html(data);
}
})
}
</script>
<?php
}
?>
<h4 class="">Nmap Scans</h4>
<div style="width:100%; text-align: center;">
<script>
setTimeout(function(){
document.getElementById('piamanualnmap_fast').innerHTML='<?php echo $pia_lang['DevDetail_Nmap_buttonFast'];?> (' + document.getElementById('txtLastIP').value +')';
document.getElementById('piamanualnmap_normal').innerHTML='<?php echo $pia_lang['DevDetail_Nmap_buttonDefault'];?> (' + document.getElementById('txtLastIP').value +')';
document.getElementById('piamanualnmap_detail').innerHTML='<?php echo $pia_lang['DevDetail_Nmap_buttonDetail'];?> (' + document.getElementById('txtLastIP').value +')';
}, 2000);
</script>
<button type="button" id="piamanualnmap_fast" class="btn btn-default pa-btn" style="margin: auto;" onclick="manualnmapscan(document.getElementById('txtLastIP').value, 'fast')">Loading...</button>
<button type="button" id="piamanualnmap_normal" class="btn btn-default pa-btn" style="margin: auto;" onclick="manualnmapscan(document.getElementById('txtLastIP').value, 'normal')">Loading...</button>
<button type="button" id="piamanualnmap_detail" class="btn btn-default pa-btn" style="margin: auto;" onclick="manualnmapscan(document.getElementById('txtLastIP').value, 'detail')">Loading...</button>
<div style="margin-top: 20px; text-align: left;">
<ul style="padding:20px;">
<li><?php echo $pia_lang['DevDetail_Nmap_buttonFast_text'];?></li>
<li><?php echo $pia_lang['DevDetail_Nmap_buttonDefault_text'];?></li>
<li><?php echo $pia_lang['DevDetail_Nmap_buttonDetail_text'];?></li>
</ul>
</div>
</div>
<div id="scanoutput" style="margin-top: 30px;"></div>
<script>
function manualnmapscan(targetip, mode) {
$( "#scanoutput" ).empty();
$.ajax({
method: "POST",
url: "./php/server/nmap_scan.php",
data: { scan: targetip, mode: mode },
beforeSend: function() { $('#scanoutput').addClass("ajax_scripts_loading"); },
complete: function() { $('#scanoutput').removeClass("ajax_scripts_loading"); },
success: function(data, textStatus) {
$("#scanoutput").html(data);
}
})
}
</script>
</div>
<!-- ----------------------------------------------------------------------- -->
<!-- tab page 3 ------------------------------------------------------------ -->
<div class="tab-pane fade table-responsive" id="panPresence">
@@ -449,7 +530,7 @@
<div class="text-center">
<label>
<input class="checkbox blue hidden" id="chkHideConnectionEvents" type="checkbox" checked>
Hide Connection Events
<?php echo $pia_lang['DevDetail_Events_CheckBox'];?>
</label>
</div>
@@ -477,7 +558,6 @@
</div>
<!-- /.row -->
<!-- ----------------------------------------------------------------------- -->
</section>
<!-- /.content -->
</div>
@@ -505,7 +585,14 @@
<link rel="stylesheet" href="lib/AdminLTE/bower_components/fullcalendar/dist/fullcalendar.print.min.css" media="print">
<script src="lib/AdminLTE/bower_components/moment/moment.js"></script>
<script src="lib/AdminLTE/bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="lib/AdminLTE/bower_components/fullcalendar/dist/locale-all.js"></script>
<!-- Dark-Mode Patch -->
<?php
if ($ENABLED_DARKMODE === True) {
echo '<link rel="stylesheet" href="css/dark-patch-cal.css">';
}
?>
<!-- page script ----------------------------------------------------------- -->
<script>
@@ -777,7 +864,14 @@ function initializeDatatables () {
processing: '<table><td width="130px" align="middle">Loading...</td>'+
'<td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw">'+
'</td></table>',
emptyTable: 'No data'
emptyTable: 'No data',
"lengthMenu": "<?php echo $pia_lang['Events_Tablelenght'];?>",
"search": "<?php echo $pia_lang['Events_Searchbox'];?>: ",
"paginate": {
"next": "<?php echo $pia_lang['Events_Table_nav_next'];?>",
"previous": "<?php echo $pia_lang['Events_Table_nav_prev'];?>"
},
"info": "<?php echo $pia_lang['Events_Table_info'];?>",
}
});
@@ -809,7 +903,14 @@ function initializeDatatables () {
processing: '<table><td width="130px" align="middle">Loading...</td>'+
'<td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw">'+
'</td></table>',
emptyTable: 'No data'
emptyTable: 'No data',
"lengthMenu": "<?php echo $pia_lang['Events_Tablelenght'];?>",
"search": "<?php echo $pia_lang['Events_Searchbox'];?>: ",
"paginate": {
"next": "<?php echo $pia_lang['Events_Table_nav_next'];?>",
"previous": "<?php echo $pia_lang['Events_Table_nav_prev'];?>"
},
"info": "<?php echo $pia_lang['Events_Table_info'];?>",
}
});
@@ -848,7 +949,7 @@ function initializeCalendar () {
slotLabelInterval : '04:00:00',
slotLabelFormat : 'H:mm',
timeFormat : 'H:mm',
locale : '<?php echo $pia_lang['Presence_CalHead_lang'];?>',
header: {
left : 'prev,next today',
center : 'title',
@@ -859,14 +960,14 @@ function initializeCalendar () {
agendaYear: {
type : 'agenda',
duration : { year: 1 },
buttonText : 'year',
buttonText : '<?php echo $pia_lang['Presence_CalHead_year'];?>',
columnHeaderFormat : ''
},
agendaMonth: {
type : 'agenda',
duration : { month: 1 },
buttonText : 'month',
buttonText : '<?php echo $pia_lang['Presence_CalHead_month'];?>',
columnHeaderFormat : 'D'
}
},
@@ -1027,7 +1128,7 @@ function getDeviceData (readAllData=false) {
}
// Status
$('#deviceStatus').html (deviceData['dev_Status']);
$('#deviceStatus').html (deviceData['dev_Status'].replace('-', ''));
switch (deviceData['dev_Status']) {
case 'On-line': icon='fa fa-check'; color='text-green'; break;
case 'Off-line': icon='fa fa-close'; color='text-gray'; break;
@@ -1072,7 +1173,7 @@ function getDeviceData (readAllData=false) {
$('#txtFirstConnection').val (deviceData['dev_FirstConnection']);
$('#txtLastConnection').val (deviceData['dev_LastConnection']);
$('#txtLastIP').val (deviceData['dev_LastIP']);
$('#txtStatus').val (deviceData['dev_Status']);
$('#txtStatus').val (deviceData['dev_Status'].replace('-', ''));
if (deviceData['dev_StaticIP'] == 1) {$('#chkStaticIP').iCheck('check');} else {$('#chkStaticIP').iCheck('uncheck');}
$('#txtScanCycle').val (deviceData['dev_ScanCycle'] +' min');

View File

@@ -9,6 +9,7 @@
<?php
require 'php/templates/header.php';
require 'php/templates/graph.php';
?>
<!-- Page ------------------------------------------------------------------ -->
@@ -17,7 +18,7 @@
<!-- Content header--------------------------------------------------------- -->
<section class="content-header">
<h1 id="pageTitle">
Devices
<?php echo $pia_lang['Device_Title'];?>
</h1>
</section>
@@ -32,7 +33,7 @@
<div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
<div class="inner"> <h3 id="devicesAll"> -- </h3> </div>
<div class="icon"> <i class="fa fa-laptop text-aqua-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> All Devices <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_AllDevices'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -43,7 +44,7 @@
<div class="small-box bg-green pa-small-box-green pa-small-box-2">
<div class="inner"> <h3 id="devicesConnected"> -- </h3> </div>
<div class="icon"> <i class="fa fa-plug text-green-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Connected <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_Connected'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -54,7 +55,7 @@
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="devicesFavorites"> -- </h3> </div>
<div class="icon"> <i class="fa fa-star text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Favorites <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_Favorites'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -65,7 +66,7 @@
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="devicesNew"> -- </h3> </div>
<div class="icon"> <i class="ion ion-plus-round text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> New Devices <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_NewDevices'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -76,7 +77,7 @@
<div class="small-box bg-red pa-small-box-red pa-small-box-2">
<div class="inner"> <h3 id="devicesDown"> -- </h3> </div>
<div class="icon"> <i class="fa fa-warning text-red-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Down Alerts <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_DownAlerts'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -87,13 +88,38 @@
<div class="small-box bg-gray pa-small-box-gray pa-small-box-2">
<div class="inner"> <h3 id="devicesArchived"> -- </h3> </div>
<div class="icon"> <i class="fa fa-eye-slash text-gray-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Archived <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Device_Shortcut_Archived'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
</div>
<!-- /.row -->
<!-- Activity Chart ------------------------------------------------------- -->
<div class="row">
<div class="col-md-12">
<div class="box" id="clients">
<div class="box-header with-border">
<h3 class="box-title"><?php echo $pia_lang['Device_Shortcut_OnlineChart_a'];?> <span class="maxlogage-interval">12</span> <?php echo $pia_lang['Device_Shortcut_OnlineChart_b'];?></h3>
</div>
<div class="box-body">
<div class="chart">
<script src="lib/AdminLTE/bower_components/chart.js/Chart.js"></script>
<canvas id="OnlineChart" style="width:100%; height: 150px; margin-bottom: 15px;"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<script src="js/graph_online_history.js"></script>
<script>
var pia_js_online_history_time = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>];
var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>];
pia_draw_graph_online_history(pia_js_online_history_time, pia_js_online_history_ondev, pia_js_online_history_dodev);
</script>
<!-- datatable ------------------------------------------------------------- -->
<div class="row">
@@ -110,19 +136,19 @@
<table id="tableDevices" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Owner</th>
<th>Type</th>
<th>Favorite</th>
<th>Group</th>
<th>First Session</th>
<th>Last Session</th>
<th>Last IP</th>
<th>MAC</th>
<th>Status</th>
<th>MAC</th>
<th>Last IP Order</th>
<th>Rowid</th>
<th><?php echo $pia_lang['Device_TableHead_Name'];?></th>
<th><?php echo $pia_lang['Device_TableHead_Owner'];?></th>
<th><?php echo $pia_lang['Device_TableHead_Type'];?></th>
<th><?php echo $pia_lang['Device_TableHead_Favorite'];?></th>
<th><?php echo $pia_lang['Device_TableHead_Group'];?></th>
<th><?php echo $pia_lang['Device_TableHead_FirstSession'];?></th>
<th><?php echo $pia_lang['Device_TableHead_LastSession'];?></th>
<th><?php echo $pia_lang['Device_TableHead_LastIP'];?></th>
<th><?php echo $pia_lang['Device_TableHead_MAC'];?></th>
<th><?php echo $pia_lang['Device_TableHead_Status'];?></th>
<th><?php echo $pia_lang['Device_TableHead_MAC'];?></th>
<th><?php echo $pia_lang['Device_TableHead_LastIPOrder'];?></th>
<th><?php echo $pia_lang['Device_TableHead_Rowid'];?></th>
</tr>
</thead>
</table>
@@ -201,8 +227,9 @@ function initializeDatatable () {
$('#tableDevices').DataTable({
'paging' : true,
'lengthChange' : true,
'lengthMenu' : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
'lengthMenu' : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, '<?php echo $pia_lang['Device_Tablelenght_all'];?>']],
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : false,
@@ -263,7 +290,7 @@ function initializeDatatable () {
default: color='aqua'; break;
};
$(td).html ('<a href="deviceDetails.php?mac='+ rowData[10] +'" class="badge bg-'+ color +'">'+ cellData +'</a>');
$(td).html ('<a href="deviceDetails.php?mac='+ rowData[10] +'" class="badge bg-'+ color +'">'+ cellData.replace('-', '') +'</a>');
} },
],
@@ -271,7 +298,14 @@ function initializeDatatable () {
'processing' : true,
'language' : {
processing: '<table> <td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td> </table>',
emptyTable: 'No data'
emptyTable: 'No data',
"lengthMenu": "<?php echo $pia_lang['Device_Tablelenght'];?>",
"search": "<?php echo $pia_lang['Device_Searchbox'];?>: ",
"paginate": {
"next": "<?php echo $pia_lang['Device_Table_nav_next'];?>",
"previous": "<?php echo $pia_lang['Device_Table_nav_prev'];?>"
},
"info": "<?php echo $pia_lang['Device_Table_info'];?>",
}
});
@@ -288,6 +322,7 @@ function initializeDatatable () {
$('#tableDevices').on( 'search.dt', function () {
setCookie ('devicesList', JSON.stringify (table.column(12, { 'search': 'applied' }).data().toArray()) );
} );
};
@@ -320,13 +355,13 @@ function getDevicesList (status) {
// Define color & title for the status selected
switch (deviceStatus) {
case 'all': tableTitle = 'All Devices'; color = 'aqua'; break;
case 'connected': tableTitle = 'Connected Devices'; color = 'green'; break;
case 'favorites': tableTitle = 'Favorites'; color = 'yellow'; break;
case 'new': tableTitle = 'New Devices'; color = 'yellow'; break;
case 'down': tableTitle = 'Down Alerts'; color = 'red'; break;
case 'archived': tableTitle = 'Archived Devices'; color = 'gray'; break;
default: tableTitle = 'Devices'; color = 'gray'; break;
case 'all': tableTitle = '<?php echo $pia_lang['Device_Shortcut_AllDevices']?>'; color = 'aqua'; break;
case 'connected': tableTitle = '<?php echo $pia_lang['Device_Shortcut_Connected']?>'; color = 'green'; break;
case 'favorites': tableTitle = '<?php echo $pia_lang['Device_Shortcut_Favorites']?>'; color = 'yellow'; break;
case 'new': tableTitle = '<?php echo $pia_lang['Device_Shortcut_NewDevices']?>'; color = 'yellow'; break;
case 'down': tableTitle = '<?php echo $pia_lang['Device_Shortcut_DownAlerts']?>'; color = 'red'; break;
case 'archived': tableTitle = '<?php echo $pia_lang['Device_Shortcut_Archived']?>'; color = 'gray'; break;
default: tableTitle = '<?php echo $pia_lang['Device_Shortcut_Devices']?>'; color = 'gray'; break;
}
// Set title and color

View File

@@ -17,17 +17,17 @@
<!-- Content header--------------------------------------------------------- -->
<section class="content-header">
<h1 id="pageTitle">
Events
<?php echo $pia_lang['Events_Title'];?>
</h1>
<!-- period selector -->
<span class="breadcrumb" style="top: 0px;">
<select class="form-control" id="period" onchange="javascript: periodChanged();">
<option value="1 day">Today</option>
<option value="7 days">Last Week</option>
<option value="1 month" selected>Last Month</option>
<option value="1 year">Last Year</option>
<option value="100 years">All info</option>
<option value="1 day"><?php echo $pia_lang['Events_Periodselect_today'];?></option>
<option value="7 days"><?php echo $pia_lang['Events_Periodselect_LastWeek'];?></option>
<option value="1 month" selected><?php echo $pia_lang['Events_Periodselect_LastMonth'];?></option>
<option value="1 year"><?php echo $pia_lang['Events_Periodselect_LastYear'];?></option>
<option value="100 years"><?php echo $pia_lang['Events_Periodselect_All'];?></option>
</select>
</span>
</section>
@@ -43,7 +43,7 @@
<div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
<div class="inner"> <h3 id="eventsAll"> -- </h3> </div>
<div class="icon"> <i class="fa fa-bolt text-aqua-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> All events <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Events_Shortcut_AllEvents'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -54,7 +54,7 @@
<div class="small-box bg-green pa-small-box-green pa-small-box-2">
<div class="inner"> <h3 id="eventsSessions"> -- </h3> </div>
<div class="icon"> <i class="fa fa-plug text-green-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Sessions <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Events_Shortcut_Sessions'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -65,7 +65,7 @@
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="eventsMissing"> -- </h3> </div>
<div class="icon"> <i class="fa fa-exchange text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Missing Sessions <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Events_Shortcut_MissSessions'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -76,7 +76,7 @@
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="eventsVoided"> -- </h3> </div>
<div class="icon text-aqua-20"> <i class="fa fa-exclamation-circle text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Voided Sessions <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Events_Shortcut_VoidSessions'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -87,7 +87,7 @@
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="eventsNewDevices"> -- </h3> </div>
<div class="icon"> <i class="ion ion-plus-round text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> New Devices <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Events_Shortcut_NewDevices'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -98,7 +98,7 @@
<div class="small-box bg-red pa-small-box-red pa-small-box-2">
<div class="inner"> <h3 id="eventsDown"> -- </h3> </div>
<div class="icon"> <i class="fa fa-warning text-red-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Down Alerts <i class="fa fa-arrow-circle-right"></i> </div>
<div class="small-box-footer pa-small-box-footer"> <?php echo $pia_lang['Events_Shortcut_DownAlerts'];?> <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
@@ -121,18 +121,18 @@
<table id="tableEvents" class="table table-bordered table-hover table-striped ">
<thead>
<tr>
<th>Order</th>
<th>Device</th>
<th>Owner</th>
<th>Date</th>
<th>Event Type</th>
<th>Connection</th>
<th>Disconnection</th>
<th>Duration</th>
<th>Duration Order</th>
<th>IP</th>
<th>IP Order</th>
<th>Additional Info</th>
<th><?php echo $pia_lang['Events_TableHead_Order'];?></th>
<th><?php echo $pia_lang['Events_TableHead_Device'];?></th>
<th><?php echo $pia_lang['Events_TableHead_Owner'];?></th>
<th><?php echo $pia_lang['Events_TableHead_Date'];?></th>
<th><?php echo $pia_lang['Events_TableHead_EventType'];?></th>
<th><?php echo $pia_lang['Events_TableHead_Connection'];?></th>
<th><?php echo $pia_lang['Events_TableHead_Disconnection'];?></th>
<th><?php echo $pia_lang['Events_TableHead_Duration'];?></th>
<th><?php echo $pia_lang['Events_TableHead_DurationOrder'];?></th>
<th><?php echo $pia_lang['Events_TableHead_IP'];?></th>
<th><?php echo $pia_lang['Events_TableHead_IPOrder'];?></th>
<th><?php echo $pia_lang['Events_TableHead_AdditionalInfo'];?></th>
</tr>
</thead>
</table>
@@ -245,7 +245,14 @@ function initializeDatatable () {
'processing' : true,
'language' : {
processing: '<table><td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td></table>',
emptyTable: 'No data'
emptyTable: 'No data',
"lengthMenu": "<?php echo $pia_lang['Events_Tablelenght'];?>",
"search": "<?php echo $pia_lang['Events_Searchbox'];?>: ",
"paginate": {
"next": "<?php echo $pia_lang['Events_Table_nav_next'];?>",
"previous": "<?php echo $pia_lang['Events_Table_nav_prev'];?>"
},
"info": "<?php echo $pia_lang['Events_Table_info'];?>",
}
});
@@ -297,13 +304,13 @@ function getEvents (p_eventsType) {
// Define color & title for the status selected
switch (eventsType) {
case 'all': tableTitle = 'All Events'; color = 'aqua'; sesionCols = false; break;
case 'sessions': tableTitle = 'Sessions'; color = 'green'; sesionCols = true; break;
case 'missing': tableTitle = 'Missing Events'; color = 'yellow'; sesionCols = true; break;
case 'voided': tableTitle = 'Voided Events'; color = 'yellow'; sesionCols = false; break;
case 'new': tableTitle = 'New Devices Events'; color = 'yellow'; sesionCols = false; break;
case 'down': tableTitle = 'Down Alerts'; color = 'red'; sesionCols = false; break;
default: tableTitle = 'Events'; boxClass = ''; sesionCols = false; break;
case 'all': tableTitle = '<?php echo $pia_lang['Events_Shortcut_AllEvents'];?>'; color = 'aqua'; sesionCols = false; break;
case 'sessions': tableTitle = '<?php echo $pia_lang['Events_Shortcut_Sessions'];?>'; color = 'green'; sesionCols = true; break;
case 'missing': tableTitle = '<?php echo $pia_lang['Events_Shortcut_MissSessions'];?>'; color = 'yellow'; sesionCols = true; break;
case 'voided': tableTitle = '<?php echo $pia_lang['Events_Shortcut_VoidSessions'];?>'; color = 'yellow'; sesionCols = false; break;
case 'new': tableTitle = '<?php echo $pia_lang['Events_Shortcut_NewDevices'];?>'; color = 'yellow'; sesionCols = false; break;
case 'down': tableTitle = '<?php echo $pia_lang['Events_Shortcut_DownAlerts'];?>'; color = 'red'; sesionCols = false; break;
default: tableTitle = '<?php echo $pia_lang['Events_Shortcut_Events'];?>'; boxClass = ''; sesionCols = false; break;
}
// Set title and color

Binary file not shown.

After

Width:  |  Height:  |  Size: 813 B

BIN
front/img/boxed-bg-dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

14
front/img/manifest.json Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "Pi-Alert Console",
"short_name": "Pi-Alert",
"display": "standalone",
"icons": [
{
"src": "",
"sizes": "180x180",
"type": "image/png"
}
],
"theme_color": "#000",
"background_color": "#000"
}

View File

@@ -1,342 +0,0 @@
<!-- ---------------------------------------------------------------------------
# Pi.Alert
# Open Source Network Guard / WIFI & LAN intrusion detector
#
# devices.php - Front module. Devices list page
#-------------------------------------------------------------------------------
# Puche 2021 pi.alert.application@gmail.com GNU GPLv3
#--------------------------------------------------------------------------- -->
<?php
require 'php/templates/header.php';
?>
<!-- Page ------------------------------------------------------------------ -->
<div class="content-wrapper">
<!-- Content header--------------------------------------------------------- -->
<section class="content-header">
<h1 id="pageTitle">
Devices
</h1>
</section>
<!-- Main content ---------------------------------------------------------- -->
<section class="content">
<!-- top small box 1 ------------------------------------------------------- -->
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('all');">
<div class="small-box bg-aqua pa-small-box-aqua pa-small-box-2">
<div class="inner"> <h3 id="devicesAll"> -- </h3> </div>
<div class="icon"> <i class="fa fa-laptop text-aqua-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> All Devices <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box 2 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('connected');">
<div class="small-box bg-green pa-small-box-green pa-small-box-2">
<div class="inner"> <h3 id="devicesConnected"> -- </h3> </div>
<div class="icon"> <i class="fa fa-plug text-green-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Connected <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box 3 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('favorites');">
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="devicesFavorites"> -- </h3> </div>
<div class="icon"> <i class="fa fa-star text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Favorites <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box 4 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('new');">
<div class="small-box bg-yellow pa-small-box-yellow pa-small-box-2">
<div class="inner"> <h3 id="devicesNew"> -- </h3> </div>
<div class="icon"> <i class="ion ion-plus-round text-yellow-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> New Devices <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box 5 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('down');">
<div class="small-box bg-red pa-small-box-red pa-small-box-2">
<div class="inner"> <h3 id="devicesDown"> -- </h3> </div>
<div class="icon"> <i class="fa fa-warning text-red-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Down Alerts <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
<!-- top small box 6 ------------------------------------------------------- -->
<div class="col-lg-2 col-sm-4 col-xs-6">
<a href="#" onclick="javascript: getDevicesList('archived');">
<div class="small-box bg-gray pa-small-box-gray pa-small-box-2">
<div class="inner"> <h3 id="devicesArchived"> -- </h3> </div>
<div class="icon"> <i class="fa fa-eye-slash text-gray-20"></i> </div>
<div class="small-box-footer pa-small-box-footer"> Archived <i class="fa fa-arrow-circle-right"></i> </div>
</div>
</a>
</div>
</div>
<!-- /.row -->
<!-- datatable ------------------------------------------------------------- -->
<div class="row">
<div class="col-xs-12">
<div id="tableDevicesBox" class="box">
<!-- box-header -->
<div class="box-header">
<h3 id="tableDevicesTitle" class="box-title text-gray">Devices</h3>
</div>
<!-- table -->
<div class="box-body table-responsive">
<table id="tableDevices" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Owner</th>
<th>Type</th>
<th>Favorite</th>
<th>Group</th>
<th>First Session</th>
<th>Last Session</th>
<th>Last IP</th>
<th>MAC</th>
<th>Status</th>
<th>MAC</th>
<th>Last IP Order</th>
<th>Rowid</th>
</tr>
</thead>
</table>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<!-- ----------------------------------------------------------------------- -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- ----------------------------------------------------------------------- -->
<?php
require 'php/templates/footer.php';
?>
<!-- ----------------------------------------------------------------------- -->
<!-- Datatable -->
<link rel="stylesheet" href="lib/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<script src="lib/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="lib/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- page script ----------------------------------------------------------- -->
<script>
var deviceStatus = 'all';
var parTableRows = 'Front_Devices_Rows';
var parTableOrder = 'Front_Devices_Order';
var tableRows = 10;
var tableOrder = [[3,'desc'], [0,'asc']];
// Read parameters & Initialize components
main();
// -----------------------------------------------------------------------------
function main () {
// get parameter value
$.get('php/server/parameters.php?action=get&parameter='+ parTableRows, function(data) {
var result = JSON.parse(data);
if (Number.isInteger (result) ) {
tableRows = result;
}
// get parameter value
$.get('php/server/parameters.php?action=get&parameter='+ parTableOrder, function(data) {
var result = JSON.parse(data);
result = JSON.parse(result);
if (Array.isArray (result) ) {
tableOrder = result;
}
// Initialize components with parameters
initializeDatatable();
// query data
getDevicesTotals();
getDevicesList (deviceStatus);
});
});
}
// -----------------------------------------------------------------------------
function initializeDatatable () {
var table=
$('#tableDevices').DataTable({
'paging' : true,
'lengthChange' : true,
'lengthMenu' : [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'All']],
'searching' : true,
'ordering' : true,
'info' : true,
'autoWidth' : false,
// Parameters
'pageLength' : tableRows,
'order' : tableOrder,
// 'order' : [[3,'desc'], [0,'asc']],
'columnDefs' : [
{visible: false, targets: [10, 11, 12] },
{className: 'text-center', targets: [3, 8, 9] },
{width: '80px', targets: [5, 6] },
{width: '0px', targets: 9 },
{orderData: [11], targets: 7 },
// Device Name
{targets: [0],
'createdCell': function (td, cellData, rowData, row, col) {
$(td).html ('<b><a href="deviceDetails.php?mac='+ rowData[10] +'" class="">'+ cellData +'</a></b>');
} },
// Favorite
{targets: [3],
'createdCell': function (td, cellData, rowData, row, col) {
if (cellData == 1){
$(td).html ('<i class="fa fa-star text-yellow" style="font-size:16px"></i>');
} else {
$(td).html ('');
}
} },
// Dates
{targets: [5, 6],
'createdCell': function (td, cellData, rowData, row, col) {
$(td).html (translateHTMLcodes (cellData));
} },
// Random MAC
{targets: [8],
'createdCell': function (td, cellData, rowData, row, col) {
if (cellData == 1){
$(td).html ('<i data-toggle="tooltip" data-placement="right" title="Random MAC" style="font-size: 16px;" class="text-yellow glyphicon glyphicon-random"></i>');
} else {
$(td).html ('');
}
} },
// Status color
{targets: [9],
'createdCell': function (td, cellData, rowData, row, col) {
switch (cellData) {
case 'Down': color='red'; break;
case 'New': color='yellow'; break;
case 'On-line': color='green'; break;
case 'Off-line': color='gray text-white'; break;
case 'Archived': color='gray text-white'; break;
default: color='aqua'; break;
};
$(td).html ('<a href="deviceDetails.php?mac='+ rowData[10] +'" class="badge bg-'+ color +'">'+ cellData +'</a>');
} },
],
// Processing
'processing' : true,
'language' : {
processing: '<table> <td width="130px" align="middle">Loading...</td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td> </table>',
emptyTable: 'No data'
}
});
// Save cookie Rows displayed, and Parameters rows & order
$('#tableDevices').on( 'length.dt', function ( e, settings, len ) {
setParameter (parTableRows, len);
} );
$('#tableDevices').on( 'order.dt', function () {
setParameter (parTableOrder, JSON.stringify (table.order()) );
setCookie ('devicesList',JSON.stringify (table.column(12, { 'search': 'applied' }).data().toArray()) );
} );
$('#tableDevices').on( 'search.dt', function () {
setCookie ('devicesList', JSON.stringify (table.column(12, { 'search': 'applied' }).data().toArray()) );
} );
};
// -----------------------------------------------------------------------------
function getDevicesTotals () {
// stop timer
stopTimerRefreshData();
// get totals and put in boxes
$.get('php/server/devices.php?action=getDevicesTotals', function(data) {
var totalsDevices = JSON.parse(data);
$('#devicesAll').html (totalsDevices[0].toLocaleString());
$('#devicesConnected').html (totalsDevices[1].toLocaleString());
$('#devicesFavorites').html (totalsDevices[2].toLocaleString());
$('#devicesNew').html (totalsDevices[3].toLocaleString());
$('#devicesDown').html (totalsDevices[4].toLocaleString());
$('#devicesArchived').html (totalsDevices[5].toLocaleString());
// Timer for refresh data
newTimerRefreshData (getDevicesTotals);
} );
}
// -----------------------------------------------------------------------------
function getDevicesList (status) {
// Save status selected
deviceStatus = status;
// Define color & title for the status selected
switch (deviceStatus) {
case 'all': tableTitle = 'All Devices'; color = 'aqua'; break;
case 'connected': tableTitle = 'Connected Devices'; color = 'green'; break;
case 'favorites': tableTitle = 'Favorites'; color = 'yellow'; break;
case 'new': tableTitle = 'New Devices'; color = 'yellow'; break;
case 'down': tableTitle = 'Down Alerts'; color = 'red'; break;
case 'archived': tableTitle = 'Archived Devices'; color = 'gray'; break;
default: tableTitle = 'Devices'; color = 'gray'; break;
}
// Set title and color
$('#tableDevicesTitle')[0].className = 'box-title text-'+ color;
$('#tableDevicesBox')[0].className = 'box box-'+ color;
$('#tableDevicesTitle').html (tableTitle);
// Define new datasource URL and reload
$('#tableDevices').DataTable().ajax.url(
'php/server/devices.php?action=getDevicesList&status=' + deviceStatus).load();
};
</script>

View File

@@ -0,0 +1,57 @@
function pia_draw_graph_online_history(pia_js_graph_online_history_time, pia_js_graph_online_history_ondev, pia_js_graph_online_history_dodev) {
var xValues = pia_js_graph_online_history_time;
new Chart("OnlineChart", {
type: "bar",
data: {
labels: xValues,
datasets: [{
label: 'Online Devices',
data: pia_js_graph_online_history_ondev,
borderColor: "#00a65a",
fill: true,
backgroundColor: "rgba(0, 166, 89, .6)",
pointStyle: 'circle',
pointRadius: 3,
pointHoverRadius: 3
}, {
label: 'Offline/Down Devices',
data: pia_js_graph_online_history_dodev,
borderColor: "#dd4b39",
fill: true,
backgroundColor: "rgba(222, 74, 56, .6)",
}]
},
options: {
legend: {
display: true,
labels: {
fontColor: "#A0A0A0",
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: '#A0A0A0'
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
stacked: true,
}],
xAxes: [{
ticks: {
fontColor: '#A0A0A0',
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
stacked: true,
}],
},
tooltips: {
mode: 'index'
}
}
});
}

View File

@@ -0,0 +1,2 @@
documentation/
composer.json

View File

@@ -0,0 +1,24 @@
language: node_js
node_js:
- 8
- 9
- 10
- 11
- 12
env:
- INSTALL=bower
- INSTALL=yarn
- INSTALL=npm
matrix:
fast_finish: true
install:
- if [ "bower" == $INSTALL ]; then yarn global add bower && bower install; fi
- if [ "yarn" == $INSTALL ]; then yarn install; fi
- if [ "npm" == $INSTALL ]; then npm install; fi
script:
- echo 'Tests must be configured'

View File

@@ -0,0 +1,312 @@
// AdminLTE Gruntfile
module.exports = function (grunt) { // jshint ignore:line
'use strict';
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
watch : {
less : {
// Compiles less files upon saving
files: ['build/less/*.less'],
tasks: ['less:development', 'less:production', 'replace', 'notify:less']
},
js : {
// Compile js files upon saving
files: ['build/js/*.js'],
tasks: ['js', 'notify:js']
},
skins: {
// Compile any skin less files upon saving
files: ['build/less/skins/*.less'],
tasks: ['less:skins', 'less:minifiedSkins', 'notify:less']
}
},
// Notify end of tasks
notify: {
less: {
options: {
title : 'AdminLTE',
message: 'LESS finished running'
}
},
js : {
options: {
title : 'AdminLTE',
message: 'JS bundler finished running'
}
}
},
// 'less'-task configuration
// This task will compile all less files upon saving to create both AdminLTE.css and AdminLTE.min.css
less : {
// Development not compressed
development : {
files: {
// compilation.css : source.less
'dist/css/AdminLTE.css' : 'build/less/AdminLTE.less',
// AdminLTE without plugins
'dist/css/alt/AdminLTE-without-plugins.css' : 'build/less/AdminLTE-without-plugins.less',
// Separate plugins
'dist/css/alt/AdminLTE-select2.css' : 'build/less/select2.less',
'dist/css/alt/AdminLTE-fullcalendar.css' : 'build/less/fullcalendar.less',
'dist/css/alt/AdminLTE-bootstrap-social.css': 'build/less/bootstrap-social.less'
}
},
// Production compressed version
production : {
options: {
compress: true
},
files : {
// compilation.css : source.less
'dist/css/AdminLTE.min.css' : 'build/less/AdminLTE.less',
// AdminLTE without plugins
'dist/css/alt/AdminLTE-without-plugins.min.css' : 'build/less/AdminLTE-without-plugins.less',
// Separate plugins
'dist/css/alt/AdminLTE-select2.min.css' : 'build/less/select2.less',
'dist/css/alt/AdminLTE-fullcalendar.min.css' : 'build/less/fullcalendar.less',
'dist/css/alt/AdminLTE-bootstrap-social.min.css': 'build/less/bootstrap-social.less'
}
},
// Non minified skin files
skins : {
files: {
'dist/css/skins/skin-blue.css' : 'build/less/skins/skin-blue.less',
'dist/css/skins/skin-black.css' : 'build/less/skins/skin-black.less',
'dist/css/skins/skin-yellow.css' : 'build/less/skins/skin-yellow.less',
'dist/css/skins/skin-green.css' : 'build/less/skins/skin-green.less',
'dist/css/skins/skin-red.css' : 'build/less/skins/skin-red.less',
'dist/css/skins/skin-purple.css' : 'build/less/skins/skin-purple.less',
'dist/css/skins/skin-blue-light.css' : 'build/less/skins/skin-blue-light.less',
'dist/css/skins/skin-black-light.css' : 'build/less/skins/skin-black-light.less',
'dist/css/skins/skin-yellow-light.css': 'build/less/skins/skin-yellow-light.less',
'dist/css/skins/skin-green-light.css' : 'build/less/skins/skin-green-light.less',
'dist/css/skins/skin-red-light.css' : 'build/less/skins/skin-red-light.less',
'dist/css/skins/skin-purple-light.css': 'build/less/skins/skin-purple-light.less',
'dist/css/skins/_all-skins.css' : 'build/less/skins/_all-skins.less'
}
},
// Skins minified
minifiedSkins: {
options: {
compress: true
},
files : {
'dist/css/skins/skin-blue.min.css' : 'build/less/skins/skin-blue.less',
'dist/css/skins/skin-black.min.css' : 'build/less/skins/skin-black.less',
'dist/css/skins/skin-yellow.min.css' : 'build/less/skins/skin-yellow.less',
'dist/css/skins/skin-green.min.css' : 'build/less/skins/skin-green.less',
'dist/css/skins/skin-red.min.css' : 'build/less/skins/skin-red.less',
'dist/css/skins/skin-purple.min.css' : 'build/less/skins/skin-purple.less',
'dist/css/skins/skin-blue-light.min.css' : 'build/less/skins/skin-blue-light.less',
'dist/css/skins/skin-black-light.min.css' : 'build/less/skins/skin-black-light.less',
'dist/css/skins/skin-yellow-light.min.css': 'build/less/skins/skin-yellow-light.less',
'dist/css/skins/skin-green-light.min.css' : 'build/less/skins/skin-green-light.less',
'dist/css/skins/skin-red-light.min.css' : 'build/less/skins/skin-red-light.less',
'dist/css/skins/skin-purple-light.min.css': 'build/less/skins/skin-purple-light.less',
'dist/css/skins/_all-skins.min.css' : 'build/less/skins/_all-skins.less'
}
}
},
// Uglify task info. Compress the js files.
uglify: {
options : {
mangle : true,
output: {
comments: 'some'
},
},
production: {
files: {
'dist/js/adminlte.min.js': ['dist/js/adminlte.js']
}
}
},
// Concatenate JS Files
concat: {
options: {
separator: '\n\n',
banner : '/*! AdminLTE app.js\n'
+ '* ================\n'
+ '* Main JS application file for AdminLTE v2. This file\n'
+ '* should be included in all pages. It controls some layout\n'
+ '* options and implements exclusive AdminLTE plugins.\n'
+ '*\n'
+ '* @author Colorlib\n'
+ '* @support <https://github.com/ColorlibHQ/AdminLTE/issues>\n'
+ '* @version <%= pkg.version %>\n'
+ '* @repository <%= pkg.repository.url %>\n'
+ '* @license MIT <http://opensource.org/licenses/MIT>\n'
+ '*/\n\n'
+ '// Make sure jQuery has been loaded\n'
+ 'if (typeof jQuery === \'undefined\') {\n'
+ 'throw new Error(\'AdminLTE requires jQuery\')\n'
+ '}\n\n'
},
dist : {
src : [
'build/js/BoxRefresh.js',
'build/js/BoxWidget.js',
'build/js/ControlSidebar.js',
'build/js/DirectChat.js',
'build/js/PushMenu.js',
'build/js/TodoList.js',
'build/js/Tree.js',
'build/js/Layout.js',
],
dest: 'dist/js/adminlte.js'
}
},
// Replace image paths in AdminLTE without plugins
replace: {
withoutPlugins : {
src : ['dist/css/alt/AdminLTE-without-plugins.css'],
dest : 'dist/css/alt/AdminLTE-without-plugins.css',
replacements: [
{
from: '../img',
to : '../../img'
}
]
},
withoutPluginsMin: {
src : ['dist/css/alt/AdminLTE-without-plugins.min.css'],
dest : 'dist/css/alt/AdminLTE-without-plugins.min.css',
replacements: [
{
from: '../img',
to : '../../img'
}
]
}
},
// Build the documentation files
includes: {
build: {
src : ['*.html'], // Source files
dest : 'documentation/', // Destination directory
flatten: true,
cwd : 'documentation/build',
options: {
silent : true,
includePath: 'documentation/build/include'
}
}
},
// Optimize images
image: {
dynamic: {
files: [
{
expand: true,
cwd : 'build/img/',
src : ['**/*.{png,jpg,gif,svg,jpeg}'],
dest : 'dist/img/'
}
]
}
},
// Validate JS code
jshint: {
options: {
jshintrc: 'build/js/.jshintrc'
},
grunt : {
options: {
jshintrc: 'build/grunt/.jshintrc'
},
src : 'Gruntfile.js'
},
core : {
src: 'build/js/*.js'
},
demo : {
src: 'dist/js/demo.js'
},
pages : {
src: 'dist/js/pages/*.js'
}
},
jscs: {
options: {
config: 'build/js/.jscsrc'
},
core : {
src: '<%= jshint.core.src %>'
},
pages : {
src: '<%= jshint.pages.src %>'
}
},
// Validate CSS files
csslint: {
options: {
csslintrc: 'build/less/.csslintrc'
},
dist : [
'dist/css/AdminLTE.css'
]
},
// Validate Bootstrap HTML
bootlint: {
options: {
relaxerror: ['W005']
},
files : ['pages/**/*.html', '*.html']
},
// Delete images in build directory
// After compressing the images in the build/img dir, there is no need
// for them
clean: {
build: ['build/img/*']
}
});
// Load all grunt tasks
// LESS Compiler
grunt.loadNpmTasks('grunt-contrib-less');
// Watch File Changes
grunt.loadNpmTasks('grunt-contrib-watch');
// Compress JS Files
grunt.loadNpmTasks('grunt-contrib-uglify');
// Include Files Within HTML
grunt.loadNpmTasks('grunt-includes');
// Optimize images
grunt.loadNpmTasks('grunt-image');
// Validate JS code
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-jscs');
// Delete not needed files
grunt.loadNpmTasks('grunt-contrib-clean');
// Lint CSS
grunt.loadNpmTasks('grunt-contrib-csslint');
// Lint Bootstrap
grunt.loadNpmTasks('grunt-bootlint');
// Concatenate JS files
grunt.loadNpmTasks('grunt-contrib-concat');
// Notify
grunt.loadNpmTasks('grunt-notify');
// Replace
grunt.loadNpmTasks('grunt-text-replace');
// Linting task
grunt.registerTask('lint', ['jshint', 'csslint', 'bootlint']);
// JS task
grunt.registerTask('js', ['concat', 'uglify']);
// CSS Task
grunt.registerTask('css', ['less:development', 'less:production', 'replace']);
// The default task (running 'grunt' in console) is 'watch'
grunt.registerTask('default', ['watch']);
};

View File

@@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2014-2017 Abdullah Almsaeed
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,55 @@
Introduction
============
[![Build Status](https://img.shields.io/travis/ColorlibHQ/AdminLTE.svg)](https://travis-ci.org/ColorlibHQ/AdminLTE)
![Bower version](https://img.shields.io/bower/v/adminlte.svg)
[![npm version](https://img.shields.io/npm/v/admin-lte.svg)](https://www.npmjs.com/package/admin-lte)
[![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
[![CDNJS](https://img.shields.io/cdnjs/v/admin-lte.svg)](https://cdnjs.com/libraries/admin-lte)
**AdminLTE** -- is a fully responsive admin template. Based on **[Bootstrap 3 & 4](https://github.com/twbs/bootstrap)** framework. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops. Check out the live preview now and see for yourself.
**Download & Preview on [AdminLTE.IO](https://adminlte.io)**
### Looking for More Templates?
- **[Admin Templates](http://dashboardpack.com/)** by DashboardPack
- **[Bootstrap Templates](https://colorlib.com/wp/cat/bootstrap/)** by Colorlib
- **[Admin Dashboards](https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/)** by varios template designers and developers based on Bootstrap, Vue, React, Angular and more.
## Documentation & Installation Guide
Visit the [online documentation](https://adminlte.io/docs) for the most
updated guide.
!["AdminLTE Presentation"](https://adminlte.io/AdminLTE2.png "AdminLTE Presentation")
### Contribution
Contribution are always **welcome and recommended**! Here is how:
- Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git```
- Make your changes
- Create a pull request
#### Contribution Requirements:
- When you contribute, you agree to give a non-exclusive license to AdminLTE.IO to use that contribution in any context as we (AdminLTE.IO) see appropriate.
- If you use content provided by another party, it must be appropriately licensed using an [open source](http://opensource.org/licenses) license.
- Contributions are only accepted through Github pull requests.
- Finally, contributed code must work in all supported browsers (see above for browser support).
### License
AdminLTE is an open source project by [AdminLTE.IO](https://adminlte.io) that is licensed under [MIT](http://opensource.org/licenses/MIT). AdminLTE.IO
reserves the right to change the license of future releases. Wondering what you can or can't do? View the [license guide](https://adminlte.io/docs/license).
### Legacy Releases
AdminLTE 1.x can be easily upgraded to 2.x using [this guide](https://adminlte.io/themes/AdminLTE/documentation/index.html#upgrade), but if you intend to keep using AdminLTE 1.x, you can download the latest release from the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) section above.
### Change log
**For the most recent change log, visit the [releases page](https://github.com/ColorlibHQ/AdminLTE/releases).** We will add detailed release notes to each new release.
### Image Credits
- [Pixeden](http://www.pixeden.com/psd-web-elements/flat-responsive-showcase-psd)
- [Graphicsfuel](http://www.graphicsfuel.com/2013/02/13-high-resolution-blur-backgrounds/)
- [Pickaface](http://pickaface.net/)
- [Unsplash](https://unsplash.com/)
- [Uifaces](http://uifaces.com/)

View File

@@ -0,0 +1,64 @@
{
"name": "admin-lte",
"homepage": "https://adminlte.io",
"authors": [
"Abdullah Almsaeed <abdullah@almsaeedstudio.com>"
],
"description": "Admin dashboard and control panel template",
"main": [
"index2.html",
"dist/css/AdminLTE.css",
"dist/js/adminlte.js",
"build/less/AdminLTE.less"
],
"keywords": [
"css",
"js",
"html",
"template",
"admin",
"bootstrap",
"theme",
"backend",
"responsive"
],
"license": "MIT",
"ignore": [
"/.*",
"node_modules",
"bower_components",
"composer.json",
"documentation"
],
"dependencies": {
"chart.js": "^1.0",
"ckeditor": "^4.7",
"bootstrap-colorpicker": "^2.5.1",
"bootstrap": "^3.4",
"jquery": "^3.4.1",
"datatables.net": "^1.10.15",
"datatables.net-bs": "^2.1.1",
"bootstrap-datepicker": "^1.7",
"bootstrap-daterangepicker": "^2.1.25",
"moment": "^2.18.1",
"fastclick": "^1.0.6",
"Flot": "flot#^0.8.3",
"fullcalendar": "^3.4",
"inputmask": "jquery.inputmask#^3.3.7",
"ion.rangeSlider": "ionrangeslider#^2.2",
"jvectormap": "^1.2.2",
"jquery-knob": "^1.2.13",
"morris.js": "^0.5.1",
"PACE": "pace#^1.0.2",
"select2": "^4.0.7",
"jquery-slimscroll": "slimscroll#^1.3.8",
"jquery-sparkline": "^2.1.3",
"font-awesome": "^4.7",
"Ionicons": "ionicons#^2.0.1",
"jquery-ui": "^1.12.1",
"seiyria-bootstrap-slider": "^10.6.2"
},
"resolutions": {
"jquery": "^3.4.1"
}
}

View File

@@ -1,3 +0,0 @@
*.min.js
!excanvas.min.js
node_modules/

View File

@@ -1,29 +1,12 @@
{
"name": "bootstrap-colorpicker",
"main": [
"dist/css/bootstrap-colorpicker.css",
"dist/js/bootstrap-colorpicker.js"
],
"dependencies": {
"jquery": ">=1.10"
},
"ignore": [
"\\.*",
"/index.html",
"/package.json",
"/composer.json",
"/Gruntfile.js",
"/.travis.yml",
"/travis.sh",
"/server.js"
],
"homepage": "https://github.com/itsjavi/bootstrap-colorpicker",
"version": "2.5.2",
"_release": "2.5.2",
"version": "2.5.3",
"_release": "2.5.3",
"_resolution": {
"type": "version",
"tag": "2.5.2",
"commit": "d56d0d3d5bee59904d48bce3c47a0029741e10e6"
"tag": "2.5.3",
"commit": "525cd6a0aa26ae95803bbf34d231c4163136a314"
},
"_source": "https://github.com/itsjavi/bootstrap-colorpicker.git",
"_target": "^2.5.1",

View File

@@ -0,0 +1,11 @@
# EditorConfig is awesome: http://EditorConfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

View File

@@ -0,0 +1,47 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team members through their social media sites or at _git @ itsjavi.com_.
The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/

View File

@@ -0,0 +1,42 @@
# Contributing
## Support
The issue tracker is not the place for support requests. If you get stuck with bootstrap-colorpicker, it's very likely
that the fine folks at [StackOverflow](http://stackoverflow.com/) will be able to help you; simply describe the problem
you're having and provide them a link to the repo (so they know what code you're using).
## Issues
For feature requests, suggestions or ideas, add `[SUGGESTION]` before the title of the issue, for anything else follow
the following guidelines.
### Steps to submit an issue
These steps are mandatory. Issues that are not clear or are not clearly reproduceable with a live example will be closed.
- Reproduce your problem in a separated environment, like in JSFiddle,
[here is a template for it](http://jsfiddle.net/0vopxm13/157/), that you can fork in the same page.
It already includes the required JS and CSS files.
- Before posting your issue, consider adding this information:
* Expected behaviour: what should happen?
* Actual behaviour: what happens instead?
* Your context: Where it happens? In which browser and version (if applicable)?
* Plugin version (and/or commit reference).
* jQuery version you use and list of all other plugins/scripts you are using with this one and may cause some conflict.
* A link to your JSFiddle (or similar tool) demo where you reproduced the problem (if applicable).
## Pull Requests
Patches and new features are welcome!
- Prerequisites: having `node`, `npm`, `yarn` and `grunt` installed in your machine.
- After a fresh clone for your fork, you need to run `yarn install` inside the project's root folder.
- For checking your changes in the browser you can execute `node serve` and navigate to http://localhost:5000/
- Before any commit run always `grunt` inside the project's root folder, to update the dist files
(never modify them manually).
- Do not change the plugin coding style.
- Check that the index.html demos aren't broken (modify if necessary).
- Test your code at least in Chrome, Firefox and Edge.
- Any new feature should come with updated docs if applicable (a demonstration).
- Generate the `/dist` files executing `grunt` before your Pull Request.
- Push to your fork and submit the pull request.

View File

@@ -0,0 +1,51 @@
<!--
THIS TEMPLATE IS MANDATORY!!
Thank you for your contribution to bootstrap-colorpicker! Please replace {Please write here *} with your description.
Please note that issues not following this template may be potentially discarded if they are not easily reproduceable
with live examples (in case of code issues) and/or the description is not clear enough.
-->
### Brief description
{Please write here a summary of the issue}
<!--
The following sections are only mandatory for bug reports.
For feature requests and other kind of tickets, you only need to fill the first section,
optionally with additional comments and examples.
-->
### Which software are you using?
- bootstrap-colorpicker version: {Please write here}
- bootstrap version: {Please write here}
- jQuery version: {Please write here}
- Browser name and version: {Please write here}
- Operative System name an version: {Please write here}
### What's the expected or desirable behavior?
{Please write here in case of code-related issues or remove this section}
### What's the actual current behavior?
{Please write here in case of code-related issues or remove this section}
### Are there some other related issues or PRs?
{Please write here if applicable the issue numbers or remove this section}
### Steps to reproduce
{Please write here in case of code-related issues or remove this section}
<!--
Live examples are MANDATORY for code-related issues
You have a JsFiddle template here: http://jsfiddle.net/0vopxm13/157/ which is using the latest master version of the library.
-->
*Live example*: {Please write here a link to your JsFiddle example}
### Additional Comments (if any)
{Please write here}

View File

@@ -0,0 +1,38 @@
<!--
THIS TEMPLATE IS MANDATORY!!
Thank you for your contribution to bootstrap-colorpicker! Please replace {Please write here} with your description.
Please note that PRs not following this template may be potentially discarded if they are not clear enough.
-->
### Is your PR fixing an issue or introduces a new feature?
{Please write here}
### In case of fix, how this PR fixes the problem?
{Please write here only in case of fix PR or remove the section}
{Please also mention the related issue numbers you are trying to close, if applicable}
### In case of new feature, what are the benefits and use cases?
{Please write here only in case of feature PR or remove the section}
### Check list
Please mark with `x` inside the `[ ]` for anything that applies to this PR.
- [ ] All tests passed in travis-ci
- [ ] Regenerated the `dist` files via `grunt`
- [ ] All documentation examples are still working after testing them via `node serve`
- [ ] Added an example in the documentation for the newly introduced feature
- [ ] Provided an example via JsFiddle in the description of this PR
- [ ] Tested at least with latest Chrome, Firefox and Mobile (iOS Safari and/or Chrome for Android)
- [ ] This PR also introduces coding style changes (indentation, etc), in a separated commit
- [ ] The commit history is understandable and grouped into the minimum number of commits possible
- [ ] I've followed all other [`CONTRIBUTING.md`](.github/CONTRIBUTING.md#pull-requests) guidelines for Pull Requests.
### Additional Comments (if any)
{Please write here}

View File

@@ -0,0 +1,18 @@
{
"bitwise": false,
"browser": true,
"curly": true,
"eqeqeq": true,
"eqnull": true,
"esnext": true,
"immed": true,
"jquery": true,
"latedef": true,
"newcap": true,
"noarg": true,
"node": true,
"strict": false,
"trailing": true,
"undef": true,
"predef" : ["define"]
}

View File

@@ -0,0 +1,21 @@
*~
.DS_Store
.DS_Store*
ehthumbs.db
Thumbs.db
*.log
/node_modules/
/bower_components/
/nbproject/
/gh-pages/
/package-lock.json
Gruntfile.js
/build
/docs
/tests
/spec
.*
/src/docs
*.psd
*.ai
composer.json

View File

@@ -0,0 +1,13 @@
language: node_js
node_js:
- "6"
- "8"
before_script:
- npm install -g grunt-cli
- curl -o- -L https://yarnpkg.com/install.sh | bash
script:
- yarn install
- grunt --verbose
# Check that files didn't change after running grunt. It should be run before pushing any code change.
- if ! git diff --name-only --quiet -- dist docs src index.html --; then echo \"Files where modified after grunt execution!!...\"; exit 1; fi

View File

@@ -0,0 +1,188 @@
'use strict';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
less: {
dist: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'src/less/colorpicker.less',
dest: 'dist/css/<%= pkg.name %>.css'
}
},
cssmin: {
options: {
compatibility: 'ie8',
keepSpecialComments: '*',
sourceMap: true,
advanced: false
},
dist: {
src: 'dist/css/<%= pkg.name %>.css',
dest: 'dist/css/<%= pkg.name %>.min.css'
}
},
jshint: {
options: {
jshintrc: '.jshintrc'
},
files: [
'Gruntfile.js',
'docs/docs.js',
'dist/js/<%= pkg.name %>.js'
]
},
jsbeautifier: {
options: {
js: {
braceStyle: "collapse",
breakChainedMethods: false,
e4x: false,
evalCode: false,
indentChar: " ",
indentLevel: 0,
indentSize: 2,
indentWithTabs: false,
jslintHappy: false,
keepArrayIndentation: false,
keepFunctionIndentation: false,
maxPreserveNewlines: 2,
preserveNewlines: true,
spaceBeforeConditional: true,
spaceInParen: false,
unescapeStrings: false,
wrapLineLength: 0,
endWithNewline: true
}
},
src: ['src/js/*.js', 'docs/docs.js'],
dist: ['dist/js/<%= pkg.name %>.js']
},
combine: {
js: {
input: 'src/js/colorpicker-plugin-wrapper.js',
output: 'dist/js/<%= pkg.name %>.js',
tokens: [{
token: "//@version",
string: '<%= pkg.version %>'
}, {
token: "//@colorpicker-color",
file: 'src/js/colorpicker-color.js'
}, {
token: "//@colorpicker-defaults",
file: 'src/js/colorpicker-defaults.js'
}, {
token: "//@colorpicker-component",
file: 'src/js/colorpicker-component.js'
}]
},
less: {
input: 'src/less/colorpicker.less',
output: 'src/less/colorpicker.less',
tokens: [{
token: "//@version",
string: '<%= pkg.version %>'
}]
}
},
strip_code: {
src: {
src: 'dist/js/*.js'
}
},
uglify: {
options: {
banner: '/*!\n * Bootstrap Colorpicker v<%= pkg.version %>\n' +
' * https://itsjavi.com/bootstrap-colorpicker/\n */\n'
},
dist: {
files: {
'dist/js/<%= pkg.name %>.min.js': [
'dist/js/<%= pkg.name %>.js'
]
}
}
},
watch: {
less: {
files: [
'src/less/*.less'
],
tasks: ['combine:less', 'less', 'cssmin']
},
js: {
files: [
'src/js/*.js',
'docs/docs.js'
],
tasks: ['jsbeautifier:src', 'combine:js', 'jsbeautifier:dist', 'uglify', 'jshint']
},
handlebars: {
files: [
'docs/*.hbs',
'docs/**/*.hbs',
'docs/helpers/**/*.js'
],
tasks: ['assemble']
}
},
assemble: {
options: {
assets: 'docs/assets',
helpers: ['docs/helpers/code'],
partials: ['docs/includes/**/*.hbs'],
layout: ['docs/layout.hbs'],
data: ['package.json'],
flatten: true
},
site: {
src: ['docs/pages/*.hbs'],
dest: './'
}
},
clean: {
dist: [
'dist/css/*',
'dist/js/*',
'index_new.html'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-jsbeautifier');
grunt.loadNpmTasks('grunt-combine');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-assemble');
grunt.loadNpmTasks('grunt-strip-code');
// Register tasks
grunt.registerTask('default', [
'clean',
'combine:less',
'less',
'cssmin',
'jsbeautifier:src',
'combine:js',
'jsbeautifier:dist',
'strip_code',
'uglify',
'assemble',
'jshint'
]);
grunt.registerTask('dev', [
'watch'
]);
};

View File

@@ -2,12 +2,12 @@
Simple and customizable colorpicker component for Twitter Bootstrap.
[![Build Status](https://api.travis-ci.org/farbelous/bootstrap-colorpicker.svg?branch=v2)](https://travis-ci.org/farbelous/bootstrap-colorpicker)
[![Build Status](https://api.travis-ci.org/farbelous/bootstrap-colorpicker.svg?branch=v2.x)](https://travis-ci.org/farbelous/bootstrap-colorpicker)
## Installation
For downloading the source code, you have many choices:
- Downloading the [latest v2 source code ZIP file](https://github.com/farbelous/bootstrap-colorpicker/archive/v2.zip)
- Downloading the [latest v2.x source code ZIP file](https://github.com/farbelous/bootstrap-colorpicker/archive/v2.x.zip)
- Cloning the source code: `git clone https://github.com/farbelous/bootstrap-colorpicker.git`
- Installing via NPM: `npm install bootstrap-colorpicker`
- Installing via Yarn: `yarn add bootstrap-colorpicker`
@@ -18,7 +18,7 @@ For downloading the source code, you have many choices:
- [Documentation and demos](https://farbelous.github.io/bootstrap-colorpicker/v2/)
## Contributing and reporting issues
If you want to contribute to the source code or report issues and suggestions, please read the [CONTRIBUTING.md](CONTRIBUTING.md) guidelines first. Some steps are mandatory in order to accept a Pull Request.
If you want to contribute to the source code or report issues and suggestions, please read the [CONTRIBUTING.md](.github/CONTRIBUTING.md) guidelines first. Some steps are mandatory in order to accept a Pull Request.
## Credits
Originally written by [Stefan Petre](http://www.eyecon.ro/)

View File

@@ -1,20 +0,0 @@
{
"name": "bootstrap-colorpicker",
"main": [
"dist/css/bootstrap-colorpicker.css",
"dist/js/bootstrap-colorpicker.js"
],
"dependencies": {
"jquery": ">=1.10"
},
"ignore": [
"\\.*",
"/index.html",
"/package.json",
"/composer.json",
"/Gruntfile.js",
"/.travis.yml",
"/travis.sh",
"/server.js"
]
}

View File

@@ -0,0 +1,15 @@
{
"name": "itsjavi/bootstrap-colorpicker",
"description": "Fancy and customizable colorpicker plugin for Twitter Bootstrap",
"license": "Apache License Version 2.0",
"authors": [
{
"name": "Javier Aguilar",
"homepage": "https://itsjavi.com"
}
],
"minimum-stability": "dev",
"require": {
"components/jquery" : ">=1.10"
}
}

View File

@@ -861,7 +861,7 @@
'keyup.colorpicker': $.proxy(this.keyup, this)
});
this.input.on({
'change.colorpicker': $.proxy(this.change, this)
'input.colorpicker': $.proxy(this.change, this)
});
if (this.component === false) {
this.element.on({
@@ -1248,20 +1248,6 @@
return false;
},
change: function(e) {
this.keyup(e);
},
keyup: function(e) {
if ((e.keyCode === 38)) {
if (this.color.value.a < 1) {
this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
}
this.update(true);
} else if ((e.keyCode === 40)) {
if (this.color.value.a > 0) {
this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
}
this.update(true);
} else {
this.color = this.createColor(this.input.val());
// Change format dynamically
// Only occurs if user choose the dynamic format by
@@ -1274,7 +1260,26 @@
this.updateComponent();
this.updatePicker();
}
this.element.trigger({
type: 'changeColor',
color: this.color,
value: this.input.val()
});
},
keyup: function(e) {
if ((e.keyCode === 38)) {
if (this.color.value.a < 1) {
this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
}
this.update(true);
} else if ((e.keyCode === 40)) {
if (this.color.value.a > 0) {
this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
}
this.update(true);
}
this.element.trigger({
type: 'changeColor',
color: this.color,

File diff suppressed because one or more lines are too long

View File

@@ -18,7 +18,7 @@
<link href="dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="docs/assets/main.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
</head>

View File

@@ -0,0 +1,794 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Colorpicker for Twitter Bootstrap</title>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-85082661-5"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-85082661-5');
</script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css" rel="stylesheet">
<link href="dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="docs/assets/main.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1><i class="glyphicon glyphicon-tint"></i> Bootstrap Colorpicker 2.5.2
<small>for Twitter Bootstrap</small>
</h1>
</div>
<div class="row">
<article class="col-md-12">
<p>
Fancy and customizable colorpicker plugin for Twitter Bootstrap.
Originally written by <a
href="https://twitter.com/stefanpetre/" target="_blank">Stefan Petre</a> and maintained by
<a href="https://itsjavi.com/" target="_blank">Javi Aguilar</a> and the Github community.
</p>
<p class="alert alert-warning">
<b>NOTE</b> That this is an older version of the library documentation, please check
the project <a href="https://github.com/farbelous/bootstrap-colorpicker/blob/master/README.md">README</a>
to find the documentation for the newer and latest versions.
</p>
</article>
</div>
<div class="row">
<article class="col-md-12">
<hr>
<div class="social">
<a href="https://github.com/farbelous/bootstrap-colorpicker/" target="_blank"
class="btn btn-default btn-sm"><span class="octicon octicon-mark-github"></span>
Source code
</a>
<a href="https://github.com/farbelous/bootstrap-colorpicker/releases" target="_blank"
class="btn btn-default btn-sm">
Latest Releases
</a>
<a href="https://github.com/farbelous/bootstrap-colorpicker/archive/2.5.2.zip" target="_blank"
class="btn btn-success btn-sm"><i class="glyphicon glyphicon-download-alt"></i>
Download v2.5.2
</a>
</div>
<hr>
</article>
</div>
<div class="row">
<div class="col-md-7">
<h2>Documentation</h2>
<hr>
<p>Call the colopicker via javascript:</p>
<pre class="well">$('.sample-selector').colorpicker({ /*options...*/ });</pre>
<h3>Options</h3>
<p>
You can set colorpicker options either as a plugin parameter or data-* attributes
</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">Type</th>
<th style="width: 100px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>format</td>
<td>string</td>
<td>false</td>
<td>If not false, forces the color format to be hex, rgb or rgba, otherwise the format is
automatically detected.
</td>
</tr>
<tr>
<td>color</td>
<td>string</td>
<td>false</td>
<td>If not false, sets the color to this value.</td>
</tr>
<tr>
<td>container</td>
<td>string or jQuery Element</td>
<td>false</td>
<td>If not false, the picker will be contained inside this element, otherwise it will be
appended to the document body.
</td>
</tr>
<tr>
<td>component</td>
<td>string or jQuery Element</td>
<td>'.add-on, .input-group-addon'</td>
<td>Children selector for the component or element that trigger the colorpicker and which
background color will change (needs an inner &lt;i&gt; element).
</td>
</tr>
<tr>
<td>input</td>
<td>string or jQuery Element</td>
<td>'input'</td>
<td>Children selector for the input that will store the picker selected value.</td>
</tr>
<tr>
<td>hexNumberSignPrefix</td>
<td>boolean</td>
<td>true</td>
<td>If true, put a '&num;' (number sign) before hex strings.
</td>
</tr>
<tr>
<td>horizontal</td>
<td>boolean</td>
<td>false</td>
<td>If true, the hue and alpha channel bars will be rendered horizontally, above the saturation
selector.
</td>
</tr>
<tr>
<td>inline</td>
<td>boolean</td>
<td>false</td>
<td>If true, forces to show the colorpicker as an inline element.</td>
</tr>
<tr>
<td>sliders</td>
<td>object</td>
<td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
<td>Vertical sliders configuration (read source code if you really need to tweak this).</td>
</tr>
<tr>
<td>slidersHorz</td>
<td>object</td>
<td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
<td>Horizontal sliders configuration (read source code if you really need to tweak this).</td>
</tr>
<tr>
<td>template</td>
<td>string</td>
<td><abbr title='please, read the source code to see this value'>[...]</abbr></td>
<td>Customizes the default colorpicker HTML template.</td>
</tr>
<tr>
<td>align</td>
<td>string</td>
<td>'right'</td>
<td>By default, the colorpicker is aligned to the right of the input. If you need to switch it
to the left, set align to 'left'.
</td>
</tr>
<tr>
<td>customClass</td>
<td>string</td>
<td>null</td>
<td>Adds this class to the colorpicker widget.</td>
</tr>
<tr>
<td>colorSelectors</td>
<td>object</td>
<td>null</td>
<td>List of pre selected colors (hex format). If you choose one of these colors, the alias is returned instead of the hex
code.
</td>
</tr>
<tr>
<td>fallbackColor</td>
<td>string</td>
<td>null</td>
<td>
Fallback color string that will be applied when the color failed to be parsed.
If <var>null</var>, it will keep the current color if any.
</td>
</tr>
<tr>
<td>fallbackFormat</td>
<td>string</td>
<td>hex</td>
<td>
Fallback color format (e.g. when not specified or for alias mode, when selecting non aliased colors)
</td>
</tr>
</tbody>
</table>
<h3>jQuery API Methods</h3>
<p>General usage methods</p>
<h4>.colorpicker(options)</h4>
<p>Initializes an colorpicker.</p>
<h4>.colorpicker('getValue', defaultValue)</h4>
<p>Gets the value from the input or the data attribute (if has no input), otherwise returns the default
value, which defaults to #000000 if not specified.</p>
<h4>.colorpicker('setValue', value)</h4>
<p>Set a new value for the color picker (also updates everything). Triggers 'changeColor' event.</p>
<h4>.colorpicker('show')</h4>
<p>Show the color picker</p>
<h4>.colorpicker('hide')</h4>
<p>Hide the color picker</p>
<h4>.colorpicker('reposition')</h4>
<p>Updates the color picker's position relative to the element</p>
<h4>.colorpicker('update')</h4>
<p>Refreshes the widget colors (this is done automatically)</p>
<h4>.colorpicker('enable')</h4>
<p>Enable the color picker.</p>
<h4>.colorpicker('disable')</h4>
<p>Disable the color picker.</p>
<h4>.colorpicker('destroy')</h4>
<p>Destroys the colorpicker widget and unbind all .colorpicker events from the element and component</p>
<h4>.data('colorpicker')</h4>
<p>Access to the colorpicker API directly</p>
<h4>.data('colorpicker').color</h4>
<p>Access to the colorpicker Color object information</p>
<hr>
<h3>Color object methods</h3>
<p>Each triggered events have a color object (avaliable through event.color, see the example at the
bottom) used internally by the picker. This object has several useful methods. These are the more
commonly used:</p>
<h4>.setColor(value)</h4>
<p>Set a new color. The value is parsed and tries to do a quess on the format.</p>
<h4>.setHue(value)</h4>
<p>Set the HUE with a value between 0 and 1.</p>
<h4>.setSaturation(value)</h4>
<p>Set the saturation with a value between 0 and 1.</p>
<h4>.setBrightness(value)</h4>
<p>Set the brightness with a value between 0 and 1.</p>
<h4>.setAlpha(value)</h4>
<p>Set the transparency with a value between 0 and 1.</p>
<h4>.toRGB()</h4>
<p>Returns a hash with red, green, blue and alpha.</p>
<h4>.toHex()</h4>
<p>Returns a string with HEX format for the current color.</p>
<h4>.toHSL()</h4>
<p>Returns a hash with HSLA values.</p>
<hr>
<h3>Events</h3>
<p>The colorpicker plugin exposes some events</p>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 150px;">Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>create</td>
<td>This event fires immediately when the color picker is created.</td>
</tr>
<tr>
<td>showPicker</td>
<td>This event fires immediately when the color picker is displayed.</td>
</tr>
<tr>
<td>hidePicker</td>
<td>This event is fired immediately when the color picker is hidden.</td>
</tr>
<tr>
<td>changeColor</td>
<td>This event is fired when the color is changed.</td>
</tr>
<tr>
<td>disable</td>
<td>This event is fired immediately when the color picker is disabled, except if it was
initialized as disabled.
</td>
</tr>
<tr>
<td>enable</td>
<td>This event is fired immediately when the color picker is enabled, except upon
initialization.
</td>
</tr>
<tr>
<td>destroy</td>
<td>This event fires immediately when the color picker is destroyed.</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-5">
<h2>Examples</h2>
<hr>
<div class="example">
<div class="example-title">Simple input field</div>
<div class="example-content well">
<div class="example-content-widget">
<input id="cp1" type="text" class="form-control" value="#5367ce"/>
<script>
$(function () {
$('#cp1').colorpicker();
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;input id=&quot;cp1&quot; type=&quot;text&quot; class=&quot;form-control&quot; value=&quot;#5367ce&quot; &#x2F;&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp1&#39;).colorpicker();
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">As a component</div>
<div class="example-content well">
<div class="example-content-widget">
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp2').colorpicker();
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp2&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input type=&quot;text&quot; value=&quot;#00AABB&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp2&#39;).colorpicker();
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">With custom options</div>
<div class="example-description">Sample overriding the initial color and format</div>
<div class="example-content well">
<div class="example-content-widget">
<div id="cp3" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp3').colorpicker({
color: '#AA3399',
format: 'rgb'
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp3&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input type=&quot;text&quot; value=&quot;#00AABB&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp3&#39;).colorpicker({
color: &#39;#AA3399&#39;,
format: &#39;rgb&#39;
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Working with events</div>
<div class="example-content well">
<div class="example-content-widget">
<a href="#" class="btn btn-default" id="cp4">Change background color</a>
<script>
$(function () {
$('#cp4').colorpicker().on('changeColor', function (e) {
$('body')[0].style.backgroundColor = e.color.toString('rgba');
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot; id=&quot;cp4&quot;&gt;Change background color&lt;&#x2F;a&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp4&#39;).colorpicker().on(&#39;changeColor&#39;, function(e) {
$(&#39;body&#39;)[0].style.backgroundColor = e.color.toString(
&#39;rgba&#39;);
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Transparent color support</div>
<div class="example-content well">
<div class="example-content-widget">
<input type="text" class="form-control" id="cp5"/>
<script>
$(function () {
$('#cp5').colorpicker({
color: "transparent",
format: "hex"
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;cp5&quot; &#x2F;&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp5&#39;).colorpicker({
color: &quot;transparent&quot;,
format: &quot;hex&quot;
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Horizontal mode</div>
<div class="example-content well">
<div class="example-content-widget">
<input type="text" class="form-control" id="cp6" />
<script>
$(function () {
$('#cp6').colorpicker({
color: "#88cc33",
horizontal: true
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;cp6&quot; &#x2F;&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp6&#39;).colorpicker({
color: &quot;#88cc33&quot;,
horizontal: true
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Inline mode</div>
<div class="example-content well">
<div class="example-content-widget">
<div id="cp7" class="inl-bl"></div>
<style>
.inl-bl {
display: inline-block;
}
</style>
<script>
$(function () {
$('#cp7').colorpicker({
color:'#ffaa00',
container: true,
inline:true
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp7&quot; class=&quot;inl-bl&quot;&gt;&lt;&#x2F;div&gt;
&lt;style&gt;
.inl-bl {
display: inline-block;
}
&lt;&#x2F;style&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp7&#39;).colorpicker({
color: &#39;#ffaa00&#39;,
container: true,
inline: true
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Aliased color palette</div>
<div class="example-content well">
<div class="example-content-widget">
<div id="cp8" data-format="alias" class="input-group colorpicker-component">
<input type="text" value="primary" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<script>
$(function () {
$('#cp8').colorpicker({
colorSelectors: {
'black': '#000000',
'white': '#ffffff',
'red': '#FF0000',
'default': '#777777',
'primary': '#337ab7',
'success': '#5cb85c',
'info': '#5bc0de',
'warning': '#f0ad4e',
'danger': '#d9534f'
}
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp8&quot; data-format=&quot;alias&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input type=&quot;text&quot; value=&quot;primary&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp8&#39;).colorpicker({
colorSelectors: {
&#39;black&#39;: &#39;#000000&#39;,
&#39;white&#39;: &#39;#ffffff&#39;,
&#39;red&#39;: &#39;#FF0000&#39;,
&#39;default&#39;: &#39;#777777&#39;,
&#39;primary&#39;: &#39;#337ab7&#39;,
&#39;success&#39;: &#39;#5cb85c&#39;,
&#39;info&#39;: &#39;#5bc0de&#39;,
&#39;warning&#39;: &#39;#f0ad4e&#39;,
&#39;danger&#39;: &#39;#d9534f&#39;
}
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Customized widget size</div>
<div class="example-description">Also showing the support of HTML color names</div>
<div class="example-content well">
<div class="example-content-widget">
<input id="cp9" type="text" class="form-control" value="pink"/>
<style>
.colorpicker-2x .colorpicker-saturation {
width: 200px;
height: 200px;
}
.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
width: 30px;
height: 200px;
}
.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
height: 30px;
}
</style>
<script>
$(function () {
$('#cp9').colorpicker({
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;input id=&quot;cp9&quot; type=&quot;text&quot; class=&quot;form-control&quot; value=&quot;pink&quot; &#x2F;&gt;
&lt;style&gt;
.colorpicker-2x .colorpicker-saturation {
width: 200px;
height: 200px;
}
.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
width: 30px;
height: 200px;
}
.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
height: 30px;
}
&lt;&#x2F;style&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp9&#39;).colorpicker({
customClass: &#39;colorpicker-2x&#39;,
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
alpha: {
maxTop: 200
}
}
});
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Disabled / enabled status</div>
<div class="example-content well">
<div class="example-content-widget">
<div id="cp10" class="input-group colorpicker-component">
<input disabled type="text" value="" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
<br>
<p>
<a class="btn btn-sm btn-default enable-button" href="#">Enable</a>
<a class="btn btn-sm btn-default disable-button" href="#">Disable</a>
</p>
<script>
$(function () {
$(".disable-button").click(function(e) {
e.preventDefault();
$("#cp10").colorpicker('disable');
});
$(".enable-button").click(function(e) {
e.preventDefault();
$("#cp10").colorpicker('enable');
});
$('#cp10').colorpicker();
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;div id=&quot;cp10&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input disabled type=&quot;text&quot; value=&quot;&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;br&gt;
&lt;p&gt;
&lt;a class=&quot;btn btn-sm btn-default enable-button&quot; href=&quot;#&quot;&gt;Enable&lt;&#x2F;a&gt;
&lt;a class=&quot;btn btn-sm btn-default disable-button&quot; href=&quot;#&quot;&gt;Disable&lt;&#x2F;a&gt;
&lt;&#x2F;p&gt;
&lt;script&gt;
$(function() {
$(&quot;.disable-button&quot;).click(function(e) {
e.preventDefault();
$(&quot;#cp10&quot;).colorpicker(&#39;disable&#39;);
});
$(&quot;.enable-button&quot;).click(function(e) {
e.preventDefault();
$(&quot;#cp10&quot;).colorpicker(&#39;enable&#39;);
});
$(&#39;#cp10&#39;).colorpicker();
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<div class="example">
<div class="example-title">Inside a modal</div>
<div class="example-content well">
<div class="example-content-widget">
<button class="btn btn-primary btn-md" data-toggle="modal" data-target="#myModal">
Show modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="cp11" class="input-group colorpicker-component">
<input type="text" value="" class="form-control"/>
<span class="input-group-addon"><i></i></span>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$('#cp11').colorpicker();
});
</script>
</div>
<button type="button" class="btn btn-link btn-xs example-code-toggle" data-toggle="button">View source</button>
<div class="example-code">&lt;button class=&quot;btn btn-primary btn-md&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;
Show modal
&lt;&#x2F;button&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;myModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot;
aria-hidden=&quot;true&quot;&gt;
&lt;div class=&quot;modal-dialog&quot;&gt;
&lt;div class=&quot;modal-content&quot;&gt;
&lt;div class=&quot;modal-body&quot;&gt;
&lt;div id=&quot;cp11&quot; class=&quot;input-group colorpicker-component&quot;&gt;
&lt;input type=&quot;text&quot; value=&quot;&quot; class=&quot;form-control&quot; &#x2F;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i&gt;&lt;&#x2F;i&gt;&lt;&#x2F;span&gt;
&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;script&gt;
$(function() {
$(&#39;#cp11&#39;).colorpicker();
});
&lt;&#x2F;script&gt;</div> </div>
</div>
<script>
$(function () {
$('.example-code-toggle').on('click', function () {
$(this).parent().find('.example-code').toggle();
});
});
</script>
</div>
</div>
</div>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,48 @@
{
"name": "bootstrap-colorpicker",
"version": "2.5.3",
"description": "Fancy and customizable colorpicker plugin for Twitter Bootstrap",
"main": "./dist/js/bootstrap-colorpicker.js",
"homepage": "https://itsjavi.com/bootstrap-colorpicker/",
"repository": {
"type": "git",
"url": "https://github.com/itsjavi/bootstrap-colorpicker.git"
},
"bugs": {
"url": "https://github.com/itsjavi/bootstrap-colorpicker/issues"
},
"keywords": [
"bootstrap",
"colorpicker"
],
"author": "Javier Aguilar",
"license": "Apache-2.0",
"licenses": [
{
"type": "Apache-2.0",
"url": "http://opensource.org/licenses/Apache-2.0"
}
],
"dependencies": {
"jquery": ">=1.10"
},
"scripts": {
"test": "jasmine"
},
"devDependencies": {
"grunt": "~0.4.5",
"grunt-assemble": "~0.4.0",
"grunt-combine": "~0.8.3",
"grunt-contrib-clean": "~1.0.0",
"grunt-contrib-cssmin": "~1.0.1",
"grunt-contrib-jshint": "~1.0.0",
"grunt-contrib-less": "~1.2.0",
"grunt-contrib-uglify": "~1.0.0",
"grunt-contrib-watch": "~1.0.0",
"grunt-jsbeautifier": "~0.2.10",
"grunt-strip-code": "^1.0.6",
"jasmine": "^2.6.0",
"jquery": ">=1.10",
"jsdom": "^10.1.0"
}
}

View File

@@ -102,7 +102,7 @@ var Colorpicker = function(element, options) {
'keyup.colorpicker': $.proxy(this.keyup, this)
});
this.input.on({
'change.colorpicker': $.proxy(this.change, this)
'input.colorpicker': $.proxy(this.change, this)
});
if (this.component === false) {
this.element.on({
@@ -489,20 +489,6 @@ Colorpicker.prototype = {
return false;
},
change: function(e) {
this.keyup(e);
},
keyup: function(e) {
if ((e.keyCode === 38)) {
if (this.color.value.a < 1) {
this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
}
this.update(true);
} else if ((e.keyCode === 40)) {
if (this.color.value.a > 0) {
this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
}
this.update(true);
} else {
this.color = this.createColor(this.input.val());
// Change format dynamically
// Only occurs if user choose the dynamic format by
@@ -515,7 +501,26 @@ Colorpicker.prototype = {
this.updateComponent();
this.updatePicker();
}
this.element.trigger({
type: 'changeColor',
color: this.color,
value: this.input.val()
});
},
keyup: function(e) {
if ((e.keyCode === 38)) {
if (this.color.value.a < 1) {
this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
}
this.update(true);
} else if ((e.keyCode === 40)) {
if (this.color.value.a > 0) {
this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
}
this.update(true);
}
this.element.trigger({
type: 'changeColor',
color: this.color,

File diff suppressed because it is too large Load Diff

View File

@@ -10,14 +10,14 @@
},
"ignore": [],
"homepage": "https://github.com/eternicode/bootstrap-datepicker",
"version": "1.8.0",
"_release": "1.8.0",
"version": "1.9.0",
"_release": "1.9.0",
"_resolution": {
"type": "version",
"tag": "v1.8.0",
"commit": "0d32bc5d91da11d9a3587537c3c36ce7ee815c94"
"tag": "v1.9.0",
"commit": "fb8776d65825068b9f914ab37d6fd847c951f488"
},
"_source": "https://github.com/eternicode/bootstrap-datepicker.git",
"_target": "^1.7.0",
"_target": "^1.7",
"_originalSource": "bootstrap-datepicker"
}

View File

@@ -1,4 +1,4 @@
# EditorConfig is awesome: http://EditorConfig.org
# EditorConfig is awesome: https://editorconfig.org
root = true

View File

@@ -1,10 +0,0 @@
docs/_build
*-dist.zip
# OS or Editor folders
.DS_Store
.idea
# Folders to ignore
bower_components
node_modules

View File

@@ -1,9 +1,7 @@
sudo: false
language: node_js
node_js:
- "6"
- "12"
before_script:
- npm install -g grunt-cli

View File

@@ -1,6 +1,24 @@
Changelog
=========
1.9.0
-----
## Features
* Added clearDates for clears range (#2114)
## Bugfix
* Hide today button when before start or after end date (#2474)
* Fix navigation buttons states (#2277)
* Fix updateNavArrows bug (#2230)
## Locales
### Bugfix
* Added monthsTitle to Latvian locale (#2255)
* Rename en-CA locale file to match the rest of the files (#2217)
* Fix cs locale date format (#2275)
* Added translation for months (fixing the default 'en' locale) (#2271)
1.7.1
-----
@@ -351,7 +369,7 @@ Locale changes:
* De-duplicated Ukrainian files from `uk` and `ua` to just `ua`
Repository changes:
* Documentation has been moved from the base `README.md` file to the `docs/` folder, and been re-written to use sphinx docs. The docs are now viewable online at http://bootstrap-datepicker.readthedocs.org/. The [gh-pages](http://eternicode.github.io/bootstrap-datepicker/) branch has been reduced to the sandbox demo.
* Documentation has been moved from the base `README.md` file to the `docs/` folder, and been re-written to use sphinx docs. The docs are now viewable online at https://bootstrap-datepicker.readthedocs.org/. The [gh-pages](https://uxsolutions.github.io/bootstrap-datepicker/) branch has been reduced to the sandbox demo.
* Changed the js file header to point at repo/demo/docs urls instead of eyecon.ro
* The css files are now the output of the standalone build scripts instead of `build/build.less` etc.
* `composer.json` now supports component-installer
@@ -465,7 +483,7 @@ Small optimizations release
v1.0.1
------
* Support for [Bower](http://twitter.github.com/bower/)
* Support for [Bower](https://bower.io/)
* Component pickers are now aligned under the input, not the add-on element.
* Japanese locale now has "today" and "format".
* "remove" method removes `.data().date` if the datepicker is on a non-input.

View File

@@ -67,8 +67,5 @@ members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
This Code of Conduct is adapted from the [Contributor Covenant](https://contributor-covenant.org), version 1.4,
available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>

View File

@@ -2,14 +2,14 @@
## Support requests
The issue tracker is not the place for support requests. If you get stuck with bootstrap-datepicker, it's very likely that the fine folks at [StackOverflow](http://stackoverflow.com/) will be able to help you; simply describe the problem you're having and provide them a link to the repo (so they know what code you're using). Another option is to post to the [bootstrap-datepicker google group](https://groups.google.com/group/bootstrap-datepicker).
The issue tracker is not the place for support requests. If you get stuck with bootstrap-datepicker, it's very likely that the fine folks at [StackOverflow](https://stackoverflow.com/) will be able to help you; simply describe the problem you're having and provide them a link to the repo (so they know what code you're using). Another option is to post to the [bootstrap-datepicker google group](https://groups.google.com/group/bootstrap-datepicker).
## Issues
If you've found a bug in bootstrap-datepicker, we want to know about it! However, please keep the following in mind:
* This is not the bootstrap-datepicker from [eyecon.ro](http://www.eyecon.ro/bootstrap-datepicker/). Stefan provided the initial code for bootstrap-datepicker, but this repo is divergent from his codebase. Please make sure you're using either the latest tagged version or the latest master from https://github.com/uxsolutions/bootstrap-datepicker/.
* A working example of the bug you've found is *much* easier to work with than a description alone. If possible, please provide a link to a demonstration of the bug, perhaps using http://jsfiddle.net/ .
* This is not the bootstrap-datepicker from [eyecon.ro](https://www.eyecon.ro/bootstrap-datepicker/). Stefan provided the initial code for bootstrap-datepicker, but this repo is divergent from his codebase. Please make sure you're using either the latest tagged version or the latest master from https://github.com/uxsolutions/bootstrap-datepicker/.
* A working example of the bug you've found is *much* easier to work with than a description alone. If possible, please provide a link to a demonstration of the bug, perhaps using https://jsfiddle.net/ .
* CDN-backed assets can be found at http://bsdp-assets.blackcherry.us/ . These should be used *only* for building test cases, as they may be removed or changed at any time.
* Finally, it's possible someone else has already reported the same bug you have. Please search the issue tracker for similar issues before posting your own. Thanks!

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/

View File

@@ -1,5 +1,5 @@
/*!
* Datepicker for Bootstrap v1.8.0 (https://github.com/uxsolutions/bootstrap-datepicker)
* Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
*
* Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
*/
@@ -89,6 +89,10 @@
var Datepicker = function(element, options){
$.data(element, 'datepicker', this);
this._events = [];
this._secondaryEvents = [];
this._process_options(options);
this.dates = new DateArray();
@@ -98,7 +102,7 @@
this.element = $(element);
this.isInput = this.element.is('input');
this.inputField = this.isInput ? this.element : this.element.find('input');
this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .btn') : false;
this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .input-group-append, .input-group-prepend, .btn') : false;
if (this.component && this.component.length === 0)
this.component = false;
this.isInline = !this.component && this.element.is('div');
@@ -308,8 +312,6 @@
o.defaultViewDate = UTCToday();
}
},
_events: [],
_secondaryEvents: [],
_applyEvents: function(evs){
for (var i=0, el, ch, ev; i < evs.length; i++){
el = evs[i][0];
@@ -465,7 +467,7 @@
},
show: function(){
if (this.inputField.prop('disabled') || (this.inputField.prop('readonly') && this.o.enableOnReadonly === false))
if (this.inputField.is(':disabled') || (this.inputField.prop('readonly') && this.o.enableOnReadonly === false))
return;
if (!this.isInline)
this.picker.appendTo(this.o.container);
@@ -963,6 +965,8 @@
todaytxt = dates[this.o.language].today || dates['en'].today || '',
cleartxt = dates[this.o.language].clear || dates['en'].clear || '',
titleFormat = dates[this.o.language].titleFormat || dates['en'].titleFormat,
todayDate = UTCToday(),
titleBtnVisible = (this.o.todayBtn === true || this.o.todayBtn === 'linked') && todayDate >= this.o.startDate && todayDate <= this.o.endDate && !this.weekOfDateIsDisabled(todayDate),
tooltip,
before;
if (isNaN(year) || isNaN(month))
@@ -971,7 +975,7 @@
.text(DPGlobal.formatDate(d, titleFormat, this.o.language));
this.picker.find('tfoot .today')
.text(todaytxt)
.css('display', this.o.todayBtn === true || this.o.todayBtn === 'linked' ? 'table-cell' : 'none');
.css('display', titleBtnVisible ? 'table-cell' : 'none');
this.picker.find('tfoot .clear')
.text(cleartxt)
.css('display', this.o.clearBtn === true ? 'table-cell' : 'none');
@@ -1151,12 +1155,12 @@
factor *= 10;
/* falls through */
case 1:
prevIsDisabled = Math.floor(year / factor) * factor < startYear;
prevIsDisabled = Math.floor(year / factor) * factor <= startYear;
nextIsDisabled = Math.floor(year / factor) * factor + factor > endYear;
break;
case 0:
prevIsDisabled = year <= startYear && month < startMonth;
nextIsDisabled = year >= endYear && month > endMonth;
prevIsDisabled = year <= startYear && month <= startMonth;
nextIsDisabled = year >= endYear && month >= endMonth;
break;
}
@@ -2003,7 +2007,7 @@
/* DATEPICKER VERSION
* =================== */
$.fn.datepicker.version = '1.8.0';
$.fn.datepicker.version = '1.9.0';
$.fn.datepicker.deprecated = function(msg){
var console = window.console;

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
!function(a){a.fn.datepicker.dates.az={days:["Bazar","Bazar ertəsi","Çərşənbə axşamı","Çərşənbə","Cümə axşamı","Cümə","Şənbə"],daysShort:["B.","B.e","Ç.a","Ç.","C.a","C.","Ş."],daysMin:["B.","B.e","Ç.a","Ç.","C.a","C.","Ş."],months:["Yanvar","Fevral","Mart","Aprel","May","İyun","İyul","Avqust","Sentyabr","Oktyabr","Noyabr","Dekabr"],monthsShort:["Yan","Fev","Mar","Apr","May","İyun","İyul","Avq","Sen","Okt","Noy","Dek"],today:"Bu gün",weekStart:1}}(jQuery);
!function(a){a.fn.datepicker.dates.az={days:["Bazar","Bazar ertəsi","Çərşənbə axşamı","Çərşənbə","Cümə axşamı","Cümə","Şənbə"],daysShort:["B.","B.e","Ç.a","Ç.","C.a","C.","Ş."],daysMin:["B.","B.e","Ç.a","Ç.","C.a","C.","Ş."],months:["Yanvar","Fevral","Mart","Aprel","May","İyun","İyul","Avqust","Sentyabr","Oktyabr","Noyabr","Dekabr"],monthsShort:["Yan","Fev","Mar","Apr","May","İyun","İyul","Avq","Sen","Okt","Noy","Dek"],today:"Bu gün",weekStart:1,clear:"Təmizlə",monthsTitle:"Aylar"}}(jQuery);

View File

@@ -0,0 +1 @@
!function(a){a.fn.datepicker.dates.bm={days:["Kari","Ntɛnɛn","Tarata","Araba","Alamisa","Juma","Sibiri"],daysShort:["Kar","Ntɛ","Tar","Ara","Ala","Jum","Sib"],daysMin:["Ka","Nt","Ta","Ar","Al","Ju","Si"],months:["Zanwuyekalo","Fewuruyekalo","Marisikalo","Awirilikalo","Mɛkalo","Zuwɛnkalo","Zuluyekalo","Utikalo","Sɛtanburukalo","ɔkutɔburukalo","Nowanburukalo","Desanburukalo"],monthsShort:["Zan","Few","Mar","Awi","Mɛ","Zuw","Zul","Uti","Sɛt","ɔku","Now","Des"],today:"Bi",monthsTitle:"Kalo",clear:"Ka jɔsi",weekStart:1,format:"dd/mm/yyyy"}}(jQuery);

View File

@@ -1 +1 @@
!function(a){a.fn.datepicker.dates.no={days:["søndag","mandag","tirsdag","onsdag","torsdag","fredag","lørdag"],daysShort:["søn","man","tir","ons","tor","fre","lør"],daysMin:["sø","ma","ti","on","to","fr","lø"],months:["januar","februar","mars","april","mai","juni","juli","august","september","oktober","vovember","desember"],monthsShort:["jan","feb","mar","apr","mai","jun","jul","aug","sep","okt","nov","des"],today:"i dag",monthsTitle:"Måneder",clear:"Nullstill",weekStart:1,format:"dd.mm.yyyy"}}(jQuery);
!function(a){a.fn.datepicker.dates.no={days:["søndag","mandag","tirsdag","onsdag","torsdag","fredag","lørdag"],daysShort:["søn","man","tir","ons","tor","fre","lør"],daysMin:["sø","ma","ti","on","to","fr","lø"],months:["januar","februar","mars","april","mai","juni","juli","august","september","oktober","november","desember"],monthsShort:["jan","feb","mar","apr","mai","jun","jul","aug","sep","okt","nov","des"],today:"i dag",monthsTitle:"Måneder",clear:"Nullstill",weekStart:1,format:"dd.mm.yyyy"}}(jQuery);

View File

@@ -1 +1 @@
!function(a){a.fn.datepicker.dates.sq={days:["E Diel","E Hënë","E Martē","E Mërkurë","E Enjte","E Premte","E Shtunë"],daysShort:["Die","Hën","Mar","Mër","Enj","Pre","Shtu"],daysMin:["Di","Hë","Ma","Më","En","Pr","Sht"],months:["Janar","Shkurt","Mars","Prill","Maj","Qershor","Korrik","Gusht","Shtator","Tetor","Nëntor","Dhjetor"],monthsShort:["Jan","Shk","Mar","Pri","Maj","Qer","Korr","Gu","Sht","Tet","Nën","Dhjet"],today:"Sot"}}(jQuery);
!function(a){a.fn.datepicker.dates.sq={days:["E Diel","E Hënë","E Martē","E Mërkurë","E Enjte","E Premte","E Shtunë"],daysShort:["Die","Hën","Mar","Mër","Enj","Pre","Shtu"],daysMin:["Di","Hë","Ma","Më","En","Pr","Sht"],months:["Janar","Shkurt","Mars","Prill","Maj","Qershor","Korrik","Gusht","Shtator","Tetor","Nëntor","Dhjetor"],monthsShort:["Jan","Shk","Mar","Pri","Maj","Qer","Korr","Gu","Sht","Tet","Nën","Dhjet"],monthsTitle:"Muaj",today:"Sot",weekStart:1,format:"dd/mm/yyyy",clear:"Pastro"}}(jQuery);

View File

@@ -1 +1 @@
!function(a){a.fn.datepicker.dates["zh-CN"]={days:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],daysShort:["周日","周一","周二","周三","周四","周五","周六"],daysMin:["日","一","二","三","四","五","六"],months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthsShort:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],today:"今",clear:"清除",format:"yyyymmdd",titleFormat:"yyyy年mm月",weekStart:1}}(jQuery);
!function(a){a.fn.datepicker.dates["zh-CN"]={days:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],daysShort:["周日","周一","周二","周三","周四","周五","周六"],daysMin:["日","一","二","三","四","五","六"],months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],monthsShort:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],today:"今天",monthsTitle:"选择月份",clear:"清除",format:"yyyy-mm-dd",titleFormat:"yyyy年mm月",weekStart:1}}(jQuery);

View File

@@ -17,4 +17,4 @@ $ make html
The docs will be generated, the output files will be placed in the `_build/html/` directory, and can be browsed (locally) with any browser.
The docs can also be found online at <http://bootstrap-datepicker.readthedocs.org/>.
The docs can also be found online at <https://bootstrap-datepicker.readthedocs.org/>.

View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="script/common.css">
<script src="script/common.js"></script>
<script>
function setup(){
$('input').datepicker({
format: 'mm-dd-yyyy',
showWeekDays: false
});
}
</script>
</head>
<body data-capture="input, .datepicker">
<div class="row">
<div class="col-sm-offset-4 col-sm-3">
<input type="text" class="form-control" value="03-03-2013">
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -6,9 +6,9 @@ Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap styl
.. figure:: _static/screenshots/demo_head.png
:align: center
Versions are incremented according to `semver <http://semver.org/>`_.
Versions are incremented according to `semver <https://semver.org/>`_.
`Online Demo <https://eternicode.github.io/bootstrap-datepicker/>`_
`Online Demo <https://uxsolutions.github.io/bootstrap-datepicker>`_
Requirements

View File

@@ -449,6 +449,9 @@ Boolean. Default: true
If false, the datepicker will not append the names of the weekdays to its view. Default behavior is appending the weekdays.
.. figure:: _static/screenshots/option_showweekdays.png
:align: center
title
-----

View File

@@ -102,6 +102,10 @@
var Datepicker = function(element, options){
$.data(element, 'datepicker', this);
this._events = [];
this._secondaryEvents = [];
this._process_options(options);
this.dates = new DateArray();
@@ -111,7 +115,7 @@
this.element = $(element);
this.isInput = this.element.is('input');
this.inputField = this.isInput ? this.element : this.element.find('input');
this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .btn') : false;
this.component = this.element.hasClass('date') ? this.element.find('.add-on, .input-group-addon, .input-group-append, .input-group-prepend, .btn') : false;
if (this.component && this.component.length === 0)
this.component = false;
this.isInline = !this.component && this.element.is('div');
@@ -321,8 +325,6 @@
o.defaultViewDate = UTCToday();
}
},
_events: [],
_secondaryEvents: [],
_applyEvents: function(evs){
for (var i=0, el, ch, ev; i < evs.length; i++){
el = evs[i][0];
@@ -478,7 +480,7 @@
},
show: function(){
if (this.inputField.prop('disabled') || (this.inputField.prop('readonly') && this.o.enableOnReadonly === false))
if (this.inputField.is(':disabled') || (this.inputField.prop('readonly') && this.o.enableOnReadonly === false))
return;
if (!this.isInline)
this.picker.appendTo(this.o.container);
@@ -976,6 +978,8 @@
todaytxt = dates[this.o.language].today || dates['en'].today || '',
cleartxt = dates[this.o.language].clear || dates['en'].clear || '',
titleFormat = dates[this.o.language].titleFormat || dates['en'].titleFormat,
todayDate = UTCToday(),
titleBtnVisible = (this.o.todayBtn === true || this.o.todayBtn === 'linked') && todayDate >= this.o.startDate && todayDate <= this.o.endDate && !this.weekOfDateIsDisabled(todayDate),
tooltip,
before;
if (isNaN(year) || isNaN(month))
@@ -984,7 +988,7 @@
.text(DPGlobal.formatDate(d, titleFormat, this.o.language));
this.picker.find('tfoot .today')
.text(todaytxt)
.css('display', this.o.todayBtn === true || this.o.todayBtn === 'linked' ? 'table-cell' : 'none');
.css('display', titleBtnVisible ? 'table-cell' : 'none');
this.picker.find('tfoot .clear')
.text(cleartxt)
.css('display', this.o.clearBtn === true ? 'table-cell' : 'none');
@@ -1164,12 +1168,12 @@
factor *= 10;
/* falls through */
case 1:
prevIsDisabled = Math.floor(year / factor) * factor < startYear;
prevIsDisabled = Math.floor(year / factor) * factor <= startYear;
nextIsDisabled = Math.floor(year / factor) * factor + factor > endYear;
break;
case 0:
prevIsDisabled = year <= startYear && month < startMonth;
nextIsDisabled = year >= endYear && month > endMonth;
prevIsDisabled = year <= startYear && month <= startMonth;
nextIsDisabled = year >= endYear && month >= endMonth;
break;
}
@@ -2016,7 +2020,7 @@
/* DATEPICKER VERSION
* =================== */
$.fn.datepicker.version = '1.8.0';
$.fn.datepicker.version = '1.9.0';
$.fn.datepicker.deprecated = function(msg){
var console = window.console;

View File

@@ -7,6 +7,8 @@
months: ["Yanvar", "Fevral", "Mart", "Aprel", "May", "İyun", "İyul", "Avqust", "Sentyabr", "Oktyabr", "Noyabr", "Dekabr"],
monthsShort: ["Yan", "Fev", "Mar", "Apr", "May", "İyun", "İyul", "Avq", "Sen", "Okt", "Noy", "Dek"],
today: "Bu gün",
weekStart: 1
weekStart: 1,
clear: "Təmizlə",
monthsTitle: 'Aylar'
};
}(jQuery));

View File

@@ -0,0 +1,18 @@
/**
* Bamanankan (bm) translation for bootstrap-datepicker
* Fatou Fall <fatou@medicmobile.org>
*/
;(function($){
$.fn.datepicker.dates['bm'] = {
days: ["Kari","Ntɛnɛn","Tarata","Araba","Alamisa","Juma","Sibiri"],
daysShort: ["Kar","Ntɛ","Tar","Ara","Ala","Jum","Sib"],
daysMin: ["Ka","Nt","Ta","Ar","Al","Ju","Si"],
months: ["Zanwuyekalo","Fewuruyekalo","Marisikalo","Awirilikalo","Mɛkalo","Zuwɛnkalo","Zuluyekalo","Utikalo","Sɛtanburukalo","ɔkutɔburukalo","Nowanburukalo","Desanburukalo"],
monthsShort: ["Zan","Few","Mar","Awi","Mɛ","Zuw","Zul","Uti","Sɛt","ɔku","Now","Des"],
today: "Bi",
monthsTitle: "Kalo",
clear: "Ka jɔsi",
weekStart: 1,
format: "dd/mm/yyyy"
};
}(jQuery));

View File

@@ -7,7 +7,7 @@
days: ['søndag', 'mandag', 'tirsdag', 'onsdag', 'torsdag', 'fredag', 'lørdag'],
daysShort: ['søn', 'man', 'tir', 'ons', 'tor', 'fre', 'lør'],
daysMin: ['sø', 'ma', 'ti', 'on', 'to', 'fr', 'lø'],
months: ['januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober', 'vovember', 'desember'],
months: ['januar', 'februar', 'mars', 'april', 'mai', 'juni', 'juli', 'august', 'september', 'oktober', 'november', 'desember'],
monthsShort: ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des'],
today: 'i dag',
monthsTitle: 'Måneder',

View File

@@ -9,7 +9,11 @@
daysMin: ["Di", "Hë", "Ma", "Më", "En", "Pr", "Sht"],
months: ["Janar", "Shkurt", "Mars", "Prill", "Maj", "Qershor", "Korrik", "Gusht", "Shtator", "Tetor", "Nëntor", "Dhjetor"],
monthsShort: ["Jan", "Shk", "Mar", "Pri", "Maj", "Qer", "Korr", "Gu", "Sht", "Tet", "Nën", "Dhjet"],
today: "Sot"
monthsTitle: "Muaj",
today: "Sot",
weekStart: 1,
format: "dd/mm/yyyy",
clear: "Pastro"
};
}(jQuery));

Some files were not shown because too many files have changed in this diff Show More