[Frontend] 靜態文件及套件整理

This commit is contained in:
dev01 2022-11-15 12:54:21 +08:00
parent f32af4ecde
commit 006f100c9c
79 changed files with 117356 additions and 632 deletions

View File

@ -1,185 +1,708 @@

<div class="row d-flex justify-content-between mx-3 mt-3">
<!-- 天氣圖 -->
<div class="col-sm-12 col-xl-4">
<img src="..\assets\img\clouds.png"
class="img-fluid"
style="min-height: 520px; background-color: aquamarine" />
</div>
<div class="col-sm-12 col-xl-4">
<div class="row">
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-info rounded position-relative text-white">
<h3 class="display-6 d-block m-0">21.5k</h3>
<small class="m-0">users signed up</small>
<main id="js-page-content" role="main" class="page-content">
<div class="row">
<div class="col-sm-12 col-xl-4">
<img src="img/clouds.png" class="img-fluid" style="min-height: 520px;">
</div>
<div class="col-sm-12 col-xl-4">
<div class="row">
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-primary-300 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
21.5k
<small class="m-0 l-h-n">users signed up</small>
</h3>
</div>
<i class="fal fa-user position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n1" style="font-size:6rem"></i>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-warning rounded position-relative text-white">
<h3 class="display-6 d-block m-0">$10,203</h3>
<small class="m-0">Visual Index Figure</small>
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-warning-400 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
$10,203
<small class="m-0 l-h-n">Visual Index Figure</small>
</h3>
</div>
<i class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
</div>
</div>
<div class="col-lg-12">
<div id="panel-2" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
<div class="panel-hdr">
<h2>
昨日/今日用電比較
</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative" style="min-height: 346.84px;">
<div class="p-1 position-absolute pos-right pos-top mt-3 mr-3 z-index-cloud d-flex align-items-center justify-content-center">
<div class="border-faded border-top-0 border-left-0 border-bottom-0 py-2 pr-4 mr-3 hidden-sm-down">
<div class="text-right fw-500 l-h-n d-flex flex-column">
<div class="h3 m-0 d-flex align-items-center justify-content-end">
<div class='icon-stack mr-2'>
<i class="base base-7 icon-stack-3x opacity-100 color-success-600"></i>
<i class="base base-7 icon-stack-2x opacity-100 color-success-500"></i>
<i class="fal fa-arrow-up icon-stack-1x opacity-100 color-white"></i>
</div>
$44.34 / GE
</div>
<span class="m-0 fs-xs text-muted">Increased Profit as per redux margins and estimates</span>
</div>
</div>
<div class="js-easy-pie-chart color-info-400 position-relative d-inline-flex align-items-center justify-content-center" data-percent="35" data-piesize="95" data-linewidth="10" data-scalelength="5">
<div class="js-easy-pie-chart color-success-400 position-relative position-absolute pos-left pos-right pos-top pos-bottom d-flex align-items-center justify-content-center" data-percent="65" data-piesize="60" data-linewidth="5" data-scalelength="1" data-scalecolor="#fff">
<div class="position-absolute pos-top pos-left pos-right pos-bottom d-flex align-items-center justify-content-center fw-500 fs-xl text-dark">78%</div>
</div>
</div>
</div>
<div id="flot-area" style="width:100%; height:300px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 mt-4">
<div class="card text-white bg-dark" style="min-height: 390px">
<div class="card-header">昨日/今日用電比較</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<div class="col-sm-12 col-xl-4">
<div class="row">
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-success-200 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
- 103.72
<small class="m-0 l-h-n">Offset Balance Ratio</small>
</h3>
</div>
<i class="fal fa-lightbulb position-absolute pos-right pos-bottom opacity-15 mb-n5 mr-n6" style="font-size: 8rem;"></i>
</div>
</div>
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g">
<div class="">
<h3 class="display-4 d-block l-h-n m-0 fw-500">
+40%
<small class="m-0 l-h-n">Product level increase</small>
</h3>
</div>
<i class="fal fa-globe position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
</div>
</div>
<div class="col-lg-12">
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
<div class="panel-hdr">
<h2>
本週/上週用電比較
</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative">
<div class="pb-5 pt-3">
<div class="row">
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-info-200 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,5,8,2</span>
</div>
<div>
<label class="fs-sm mb-0">Bounce Rate</label>
<h4 class="font-weight-bold mb-0">37.56%</h4>
</div>
</div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-info-300 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">5,3,1,7,9</span>
</div>
<div>
<label class="fs-sm mb-0">Sessions</label>
<h4 class="font-weight-bold mb-0">759</h4>
</div>
</div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-success-300 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">3,4,3,5,5</span>
</div>
<div>
<label class="fs-sm mb-0">New Sessions</label>
<h4 class="font-weight-bold mb-0">12.17%</h4>
</div>
</div>
<div class="col-6 col-xl-3 d-sm-flex align-items-center">
<div class="p-2 mr-3 bg-success-500 rounded">
<span class="peity-bar" data-peity="{&quot;fill&quot;: [&quot;#fff&quot;], &quot;width&quot;: 27, &quot;height&quot;: 27 }">6,4,7,5,6</span>
</div>
<div>
<label class="fs-sm mb-0">Clickthrough</label>
<h4 class="font-weight-bold mb-0">19.77%</h4>
</div>
</div>
</div>
</div>
<div id="flotVisit" style="width:100%; height:208px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-xl-4">
<div class="row">
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-success rounded position-relative text-white">
<h3 class="display-6 d-block m-0 fw-500">- 103.72</h3>
<small class="m-0">Offset Balance Ratio</small>
<div class="row">
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-lightbulb-on fa-2x blink"></i></button>
<button type="button" class="btn btn-secondary">照明系統  </button>
</div>
</div>
<div class="col-sm-6 col-xl-6">
<div class="p-3 bg-secondary rounded position-relative text-white">
<h3 class="display-6 d-block m-0 fw-500">+40%</h3>
<small class="m-0">Product level increase</small>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-thermometer-full fa-2x"></i></button>
<button type="button" class="btn btn-secondary">環境感測系統</button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-car-battery fa-2x"></i></button>
<button type="button" class="btn btn-secondary">電錶系統  </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-wind fa-2x"></i></button>
<button type="button" class="btn btn-secondary">空調系統  </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-window-restore fa-2x"></i></button>
<button type="button" class="btn btn-secondary">電梯系統  </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-door-closed fa-2x"></i></button>
<button type="button" class="btn btn-secondary">門禁系統  </button>
</div>
</div>
</div>
<div class="col-lg-12 mt-4">
<div class="card text-white bg-dark" style="min-height: 390px">
<div class="card-header">本週/上週用電比較</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-lightbulb-on fa-2x"></i></button>
<button type="button" class="btn btn-secondary">照明系統  </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-thermometer-full fa-2x"></i></button>
<button type="button" class="btn btn-secondary">環境感測系統</button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-car-battery fa-2x"></i></button>
<button type="button" class="btn btn-secondary">電錶系統  </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-wind fa-2x"></i></button>
<button type="button" class="btn btn-secondary">空調系統  </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-window-restore fa-2x"></i></button>
<button type="button" class="btn btn-secondary">電梯系統  </button>
</div>
<div class="btn-group btn-group-lg col-lg-6 mb-4">
<button type="button" class="btn btn-secondary"><i class="fal fa-door-closed fa-2x"></i></button>
<button type="button" class="btn btn-secondary">門禁系統  </button>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="row">
<div class="col-lg-6">
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
<div class="panel-hdr">
<h2>
異常狀態
</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative">
<div class="pb-5 pt-3">
<div class="d-flex mr-4">
<div class="mr-2">
<span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#967bbd&quot;, &quot;#ccbfdf&quot;], &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">7/10</span>
</div>
<div>
<label class="fs-sm mb-0 mt-2 mt-md-0">New Sessions</label>
<h4 class="font-weight-bold mb-0">70.60%</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div id="panel-3" class="panel panel-locked" data-panel-sortable data-panel-collapsed data-panel-close>
<div class="panel-hdr">
<h2>
工單進度
</h2>
</div>
<div class="panel-container show">
<div class="panel-content poisition-relative">
<div class="pb-5 pt-3">
<div class="d-flex mr-0">
<div class="mr-2">
<span class="peity-donut" data-peity="{ &quot;fill&quot;: [&quot;#2196F3&quot;, &quot;#9acffa&quot;], &quot;innerRadius&quot;: 14, &quot;radius&quot;: 20 }">3/10</span>
</div>
<div>
<label class="fs-sm mb-0 mt-2 mt-md-0">Page Views</label>
<h4 class="font-weight-bold mb-0">14,134</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 按鈕組 卡片組 -->
<div class="row d-flex justify-content-between col mx-3 my-3">
<!-- 按鈕組 -->
<div class="col-sm-12 col-lg-8">
<div class="row">
<div class="btn-group btn-group-lg col-lg-3 mb-4"
v-for="btn in btns"
:key="btn">
<button type="button" class="btn btn-secondary col-6">
<i :class="btn.icon"></i>
</button>
<button type="button" class="btn btn-secondary col-6">
</button>
</div>
</div>
</div>
<!-- 卡片組 -->
<div class="col-sm-12 col-lg-4">
<!-- 異常狀態 -->
<div class="mb-1">
<div class="card text-white bg-dark">
<div class="card-header">異常狀態</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
</div>
</main>
<!-- 工單進度 -->
<div class="">
<div class="card text-white bg-dark">
<div class="card-header">工單進度</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
</div>
<script>
import { useStore } from 'vuex';
export default {
setup() {
const store = useStore();
/* defined datas */
var dataTargetProfit = [
[1354586000000, 153],
[1364587000000, 658],
[1374588000000, 198],
[1384589000000, 663],
[1394590000000, 801],
[1404591000000, 1080],
[1414592000000, 353],
[1424593000000, 749],
[1434594000000, 523],
[1444595000000, 258],
[1454596000000, 688],
[1464597000000, 364]
]
var dataProfit = [
[1354586000000, 53],
[1364587000000, 65],
[1374588000000, 98],
[1384589000000, 83],
[1394590000000, 980],
[1404591000000, 808],
[1414592000000, 720],
[1424593000000, 674],
[1434594000000, 23],
[1444595000000, 79],
[1454596000000, 88],
[1464597000000, 36]
]
var dataSignups = [
[1354586000000, 647],
[1364587000000, 435],
[1374588000000, 784],
[1384589000000, 346],
[1394590000000, 487],
[1404591000000, 463],
[1414592000000, 479],
[1424593000000, 236],
[1434594000000, 843],
[1444595000000, 657],
[1454596000000, 241],
[1464597000000, 341]
]
var dataSet1 = [
[0, 10],
[100, 8],
[200, 7],
[300, 5],
[400, 4],
[500, 6],
[600, 3],
[700, 2]
];
var dataSet2 = [
[0, 9],
[100, 6],
[200, 5],
[300, 3],
[400, 3],
[500, 5],
[600, 2],
[700, 1]
];
return { store }
},
data() {
return {
btns: [
$(document).ready(function () {
/* init datatables */
$('#dt-basic-example').dataTable(
{
responsive: true,
dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: [
{
name: "照明系統",
icon: "fa-regular fa-lightbulb fa-2x",
extend: 'colvis',
text: 'Column Visibility',
titleAttr: 'Col visibility',
className: 'btn-outline-default'
},
{
name: "環境感測系統",
icon: "fa-solid fa-temperature-three-quarters fa-2x",
extend: 'csvHtml5',
text: 'CSV',
titleAttr: 'Generate CSV',
className: 'btn-outline-default'
},
{
name: "電表系統",
icon: "fa-solid fa-bolt fa-2x",
extend: 'copyHtml5',
text: 'Copy',
titleAttr: 'Copy to clipboard',
className: 'btn-outline-default'
},
{
name: "空調系統",
icon: "fa-solid fa-wind fa-2x",
},
{
name: "電梯系統",
icon: "fa-solid fa-elevator fa-2x",
},
{
name: "門禁系統",
icon: "fa-sharp fa-solid fa-door-closed fa-2x",
},
{
name: "照明系統",
icon: "fa-regular fa-lightbulb fa-2x",
},
{
name: "環境感測系統",
icon: "fa-solid fa-temperature-three-quarters fa-2x",
},
{
name: "電表系統",
icon: "fa-solid fa-bolt fa-2x",
},
{
name: "空調系統",
icon: "fa-solid fa-wind fa-2x",
},
{
name: "電梯系統",
icon: "fa-solid fa-elevator fa-2x",
},
{
name: "門禁系統",
icon: "fa-sharp fa-solid fa-door-closed fa-2x",
},
extend: 'print',
text: '<i class="fal fa-print"></i>',
titleAttr: 'Print Table',
className: 'btn-outline-default'
}
],
};
},
created() {
columnDefs: [
{
targets: -1,
title: '',
orderable: false,
render: function (data, type, full, meta) {
/*
-- ES6
-- convert using https://babeljs.io online transpiler
return `
<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>
<i class="fal fa-times"></i>
</a>
<div class='dropdown d-inline-block dropleft '>
<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>
<i class="fal fa-ellipsis-v"></i>
</a>
<div class='dropdown-menu'>
<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>
<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>
</div>
</div>`;
ES5 example below:
*/
return "\n\t\t\t\t\t\t<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>\n\t\t\t\t\t\t\t<i class=\"fal fa-times\"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<div class='dropdown d-inline-block dropleft'>\n\t\t\t\t\t\t\t<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>\n\t\t\t\t\t\t\t\t<i class=\"fal fa-ellipsis-v\"></i>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<div class='dropdown-menu'>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>";
},
},
]
});
/* flot toggle example */
var flot_toggle = function () {
var data = [
{
label: "Target Profit",
data: dataTargetProfit,
color: color.info._400,
bars:
{
show: true,
align: "center",
barWidth: 30 * 30 * 60 * 1000 * 80,
lineWidth: 0,
/*fillColor: {
colors: [color.primary._500, color.primary._900]
},*/
fillColor:
{
colors: [
{
opacity: 0.9
},
{
opacity: 0.1
}]
}
},
highlightColor: 'rgba(255,255,255,0.3)',
shadowSize: 0
},
{
label: "Actual Profit",
data: dataProfit,
color: color.warning._500,
lines:
{
show: true,
lineWidth: 2
},
shadowSize: 0,
points:
{
show: true
}
},
{
label: "User Signups",
data: dataSignups,
color: color.success._500,
lines:
{
show: true,
lineWidth: 2
},
shadowSize: 0,
points:
{
show: true
}
}]
var options = {
grid:
{
hoverable: true,
clickable: true,
tickColor: 'rgba(0,0,0,0.05)',
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.05)'
},
tooltip: true,
tooltipOpts:
{
cssClass: 'tooltip-inner',
defaultTheme: false
},
xaxis:
{
mode: "time",
tickColor: 'rgba(0,0,0,0.05)',
},
yaxes:
{
tickColor: 'rgba(0,0,0,0.05)',
tickFormatter: function (val, axis) {
return "$" + val;
},
max: 1200
}
};
var plot2 = null;
function plotNow() {
var d = [];
$("#js-checkbox-toggles").find(':checkbox').each(function () {
if ($(this).is(':checked')) {
d.push(data[$(this).attr("name").substr(4, 1)]);
}
});
if (d.length > 0) {
if (plot2) {
plot2.setData(d);
plot2.draw();
}
else {
plot2 = $.plot($("#flot-toggles"), d, options);
}
}
};
$("#js-checkbox-toggles").find(':checkbox').on('change', function () {
plotNow();
});
plotNow()
}
flot_toggle();
/* flot toggle example -- end*/
/* flot area */
var flotArea = $.plot($('#flot-area'), [
{
data: dataSet1,
label: 'New Customer',
color: color.success._200
},
{
data: dataSet2,
label: 'Returning Customer',
color: color.info._200
}],
{
series:
{
lines:
{
show: true,
lineWidth: 2,
fill: true,
fillColor:
{
colors: [
{
opacity: 0
},
{
opacity: 0.5
}]
}
},
shadowSize: 0
},
points:
{
show: true,
},
legend:
{
noColumns: 1,
position: 'nw'
},
grid:
{
hoverable: true,
clickable: true,
borderColor: '#ddd',
tickColor: 'rgba(0,0,0,0.05)',
aboveData: true,
borderWidth: 0,
labelMargin: 5,
backgroundColor: 'transparent'
},
yaxis:
{
tickLength: 1,
min: 0,
max: 15,
color: '#eee',
tickColor: 'rgba(0,0,0,0.05)',
font:
{
size: 0,
color: '#999'
}
},
xaxis:
{
tickLength: 1,
color: '#eee',
tickColor: 'rgba(0,0,0,0.05)',
font:
{
size: 10,
color: '#999'
}
}
});
/* flot area -- end */
var flotVisit = $.plot('#flotVisit', [
{
data: [
[3, 0],
[4, 1],
[5, 3],
[6, 3],
[7, 10],
[8, 11],
[9, 12],
[10, 9],
[11, 12],
[12, 8],
[13, 5]
],
color: color.success._200
},
{
data: [
[1, 0],
[2, 0],
[3, 1],
[4, 2],
[5, 2],
[6, 5],
[7, 8],
[8, 12],
[9, 9],
[10, 11],
[11, 5]
],
color: color.info._200
}],
{
series:
{
shadowSize: 0,
lines:
{
show: true,
lineWidth: 2,
fill: true,
fillColor:
{
colors: [
{
opacity: 0
},
{
opacity: 0.12
}]
}
}
},
grid:
{
borderWidth: 0
},
yaxis:
{
min: 0,
max: 15,
tickColor: 'rgba(0,0,0,0.05)',
ticks: [
[0, ''],
[5, '100K'],
[10, '200K'],
[15, '300K']
],
font:
{
color: '#444',
size: 10
}
},
xaxis:
{
tickColor: 'rgba(0,0,0,0.05)',
ticks: [
[2, '2am'],
[3, '3am'],
[4, '4am'],
[5, '5am'],
[6, '6am'],
[7, '7am'],
[8, '8am'],
[9, '9am'],
[10, '1pm'],
[11, '2pm'],
[12, '3pm'],
[13, '4pm']
],
font:
{
color: '#999',
size: 9
}
}
});
});
},
};
</script>

View File

@ -21,15 +21,15 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- base css -->
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="css/vendors.bundle.css">
<link id="appbundle" rel="stylesheet" media="screen, print" href="css/app.bundle.css">
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
<link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
<link id="mytheme" rel="stylesheet" media="screen, print" href="#">
<link id="myskin" rel="stylesheet" media="screen, print" href="css/skins/skin-master.css">
<link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
<!-- Place favicon.ico in the root directory -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="stylesheet" media="screen, print" href="css/datagrid/datatables/datatables.bundle.css">
<link rel="stylesheet" media="screen, print" href="lib/datagrid/datatables/datatables.bundle.css">
</head>
<!-- BEGIN Body -->
<!-- Possible Classes
@ -1247,7 +1247,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
<!-- BEGIN Page Content -->
<!-- the #js-page-content id is needed for some plugins to initialize -->
<!--@RenderBody()-->
<div id="app"></div>
<div id="app">
</div>
<!-- this overlay is activated only when mobile menu is triggered -->
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div> <!-- END Page Content -->
@ -2045,472 +2047,22 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
+ waves.js (extension)
+ smartpanels.js (extension)
+ src/../jquery-snippets.js (core) -->
<script src="js/vendors.bundle.js"></script>
<script src="js/app.bundle.js"></script>
<script src="lib/vendors.bundle.js"></script>
<script src="lib/app.bundle.js"></script>
<script type="text/javascript">
/* Activate smart panels */
$('#js-page-content').smartPanel();
</script>
<!-- The order of scripts is irrelevant. Please check out the plugin pages for more details about these plugins below: -->
<script src="js/statistics/peity/peity.bundle.js"></script>
<script src="js/statistics/flot/flot.bundle.js"></script>
<script src="js/statistics/easypiechart/easypiechart.bundle.js"></script>
<script src="js/datagrid/datatables/datatables.bundle.js"></script>
<script src="lib/statistics/peity/peity.bundle.js"></script>
<script src="lib/statistics/flot/flot.bundle.js"></script>
<script src="lib/statistics/easypiechart/easypiechart.bundle.js"></script>
<script src="lib/datagrid/datatables/datatables.bundle.js"></script>
<script>
/* defined datas */
var dataTargetProfit = [
[1354586000000, 153],
[1364587000000, 658],
[1374588000000, 198],
[1384589000000, 663],
[1394590000000, 801],
[1404591000000, 1080],
[1414592000000, 353],
[1424593000000, 749],
[1434594000000, 523],
[1444595000000, 258],
[1454596000000, 688],
[1464597000000, 364]
]
var dataProfit = [
[1354586000000, 53],
[1364587000000, 65],
[1374588000000, 98],
[1384589000000, 83],
[1394590000000, 980],
[1404591000000, 808],
[1414592000000, 720],
[1424593000000, 674],
[1434594000000, 23],
[1444595000000, 79],
[1454596000000, 88],
[1464597000000, 36]
]
var dataSignups = [
[1354586000000, 647],
[1364587000000, 435],
[1374588000000, 784],
[1384589000000, 346],
[1394590000000, 487],
[1404591000000, 463],
[1414592000000, 479],
[1424593000000, 236],
[1434594000000, 843],
[1444595000000, 657],
[1454596000000, 241],
[1464597000000, 341]
]
var dataSet1 = [
[0, 10],
[100, 8],
[200, 7],
[300, 5],
[400, 4],
[500, 6],
[600, 3],
[700, 2]
];
var dataSet2 = [
[0, 9],
[100, 6],
[200, 5],
[300, 3],
[400, 3],
[500, 5],
[600, 2],
[700, 1]
];
$("#app").load("dashboard.html");
$(document).ready(function()
{
$("#app").load("dashboard.html");
/* init datatables */
$('#dt-basic-example').dataTable(
{
responsive: true,
dom: "<'row mb-3'<'col-sm-12 col-md-6 d-flex align-items-center justify-content-start'f><'col-sm-12 col-md-6 d-flex align-items-center justify-content-end'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: [
{
extend: 'colvis',
text: 'Column Visibility',
titleAttr: 'Col visibility',
className: 'btn-outline-default'
},
{
extend: 'csvHtml5',
text: 'CSV',
titleAttr: 'Generate CSV',
className: 'btn-outline-default'
},
{
extend: 'copyHtml5',
text: 'Copy',
titleAttr: 'Copy to clipboard',
className: 'btn-outline-default'
},
{
extend: 'print',
text: '<i class="fal fa-print"></i>',
titleAttr: 'Print Table',
className: 'btn-outline-default'
}
],
columnDefs: [
{
targets: -1,
title: '',
orderable: false,
render: function(data, type, full, meta)
{
/*
-- ES6
-- convert using https://babeljs.io online transpiler
return `
<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>
<i class="fal fa-times"></i>
</a>
<div class='dropdown d-inline-block dropleft '>
<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>
<i class="fal fa-ellipsis-v"></i>
</a>
<div class='dropdown-menu'>
<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>
<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>
</div>
</div>`;
ES5 example below:
*/
return "\n\t\t\t\t\t\t<a href='javascript:void(0);' class='btn btn-sm btn-icon btn-outline-danger rounded-circle mr-1' title='Delete Record'>\n\t\t\t\t\t\t\t<i class=\"fal fa-times\"></i>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t\t<div class='dropdown d-inline-block dropleft'>\n\t\t\t\t\t\t\t<a href='#'' class='btn btn-sm btn-icon btn-outline-primary rounded-circle shadow-0' data-toggle='dropdown' aria-expanded='true' title='More options'>\n\t\t\t\t\t\t\t\t<i class=\"fal fa-ellipsis-v\"></i>\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t<div class='dropdown-menu'>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Change Status</a>\n\t\t\t\t\t\t\t\t<a class='dropdown-item' href='javascript:void(0);'>Generate Report</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>";
},
},
]
});
/* flot toggle example */
var flot_toggle = function()
{
var data = [
{
label: "Target Profit",
data: dataTargetProfit,
color: color.info._400,
bars:
{
show: true,
align: "center",
barWidth: 30 * 30 * 60 * 1000 * 80,
lineWidth: 0,
/*fillColor: {
colors: [color.primary._500, color.primary._900]
},*/
fillColor:
{
colors: [
{
opacity: 0.9
},
{
opacity: 0.1
}]
}
},
highlightColor: 'rgba(255,255,255,0.3)',
shadowSize: 0
},
{
label: "Actual Profit",
data: dataProfit,
color: color.warning._500,
lines:
{
show: true,
lineWidth: 2
},
shadowSize: 0,
points:
{
show: true
}
},
{
label: "User Signups",
data: dataSignups,
color: color.success._500,
lines:
{
show: true,
lineWidth: 2
},
shadowSize: 0,
points:
{
show: true
}
}]
var options = {
grid:
{
hoverable: true,
clickable: true,
tickColor: 'rgba(0,0,0,0.05)',
borderWidth: 1,
borderColor: 'rgba(0,0,0,0.05)'
},
tooltip: true,
tooltipOpts:
{
cssClass: 'tooltip-inner',
defaultTheme: false
},
xaxis:
{
mode: "time",
tickColor: 'rgba(0,0,0,0.05)',
},
yaxes:
{
tickColor: 'rgba(0,0,0,0.05)',
tickFormatter: function(val, axis)
{
return "$" + val;
},
max: 1200
}
};
var plot2 = null;
function plotNow()
{
var d = [];
$("#js-checkbox-toggles").find(':checkbox').each(function()
{
if ($(this).is(':checked'))
{
d.push(data[$(this).attr("name").substr(4, 1)]);
}
});
if (d.length > 0)
{
if (plot2)
{
plot2.setData(d);
plot2.draw();
}
else
{
plot2 = $.plot($("#flot-toggles"), d, options);
}
}
};
$("#js-checkbox-toggles").find(':checkbox').on('change', function()
{
plotNow();
});
plotNow()
}
flot_toggle();
/* flot toggle example -- end*/
/* flot area */
var flotArea = $.plot($('#flot-area'), [
{
data: dataSet1,
label: 'New Customer',
color: color.success._200
},
{
data: dataSet2,
label: 'Returning Customer',
color: color.info._200
}],
{
series:
{
lines:
{
show: true,
lineWidth: 2,
fill: true,
fillColor:
{
colors: [
{
opacity: 0
},
{
opacity: 0.5
}]
}
},
shadowSize: 0
},
points:
{
show: true,
},
legend:
{
noColumns: 1,
position: 'nw'
},
grid:
{
hoverable: true,
clickable: true,
borderColor: '#ddd',
tickColor: 'rgba(0,0,0,0.05)',
aboveData: true,
borderWidth: 0,
labelMargin: 5,
backgroundColor: 'transparent'
},
yaxis:
{
tickLength: 1,
min: 0,
max: 15,
color: '#eee',
tickColor: 'rgba(0,0,0,0.05)',
font:
{
size: 0,
color: '#999'
}
},
xaxis:
{
tickLength: 1,
color: '#eee',
tickColor: 'rgba(0,0,0,0.05)',
font:
{
size: 10,
color: '#999'
}
}
});
/* flot area -- end */
var flotVisit = $.plot('#flotVisit', [
{
data: [
[3, 0],
[4, 1],
[5, 3],
[6, 3],
[7, 10],
[8, 11],
[9, 12],
[10, 9],
[11, 12],
[12, 8],
[13, 5]
],
color: color.success._200
},
{
data: [
[1, 0],
[2, 0],
[3, 1],
[4, 2],
[5, 2],
[6, 5],
[7, 8],
[8, 12],
[9, 9],
[10, 11],
[11, 5]
],
color: color.info._200
}],
{
series:
{
shadowSize: 0,
lines:
{
show: true,
lineWidth: 2,
fill: true,
fillColor:
{
colors: [
{
opacity: 0
},
{
opacity: 0.12
}]
}
}
},
grid:
{
borderWidth: 0
},
yaxis:
{
min: 0,
max: 15,
tickColor: 'rgba(0,0,0,0.05)',
ticks: [
[0, ''],
[5, '100K'],
[10, '200K'],
[15, '300K']
],
font:
{
color: '#444',
size: 10
}
},
xaxis:
{
tickColor: 'rgba(0,0,0,0.05)',
ticks: [
[2, '2am'],
[3, '3am'],
[4, '4am'],
[5, '5am'],
[6, '6am'],
[7, '7am'],
[8, '8am'],
[9, '9am'],
[10, '1pm'],
[11, '2pm'],
[12, '3pm'],
[13, '4pm']
],
font:
{
color: '#999',
size: 9
}
}
});
});
</script>
</body>

View File

@ -741,7 +741,7 @@ html {
text-decoration: none;
background-color: transparent; }
html body a:hover {
color: #967bbd;
color: #ffffff; /*#967bbd*/
text-decoration: underline; }
/* app header */
@ -885,7 +885,7 @@ html {
min-height: 1px;
padding: 0 2rem; }
.page-logo img {
width: 48px;
/*width: 28px;*/
height: 48px; }
.page-logo .page-logo-link {
-webkit-box-flex: 1;
@ -894,9 +894,8 @@ html {
.page-logo-text {
margin-left: 0.5rem;
margin-top: 0.75rem;
font-weight: 300;
font-size: 1.5rem;
font-size: 1rem;
color: #fff;
display: block;
-webkit-box-flex: 1;
@ -1746,7 +1745,7 @@ html {
.nav-function-top .page-header .header-icon:not(.btn)[data-toggle="dropdown"] + .dropdown-menu {
top: 4.125rem !important; }
.nav-function-top .page-content-wrapper {
margin-top: 7.625rem; }
margin-top: 4.125rem; }
.nav-function-top .page-wrapper {
padding-left: 0; }
.nav-function-top .page-wrapper .page-footer {
@ -4356,11 +4355,7 @@ th {
.nav .nav-link:not([class^="btn-"]):not([class*=" btn-"]) {
font-weight: 500;
font-size: 1rem;
color: #fff;}
.nav-link:hover {
color: #ffc800!important; }
font-size: 0.8125rem; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
@ -7916,4 +7911,28 @@ body:not(.mobile-detected).modal-open .modal::-webkit-scrollbar-thumb:vertical:h
/* #OVERRIDE - You can override any of the variables through this file
========================================================================== */
.blink {
animation-duration: 1200ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation:blink 1200ms infinite; /* Safari and Chrome */
}
@keyframes blink {
from {
color:red;
}
to {
color:white;
}
}
@-webkit-keyframes blink {
from {
color:red;
}
to {
color:white;
}
}
/*# sourceMappingURL=app.bundle.css.map */

View File

@ -0,0 +1,17 @@
/*!
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-brands-400.eot");
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400; }
/*# sourceMappingURL=fa-brands.css.map */

File diff suppressed because one or more lines are too long

5605
Frontend/lib/fa-duotone.css Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

17
Frontend/lib/fa-light.css Normal file
View File

@ -0,0 +1,17 @@
/*!
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 300;
font-display: block;
src: url("../webfonts/fa-light-300.eot");
src: url("../webfonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.woff") format("woff"), url("../webfonts/fa-light-300.ttf") format("truetype"), url("../webfonts/fa-light-300.svg#fontawesome") format("svg"); }
.fal {
font-family: 'Font Awesome 5 Pro';
font-weight: 300; }
/*# sourceMappingURL=fa-light.css.map */

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,17 @@
/*!
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
.far {
font-family: 'Font Awesome 5 Pro';
font-weight: 400; }
/*# sourceMappingURL=fa-regular.css.map */

File diff suppressed because one or more lines are too long

18
Frontend/lib/fa-solid.css Normal file
View File

@ -0,0 +1,18 @@
/*!
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license (Commercial License)
*/
@font-face {
font-family: 'Font Awesome 5 Pro';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa,
.fas {
font-family: 'Font Awesome 5 Pro';
font-weight: 900; }
/*# sourceMappingURL=fa-solid.css.map */

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,83 @@
@media print {
html,
body {
width: 210mm;
height: 297mm; }
.invoice-page {
-webkit-print-color-adjust: exact; }
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12 {
float: left;
padding: 0; }
.col-sm-12 {
width: 100%; }
.col-sm-11 {
width: 91.66666667%; }
.col-sm-10 {
width: 83.33333333%; }
.col-sm-9 {
width: 75%; }
.col-sm-8 {
width: 66.66666667%; }
.col-sm-7 {
width: 58.33333333%; }
.col-sm-6 {
width: 50%; }
.col-sm-5 {
width: 41.66666667%; }
.col-sm-4 {
width: 33.33333333%; }
.col-sm-3 {
width: 25%; }
.col-sm-2 {
width: 16.66666667%; }
.col-sm-1 {
width: 8.33333333%; }
div[data-size="A4"] {
margin: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
padding: 3em 5em !important; }
.breadcrumb,
.subheader {
display: none; }
*:not(.keep-print-font) {
font-family: Arial, Helvetica, sans-serif !important;
font-size: 11pt !important; }
table {
font-size: 100% !important; } }
@page {
size: auto;
margin: 0; }
div[data-size="A4"] {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
-webkit-box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
background: url(../img/svg/pattern-1.svg) no-repeat center bottom;
background-size: cover;
padding: 4rem;
position: relative; }
@media only screen and (max-width: 992px) {
div[data-size="A4"],
.container {
padding: 0;
-webkit-box-shadow: none;
box-shadow: none; } }
/*# sourceMappingURL=page-invoice.css.map */

View File

@ -0,0 +1 @@
{"version":3,"sources":["page-invoice.css"],"names":[],"mappings":"AAAA;EACC;;IAEC,YAAY;IACZ,aAAa,EAAA;EAEd;IACC,iCAAiC,EAAA;EAElC;;;;;;;;;;;;IAYC,WAAW;IACX,UAAU,EAAA;EAEX;IACC,WAAW,EAAA;EAEZ;IACC,mBAAmB,EAAA;EAEpB;IACC,mBAAmB,EAAA;EAEpB;IACC,UAAU,EAAA;EAEX;IACC,mBAAmB,EAAA;EAEpB;IACC,mBAAmB,EAAA;EAEpB;IACC,UAAU,EAAA;EAEX;IACC,mBAAmB,EAAA;EAEpB;IACC,mBAAmB,EAAA;EAEpB;IACC,UAAU,EAAA;EAEX;IACC,mBAAmB,EAAA;EAEpB;IACC,kBAAkB,EAAA;EAEnB;IACC,SAAS;IACT,qBAAa;YAAb,aAAa;IACb,2BAA2B,EAAA;EAE5B;;IAEC,aAAa,EAAA;EAEd;IACC,oDAAoD;IACpD,0BAA0B,EAAA;EAE3B;IACC,0BAA0B,EAAA,EAC1B;;AAGF;EACC,UAAU;EACV,SAAS,EAAA;;AAGV;EACC,iBAAiB;EACjB,cAAc;EACd,cAAc;EACd,oBAAoB;EACpB,gDAAwC;UAAxC,wCAAwC;EACxC,iEAAiE;EACjE,sBAAsB;EACtB,aAAa;EACb,kBAAkB,EAAA;;AAGnB;EACC;;IAEC,UAAU;IACV,wBAAgB;YAAhB,gBAAgB,EAAA,EAChB","file":"page-invoice.css","sourcesContent":["@media print {\r\n\thtml,\r\n\tbody {\r\n\t\twidth: 210mm;\r\n\t\theight: 297mm;\r\n\t}\r\n\t.invoice-page {\r\n\t\t-webkit-print-color-adjust: exact;\r\n\t}\r\n\t.col-sm-1,\r\n\t.col-sm-2,\r\n\t.col-sm-3,\r\n\t.col-sm-4,\r\n\t.col-sm-5,\r\n\t.col-sm-6,\r\n\t.col-sm-7,\r\n\t.col-sm-8,\r\n\t.col-sm-9,\r\n\t.col-sm-10,\r\n\t.col-sm-11,\r\n\t.col-sm-12 {\r\n\t\tfloat: left;\r\n\t\tpadding: 0;\r\n\t}\r\n\t.col-sm-12 {\r\n\t\twidth: 100%;\r\n\t}\r\n\t.col-sm-11 {\r\n\t\twidth: 91.66666667%;\r\n\t}\r\n\t.col-sm-10 {\r\n\t\twidth: 83.33333333%;\r\n\t}\r\n\t.col-sm-9 {\r\n\t\twidth: 75%;\r\n\t}\r\n\t.col-sm-8 {\r\n\t\twidth: 66.66666667%;\r\n\t}\r\n\t.col-sm-7 {\r\n\t\twidth: 58.33333333%;\r\n\t}\r\n\t.col-sm-6 {\r\n\t\twidth: 50%;\r\n\t}\r\n\t.col-sm-5 {\r\n\t\twidth: 41.66666667%;\r\n\t}\r\n\t.col-sm-4 {\r\n\t\twidth: 33.33333333%;\r\n\t}\r\n\t.col-sm-3 {\r\n\t\twidth: 25%;\r\n\t}\r\n\t.col-sm-2 {\r\n\t\twidth: 16.66666667%;\r\n\t}\r\n\t.col-sm-1 {\r\n\t\twidth: 8.33333333%;\r\n\t}\r\n\tdiv[data-size=\"A4\"] {\r\n\t\tmargin: 0;\r\n\t\tbox-shadow: 0;\r\n\t\tpadding: 3em 5em !important;\r\n\t}\r\n\t.breadcrumb,\r\n\t.subheader {\r\n\t\tdisplay: none;\r\n\t}\r\n\t*:not(.keep-print-font) {\r\n\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\tfont-size: 11pt !important;\r\n\t}\r\n\ttable {\r\n\t\tfont-size: 100% !important;\r\n\t}\r\n}\r\n\r\n@page {\r\n\tsize: auto;\r\n\tmargin: 0;\r\n}\r\n\r\ndiv[data-size=\"A4\"] {\r\n\tbackground: white;\r\n\tdisplay: block;\r\n\tmargin: 0 auto;\r\n\tmargin-bottom: 0.5cm;\r\n\tbox-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);\r\n\tbackground: url(../img/svg/pattern-1.svg) no-repeat center bottom;\r\n\tbackground-size: cover;\r\n\tpadding: 4rem;\r\n\tposition: relative;\r\n}\r\n\r\n@media only screen and ( max-width: 992px ){\r\n\tdiv[data-size=\"A4\"],\r\n\t.container {\r\n\t\tpadding: 0;\r\n\t\tbox-shadow: none;\r\n\t}\r\n}"]}

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8" ?>
<dwsync>
<file name="skin-master.css" server="//mnas/web/wsp/" local="132338994700000000" remote="132338994700000000" Dst="0" />
</dwsync>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

18568
Frontend/lib/statistics/d3/d3.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,265 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
],
type: 'spline',
selection: {
enabled: true
}
},
color: {
pattern: [color.primary._500, color.info._500, color.success._500, color.danger._500, color.warning._500]
},
grid: {
x: {
show: false
},
y: {
show: true
}
}
});
var defaultMessage = $('#message').html(),
currentIndex = 0,
timer, duration = 1500,
demos = [
function () {
chart.load({
columns: [
['data2', 100, 30, 200, 320, 50, 150, 230, 80, 150]
],
type: 'spline'
})
setMessage('Load data2');
setProgressBar('4')
},
function () {
chart.load({
columns: [
['data3', 70, 90, 170, 220, 100, 110, 130, 40, 50]
]
})
setMessage('Load data3');
setProgressBar('8')
},
function () {
chart.select(['data1'], [2]);
setMessage('Select point for index 2 of data1');
setProgressBar('12')
},
function () {
chart.select(['data1'], [4, 6]);
setMessage('Select point for index 4,6 of data1');
setProgressBar('16')
},
function () {
chart.unselect();
setMessage('Unselect points');
setProgressBar('20')
},
function () {
chart.focus('data2');
setMessage('Focus on data2');
setProgressBar('24')
},
function () {
chart.focus('data3');
setMessage('Focus on data3');
setProgressBar('28')
},
function () {
chart.revert();
setMessage('Defocus');
setProgressBar('32')
},
function () {
chart.load({
columns: [
['data1', 300, 230, 400, 520, 230, 250, 330, 280, 250]
]
})
setMessage('Update data1');
setProgressBar('36')
},
function () {
chart.load({
columns: [
['data2', 30, 50, 90, 120, 40, 50, 80, 70, 50]
]
})
setMessage('Update data2');
setProgressBar('40')
},
function () {
chart.regions([{
start: 1,
end: 3
}]);
setMessage('Add region from 1 to 3');
setProgressBar('44')
},
function () {
chart.regions.add([{
start: 6
}]);
setMessage('Add region from 6 to end');
setProgressBar('48')
},
function () {
chart.regions([]);
setMessage('Clear regions');
setProgressBar('52')
},
function () {
chart.xgrids([{
value: 1,
text: 'Label 1'
}, {
value: 4,
text: 'Label 4'
}]);
setMessage('Add x grid lines for 1, 4');
setProgressBar('56')
},
function () {
chart.ygrids.add([{
value: 450,
text: 'Label 450'
}]);
setMessage('Add y grid lines for 450');
setProgressBar('60')
},
function () {
chart.xgrids.remove({
value: 1
});
chart.xgrids.remove({
value: 4
});
setMessage('Remove grid lines for 1, 4');
setProgressBar('64')
},
function () {
chart.ygrids.remove({
value: 450
});
setMessage('Remove grid line for 450');
setProgressBar('68')
},
function () {
chart.transform('bar');
setMessage('Show as bar chart');
setProgressBar('72')
},
function () {
chart.groups([
['data2', 'data3']
]);
setMessage('Grouping data2 and data3');
setProgressBar('76')
},
function () {
chart.groups([
['data1', 'data2', 'data3']
]);
setMessage('Grouping data1, data2 and data3');
},
function () {
chart.groups([
['data2', 'data3']
]);
chart.transform('spline', 'data1');
setMessage('Show data1 as spline');
setProgressBar('80')
},
function () {
chart.unload({
ids: 'data3'
});
setMessage('Unload data3');
setProgressBar('84')
},
function () {
chart.unload({
ids: 'data2'
});
setMessage('Unload data2');
setProgressBar('88')
},
function () {
chart.flow({
columns: [
['data1', 390, 400, 200, 500]
],
duration: 1000,
});
setMessage('Flow 4 data');
setProgressBar('92')
},
function () {
// wait for end of transition for flow
},
function () {
chart.flow({
columns: [
['data1', 190, 230]
],
});
setMessage('Flow 2 data');
setProgressBar('96')
},
function () {
// wait for end of transition for flow
},
function () {
chart.transform('spline', ['data1', 'data2', 'data3']);
chart.groups([
['data1'],
['data2'],
['data3']
]);
chart.load({
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
})
setMessage('Finishing demo..');
setProgressBar('100')
stopDemo()
}
];
function setMessage(message) {
document.getElementById('message').innerHTML = '<div id="demoMessage" class="shadow-lg fs-xl p-3 rounded fadeinup">' + message + '</div>';
}
function setProgressBar(percentage) {
$('#demo-progress').css("width", percentage + "%");
}
function startDemo() {
setMessage('Starting Demo...');
timer = setInterval(function () {
if (currentIndex == demos.length) currentIndex = 0;
demos[currentIndex++]();
}, duration);
$('#playDemo').hide();
$('#pauseDemo').show();
}
function stopDemo() {
clearInterval(timer);
document.getElementById('message').innerHTML = '<div id="demoMessage" class="shadow-lg fs-xl p-3 rounded fadeinup bg-success-500 text-center">Thanks for watching! <br> <button class="btn btn-xs btn-dark mt-2" onclick="startDemo();">Play again</button> </div>';
$('#playDemo').hide();
$('#pauseDemo').hide();
};
function pauseDemo() {
clearInterval(timer);
document.getElementById('message').innerHTML = '<div id="demoMessage" class="shadow-lg fs-xl p-3 rounded highlight"> Demo Paused </div>';
$('#playDemo').show();
$('#pauseDemo').hide();
};

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8" ?>
<dwsync>
<file name="easypiechart.bundle.js" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
</dwsync>

View File

@ -0,0 +1,401 @@
/**!
* easy-pie-chart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.7
**/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module unless amdModuleId is set
define(["jquery"], function (a0) {
return (factory(a0));
});
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory(require("jquery"));
} else {
factory(jQuery);
}
}(this, function ($) {
/**
* Renderer to render the chart on a canvas object
* @param {DOMElement} el DOM element to host the canvas (root of the plugin)
* @param {object} options options object of the plugin
*/
var CanvasRenderer = function(el, options) {
var cachedBackground;
var canvas = document.createElement('canvas');
el.appendChild(canvas);
if (typeof(G_vmlCanvasManager) === 'object') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
// canvas on retina devices
var scaleBy = 1;
if (window.devicePixelRatio > 1) {
scaleBy = window.devicePixelRatio;
canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
canvas.width = canvas.height = options.size * scaleBy;
ctx.scale(scaleBy, scaleBy);
}
// move 0,0 coordinates to the center
ctx.translate(options.size / 2, options.size / 2);
// rotate canvas -90deg
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
var radius = (options.size - options.lineWidth) / 2;
if (options.scaleColor && options.scaleLength) {
radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
}
// IE polyfill for Date
Date.now = Date.now || function() {
return +(new Date());
};
/**
* Draw a circle around the center of the canvas
* @param {strong} color Valid CSS color string
* @param {number} lineWidth Width of the line in px
* @param {number} percent Percentage to draw (float between -1 and 1)
*/
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(-1, percent || 0), 1);
var isNegative = percent <= 0 ? true : false;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.stroke();
};
/**
* Draw the scale of the chart
*/
var drawScale = function() {
var offset;
var length;
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
ctx.rotate(Math.PI / 12);
}
ctx.restore();
};
/**
* Request animation frame wrapper with polyfill
* @return {function} Request animation frame method or timeout fallback
*/
var reqAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}());
/**
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.trackWidth || options.lineWidth, 1);
};
/**
* Canvas accessor
*/
this.getCanvas = function() {
return canvas;
};
/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function() {
return ctx;
};
/**
* Clear the complete canvas
*/
this.clear = function() {
ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
};
/**
* Draw the complete chart
* @param {number} percent Percent shown by the chart between -100 and 100
*/
this.draw = function(percent) {
// do we need to render a background
if (!!options.scaleColor || !!options.trackColor) {
// getImageData and putImageData are supported
if (ctx.getImageData && ctx.putImageData) {
if (!cachedBackground) {
drawBackground();
cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
} else {
ctx.putImageData(cachedBackground, 0, 0);
}
} else {
this.clear();
drawBackground();
}
} else {
this.clear();
}
ctx.lineCap = options.lineCap;
// if barcolor is a function execute it and pass the percent as a value
var color;
if (typeof(options.barColor) === 'function') {
color = options.barColor(percent);
} else {
color = options.barColor;
}
// draw bar
drawCircle(color, options.lineWidth, percent / 100);
}.bind(this);
/**
* Animate from some percent to some other percentage
* @param {number} from Starting percentage
* @param {number} to Final percentage
*/
this.animate = function(from, to) {
var startTime = Date.now();
options.onStart(from, to);
var animation = function() {
var process = Math.min(Date.now() - startTime, options.animate.duration);
var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
this.draw(currentValue);
options.onStep(from, to, currentValue);
if (process >= options.animate.duration) {
options.onStop(from, to);
} else {
reqAnimationFrame(animation);
}
}.bind(this);
reqAnimationFrame(animation);
}.bind(this);
};
var EasyPieChart = function(el, opts) {
var defaultOptions = {
barColor: '#ef1e25',
trackColor: '#f9f9f9',
scaleColor: '#dfe0e0',
scaleLength: 5,
lineCap: 'round',
lineWidth: 3,
trackWidth: undefined,
size: 110,
rotate: 0,
animate: {
duration: 1000,
enabled: true
},
easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
t = t / (d/2);
if (t < 1) {
return c / 2 * t * t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
onStart: function(from, to) {
return;
},
onStep: function(from, to, currentValue) {
return;
},
onStop: function(from, to) {
return;
}
};
// detect present renderer
if (typeof(CanvasRenderer) !== 'undefined') {
defaultOptions.renderer = CanvasRenderer;
} else if (typeof(SVGRenderer) !== 'undefined') {
defaultOptions.renderer = SVGRenderer;
} else {
throw new Error('Please load either the SVG- or the CanvasRenderer');
}
var options = {};
var currentValue = 0;
/**
* Initialize the plugin by creating the options object and initialize rendering
*/
var init = function() {
this.el = el;
this.options = options;
// merge user options into default options
for (var i in defaultOptions) {
if (defaultOptions.hasOwnProperty(i)) {
options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
if (typeof(options[i]) === 'function') {
options[i] = options[i].bind(this);
}
}
}
// check for jQuery easing
if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
options.easing = jQuery.easing[options.easing];
} else {
options.easing = defaultOptions.easing;
}
// process earlier animate option to avoid bc breaks
if (typeof(options.animate) === 'number') {
options.animate = {
duration: options.animate,
enabled: true
};
}
if (typeof(options.animate) === 'boolean' && !options.animate) {
options.animate = {
duration: 1000,
enabled: options.animate
};
}
// create renderer
this.renderer = new options.renderer(el, options);
// initial draw
this.renderer.draw(currentValue);
// initial update
if (el.dataset && el.dataset.percent) {
this.update(parseFloat(el.dataset.percent));
} else if (el.getAttribute && el.getAttribute('data-percent')) {
this.update(parseFloat(el.getAttribute('data-percent')));
}
}.bind(this);
/**
* Update the value of the chart
* @param {number} newValue Number between 0 and 100
* @return {object} Instance of the plugin for method chaining
*/
this.update = function(newValue) {
newValue = parseFloat(newValue);
if (options.animate.enabled) {
this.renderer.animate(currentValue, newValue);
} else {
this.renderer.draw(newValue);
}
currentValue = newValue;
return this;
}.bind(this);
/**
* Disable animation
* @return {object} Instance of the plugin for method chaining
*/
this.disableAnimation = function() {
options.animate.enabled = false;
return this;
};
/**
* Enable animation
* @return {object} Instance of the plugin for method chaining
*/
this.enableAnimation = function() {
options.animate.enabled = true;
return this;
};
init();
};
$.fn.easyPieChart = function(options) {
return this.each(function() {
var instanceOptions;
if (!$.data(this, 'easyPieChart')) {
instanceOptions = $.extend({}, options, $(this).data());
$.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
}
});
};
}));
document.addEventListener('DOMContentLoaded', function () {
/* Easy pie chart Snippet
DOC: make sure to include this snippet in your project to be able to use the easy
configurations without any jquery implementations
*/
$('.js-easy-pie-chart').each(function() {
var $this = $(this),
barcolor = $this.css('color') || color.primary._700,
trackcolor = $this.data('trackcolor') || 'rgba(0,0,0,0.04)',
size = parseInt($this.data('piesize')) || 50,
scalecolor = $this.data('scalecolor') || $this.css('color'),
scalelength = parseInt($this.data('scalelength')) || 0,
linewidth = parseInt($this.data('linewidth')) || parseInt(size / 8.5),
linecap = $this.data('linecap') || 'butt'; //butt, round and square.
$this.easyPieChart({
size : size,
barColor : barcolor,
trackColor : trackcolor,
scaleColor: scalecolor,
scaleLength: scalelength, //Length of the scale lines (reduces the radius of the chart).
lineCap : linecap, //Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
lineWidth : linewidth,
animate: {
duration: 1500,
enabled: true
},
onStep: function(from, to, percent) {
$(this.el).find('.js-percent').text(Math.round(percent));
}
});
$this = null;
});
});

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8" ?>
<dwsync>
<file name="flot.bundle.js" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
</dwsync>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8" ?>
<dwsync>
<file name="peity.bundle.js" server="//mnas/web/wsp/" local="132338994720000000" remote="132338994720000000" Dst="0" />
</dwsync>

View File

@ -0,0 +1,397 @@
// Peity jQuery plugin version 3.3.0
// (c) 2018 Ben Pickles
//
// http://benpickles.github.io/peity
//
// Released under MIT license.
(function($, document, Math, undefined) {
var peity = $.fn.peity = function(type, options) {
if (svgSupported) {
this.each(function() {
var $this = $(this)
var chart = $this.data('_peity')
if (chart) {
if (type) chart.type = type
$.extend(chart.opts, options)
} else {
chart = new Peity(
$this,
type,
$.extend({},
peity.defaults[type],
$this.data('peity'),
options)
)
$this
.change(function() { chart.draw() })
.data('_peity', chart)
}
chart.draw()
});
}
return this;
};
var Peity = function($el, type, opts) {
this.$el = $el
this.type = type
this.opts = opts
}
var PeityPrototype = Peity.prototype
var svgElement = PeityPrototype.svgElement = function(tag, attrs) {
return $(
document.createElementNS('http://www.w3.org/2000/svg', tag)
).attr(attrs)
}
// https://gist.github.com/madrobby/3201472
var svgSupported = 'createElementNS' in document && svgElement('svg', {})[0].createSVGRect
PeityPrototype.draw = function() {
var opts = this.opts
peity.graphers[this.type].call(this, opts)
if (opts.after) opts.after.call(this, opts)
}
PeityPrototype.fill = function() {
var fill = this.opts.fill
return $.isFunction(fill)
? fill
: function(_, i) { return fill[i % fill.length] }
}
PeityPrototype.prepare = function(width, height) {
if (!this.$svg) {
this.$el.hide().after(
this.$svg = svgElement('svg', {
"class": "peity"
})
)
}
return this.$svg
.empty()
.data('_peity', this)
.attr({
height: height,
width: width
})
}
PeityPrototype.values = function() {
return $.map(this.$el.text().split(this.opts.delimiter), function(value) {
return parseFloat(value)
})
}
peity.defaults = {}
peity.graphers = {}
peity.register = function(type, defaults, grapher) {
this.defaults[type] = defaults
this.graphers[type] = grapher
}
peity.register(
'pie',
{
fill: ['#ff9900', '#fff4dd', '#ffc66e'],
radius: 8
},
function(opts) {
if (!opts.delimiter) {
var delimiter = this.$el.text().match(/[^0-9\.]/)
opts.delimiter = delimiter ? delimiter[0] : ","
}
var values = $.map(this.values(), function(n) {
return n > 0 ? n : 0
})
if (opts.delimiter == "/") {
var v1 = values[0]
var v2 = values[1]
values = [v1, Math.max(0, v2 - v1)]
}
var i = 0
var length = values.length
var sum = 0
for (; i < length; i++) {
sum += values[i]
}
if (!sum) {
length = 2
sum = 1
values = [0, 1]
}
var diameter = opts.radius * 2
var $svg = this.prepare(
opts.width || diameter,
opts.height || diameter
)
var width = $svg.width()
, height = $svg.height()
, cx = width / 2
, cy = height / 2
var radius = Math.min(cx, cy)
, innerRadius = opts.innerRadius
if (this.type == 'donut' && !innerRadius) {
innerRadius = radius * 0.5
}
var pi = Math.PI
var fill = this.fill()
var scale = this.scale = function(value, radius) {
var radians = value / sum * pi * 2 - pi / 2
return [
radius * Math.cos(radians) + cx,
radius * Math.sin(radians) + cy
]
}
var cumulative = 0
for (i = 0; i < length; i++) {
var value = values[i]
, portion = value / sum
, $node
if (portion == 0) continue
if (portion == 1) {
if (innerRadius) {
var x2 = cx - 0.01
, y1 = cy - radius
, y2 = cy - innerRadius
$node = svgElement('path', {
d: [
'M', cx, y1,
'A', radius, radius, 0, 1, 1, x2, y1,
'L', x2, y2,
'A', innerRadius, innerRadius, 0, 1, 0, cx, y2
].join(' '),
'data-value': value,
})
} else {
$node = svgElement('circle', {
cx: cx,
cy: cy,
'data-value': value,
r: radius
})
}
} else {
var cumulativePlusValue = cumulative + value
var d = ['M'].concat(
scale(cumulative, radius),
'A', radius, radius, 0, portion > 0.5 ? 1 : 0, 1,
scale(cumulativePlusValue, radius),
'L'
)
if (innerRadius) {
d = d.concat(
scale(cumulativePlusValue, innerRadius),
'A', innerRadius, innerRadius, 0, portion > 0.5 ? 1 : 0, 0,
scale(cumulative, innerRadius)
)
} else {
d.push(cx, cy)
}
cumulative += value
$node = svgElement('path', {
d: d.join(" "),
'data-value': value,
})
}
$node.attr('fill', fill.call(this, value, i, values))
$svg.append($node)
}
}
)
peity.register(
'donut',
$.extend(true, {}, peity.defaults.pie),
function(opts) {
peity.graphers.pie.call(this, opts)
}
)
peity.register(
"line",
{
delimiter: ",",
fill: "#c6d9fd",
height: 16,
min: 0,
stroke: "#4d89f9",
strokeWidth: 1,
width: 32
},
function(opts) {
var values = this.values()
if (values.length == 1) values.push(values[0])
var max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))
, min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))
var $svg = this.prepare(opts.width, opts.height)
, strokeWidth = opts.strokeWidth
, width = $svg.width()
, height = $svg.height() - strokeWidth
, diff = max - min
var xScale = this.x = function(input) {
return input * (width / (values.length - 1))
}
var yScale = this.y = function(input) {
var y = height
if (diff) {
y -= ((input - min) / diff) * height
}
return y + strokeWidth / 2
}
var zero = yScale(Math.max(min, 0))
, coords = [0, zero]
for (var i = 0; i < values.length; i++) {
coords.push(
xScale(i),
yScale(values[i])
)
}
coords.push(width, zero)
if (opts.fill) {
$svg.append(
svgElement('polygon', {
fill: opts.fill,
points: coords.join(' ')
})
)
}
if (strokeWidth) {
$svg.append(
svgElement('polyline', {
fill: 'none',
points: coords.slice(2, coords.length - 2).join(' '),
stroke: opts.stroke,
'stroke-width': strokeWidth,
'stroke-linecap': 'square'
})
)
}
}
);
peity.register(
'bar',
{
delimiter: ",",
fill: ["#4D89F9"],
height: 16,
min: 0,
padding: 0.1,
width: 32
},
function(opts) {
var values = this.values()
, max = Math.max.apply(Math, opts.max == undefined ? values : values.concat(opts.max))
, min = Math.min.apply(Math, opts.min == undefined ? values : values.concat(opts.min))
var $svg = this.prepare(opts.width, opts.height)
, width = $svg.width()
, height = $svg.height()
, diff = max - min
, padding = opts.padding
, fill = this.fill()
var xScale = this.x = function(input) {
return input * width / values.length
}
var yScale = this.y = function(input) {
return height - (
diff
? ((input - min) / diff) * height
: 1
)
}
for (var i = 0; i < values.length; i++) {
var x = xScale(i + padding)
, w = xScale(i + 1 - padding) - x
, value = values[i]
, valueY = yScale(value)
, y1 = valueY
, y2 = valueY
, h
if (!diff) {
h = 1
} else if (value < 0) {
y1 = yScale(Math.min(max, 0))
} else {
y2 = yScale(Math.max(min, 0))
}
h = y2 - y1
if (h == 0) {
h = 1
if (max > 0 && diff) y1--
}
$svg.append(
svgElement('rect', {
'data-value': value,
fill: fill.call(this, value, i, values),
x: x,
y: y1,
width: w,
height: h
})
)
}
}
);
})(jQuery, document, Math);
document.addEventListener('DOMContentLoaded', function () {
/* Starts peity
DOC: searches for the class and init. peity based on class
*/
$(".peity-pie").peity("pie");
$('.peity-donut').peity('donut');
$(".peity-line").peity("line");
$(".peity-bar").peity("bar");
});

File diff suppressed because it is too large Load Diff

383
Frontend/lib/theme-demo.css Normal file
View File

@ -0,0 +1,383 @@
/* THEME COLORs
========================================================================== */
/* Looks good on chrome default color profile */
/* We will manually convert these primary colors to rgb for the dark mode option of the theme */
/* looks good in sRGB but washed up on chrome default
$color-primary: #826bb0;
$color-success: #31cb55;
$color-info: #5e93ec;
$color-warning: #eec559;
$color-danger: #dc4b92;
$color-fusion: darken(desaturate(adjust-hue($color-primary, 5), 80%), 25%); */
/* Color Polarity
========================================================================== */
/* PAINTBUCKET MIXER
========================================================================== */
/* the grays */
/* the sapphires */
/* the emeralds */
/* the amethyths */
/* the topaz */
/* the rubies */
/* the graphites */
/* Define universal border difition (div outlines, etc)
========================================================================== */
/* MOBILE BREAKPOINT & GUTTERS (contains some bootstrap responsive overrides)
========================================================================== */
/* define when mobile menu activates, here we are declearing (lg) so it targets the one after it */
/* bootstrap reference xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px*/
/* global var used for spacing*/
/* Uniform Padding variable */
/* Heads up! This is a global scoped variable - changing may impact the whole template */
/* BOOTSTRAP OVERRIDES (bootstrap variables)
========================================================================== */
/* usage: theme-colors("primary"); */
/* forms */
/*$input-height: calc(2.25rem + 1px); //I had to add this because the input gruops was having improper height for some reason... */
/* links */
/* checkbox */
/*$custom-file-height-inner: calc(2.25rem - 1px);*/
/* not part of bootstrap variable */
/* custom checkbox */
/* custom range */
/* custom file */
/* badge */
/* cards */
/*border radius*/
/* alert */
/* toast */
/* breadcrumb */
/* input button */
/* nav link */
/* nav, tabs, pills */
/* tables */
/* dropdowns */
/* dropdowns sizes */
/* popovers */
/* tooltips */
/* modal */
/* reference guide
http://www.standardista.com/px-to-rem-conversion-if-root-font-size-is-16px/
8px = 0.5rem
9px = 0.5625rem
10px = 0.625rem
11px = 0.6875rem
12px = 0.75rem
13px = 0.8125rem
14px = 0.875rem
15px = 0.9375rem
16px = 1rem (base)
17px = 1.0625rem
18px = 1.125rem
19px = 1.1875rem
20px = 1.25rem
21px = 1.3125rem
22px = 1.375rem
24px = 1.5rem
25px = 1.5625rem
26px = 1.625rem
28px = 1.75rem
30px = 1.875rem
32px = 2rem
34px = 2.125rem
36px = 2.25rem
38px = 2.375rem
40px = 2.5rem
*/
/* Fonts */
/* carousel */
/* BASE VARS
========================================================================== */
/* font vars below will auto change to rem values using function rem($value)*/
/* 11px */
/* 12px */
/* 12.5px */
/* 14px */
/* 15px */
/* 16px */
/* 28px */
/* Font Family
========================================================================== */
/*hint: you can also try the font called 'Poppins' by replacing the font 'Roboto' */
/* ANIMATIONS
========================================================================== */
/* this addresses all animation related to nav hide to nav minify */
/* Z-INDEX declearation
========================================================================== */
/* we adjust bootstrap z-index to be higher than our higest z-index*/
/* CUSTOM ICON PREFIX
========================================================================== */
/* PRINT CSS (landscape or portrait)
========================================================================== */
/* landscape or portrait */
/* auto, letter */
/* Common Element Variables
========================================================================== */
/* Z-index decleartion "birds eye view"
========================================================================== */
/* Components
========================================================================== */
/* PAGE HEADER STUFF
========================================================================== */
/* colors */
/* height */
/* logo */
/* try not to go beywond the width of $main_nav_width value */
/* you may need to change this depending on your logo design */
/* adjust this as you see fit : left, right, center */
/* icon font size (not button) */
/* search input box */
/* suggestion: #ccced0*/
/* btn */
/* dropdown: app list */
/* badge */
/* COMPONENTS & MODS */
/* NAVIGATION STUFF
Guide:
aside.page-sidebar ($nav-width, $nav-background)
.page-logo
.primary-nav
.info-card
ul.nav-menu
li
a (parent level-0..., $nav-link-color, $nav-link-hover-color, $nav-link-hover-bg-color, $nav-link-hover-left-border-color)
icon
span
collapse-sign
ul.nav-menu-sub-one
li
a ($nav-level-1... $nav-sub-link-height)
span
collapse-sign
ul.nav-menu-sub-two
li
a ($nav-level-2... $nav-sub-link-height)
span
p.nav-title ($nav-title-*...)
========================================================================== */
/* main navigation */
/* left panel */
/* nav footer */
/* nav parent level-0 */
/* nav link level-1 */
/* nav level-1 bg */
/* nav icon sizes */
/* badge default */
/* all child */
/* nav title */
/* nav Minify */
/* when the menu pops on hover */
/* navigation Width */
/* partial visibility of the menu */
/* top navigation */
/* nav Info Card (appears below the logo) */
/* width is auto */
/* nav DL labels for all child */
/* will be pulled to left as a negative value */
/* MISC Settings
========================================================================== */
/* List Table */
/* PAGE SETTINGS
========================================================================== */
/* PAGE BREADCRUMB
========================================================================== */
/* PAGE COMPONENT PANELS
========================================================================== */
/* PAGE COMPONENT PROGRESSBARS
========================================================================== */
/* PAGE COMPONENT MESSENGER
========================================================================== */
/* FOOTER
========================================================================== */
/* GLOBALS
========================================================================== */
/* ACCESSIBILITIES */
/* SHORTCUT BUTTON (appears on bottom right of the page) */
/* GULP WARNINGS */
.app-body-demo {
height: 350px;
max-width: 550px;
margin: 0 auto;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.125); }
.app-body-demo .app-nav-demo:not(.app-nav-demo-minify) {
width: 20%; }
.app-body-demo .app-nav-demo-minify {
width: 7%;
padding: 3px; }
.app-body-demo .app-nav-demo-minify .page-logo {
width: auto; }
.app-body-demo .app-nav-demo-hidden {
width: 10px; }
.app-body-demo .app-header-demo {
height: 30px; }
.app-body-demo .app-nav-demo-top {
height: 26px; }
.app-body-demo .app-header-btn-demo {
width: 26px;
height: 18px;
border-radius: 2px;
padding: 0 !important;
font-size: 10px; }
.app-body-demo .app-hematite-demo {
background: #434a51; }
.app-body-demo .app-amethyst-demo {
background: #5c4581; }
.app-body-demo .app-aquamarine-demo {
background: #476f85; }
.app-body-demo .app-sapphire-demo {
background: #334768; }
#app-eventlog {
height: 260px;
min-height: 260px;
max-height: 300px;
overflow: auto;
display: block;
/*> div:last-child {
background:#f9f4b5;
}
> div:nth-last-child(2) {
background:#fffde1;
}*/ }
#app-eventlog > div:not(:last-child) {
border-bottom: 1px solid #eaeaea; }
#app-eventlog:empty {
background: #eee; }
#app-eventlog:empty:before {
content: "Event Logs";
font-size: 28px;
font-weight: 300;
color: #c7c7c7;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
top: -20px;
bottom: 0;
left: 0;
right: 0; }
#app-eventlog .fs-base .badge {
font-size: 90% !important;
font-weight: 400 !important;
background: #a9a9a9;
text-align: left;
min-width: 50px; }
.prettyprint {
overflow: auto;
background: #f7f9fa;
font-size: 100%;
padding: 1rem 1rem !important;
border: 0 !important; }
/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
.prettyprint {
background: #efecf4;
background: rgba(var(--theme-rgb-primary), 0.1);
font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;
border: 0 !important; }
.pln {
color: #19171c; }
ol.linenums {
margin-top: 0;
margin-bottom: 0;
color: #7e7887; }
li.L0 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L1 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L2 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L3 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L4 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L5 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L6 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L7 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L8 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
li.L9 {
padding-left: 1em;
background-color: #efecf4;
list-style-type: decimal; }
@media screen {
.str {
color: #2a9292; }
.kwd {
color: #955ae7; }
.com {
color: #7e7887; }
.typ {
color: #576ddb; }
.lit {
color: #aa573c; }
.pun {
color: #19171c; }
.opn {
color: #19171c; }
.clo {
color: #19171c; }
.tag {
color: #be4678; }
.atn {
color: #aa573c; }
.atv {
color: #398bc6; }
.dec {
color: #aa573c; }
.var {
color: #be4678; }
.fun {
color: #576ddb; } }
/*# sourceMappingURL=theme-demo.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -6,8 +6,8 @@
<title>登入 | 全方位監控系統</title>
<!-- base css -->
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="css/vendors.bundle.css">
<link id="appbundle" rel="stylesheet" media="screen, print" href="css/app.bundle.css">
<link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
<link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
<link id="mytheme" rel="stylesheet" media="screen, print" href="css/themes/cust-theme-15.css">
<link id="myskin" rel="stylesheet" media="screen, print" href="css/skins/skin-master.css">
<!-- Place favicon.ico in the root directory -->
@ -69,14 +69,14 @@
</video>
<!--Base JS-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="js/vendors.bundle.js"></script>
<script src="js/app.bundle.js"></script>
<script src="lib//vendors.bundle.js"></script>
<script src="lib//app.bundle.js"></script>
<!-- JQuery Validate -->
<script src="lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="lib/jquery-validation/dist/additional-methods.min.js"></script>
<script src="lib/jquery-validation/dist/localization/messages_zh_TW.js"></script>
<script src="js/notifications/sweetalert2/sweetalert2.bundle.js"></script>
<script src="js/notifications/toastr/toastr.js"></script>
<script src="lib/notifications/sweetalert2/sweetalert2.bundle.js"></script>
<script src="lib/notifications/toastr/toastr.js"></script>
<script src="js/toast.js"></script>
</body>
</html>