This commit is contained in:
2025-12-07 15:58:07 +07:00
parent 75a641ab40
commit 942aeafb60
2211 changed files with 178727 additions and 89 deletions

View File

@@ -0,0 +1,40 @@
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea#product-desc',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
tinymce.init({
selector: 'textarea#product-static',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script>

View File

@@ -0,0 +1,83 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs/editor/editor.main.css">
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs' } });
require(['vs/editor/editor.main'], function () {
monaco.editor.defineTheme('myCustomTheme', {
base: 'vs',
inherit: true,
rules: [
{ token: 'tag', foreground: '4CAF50', fontStyle: 'bold' }, // Màu cam cho thẻ HTML
{ token: 'attribute.name', foreground: 'e00000' }, // Màu xanh lá cho thuộc tính
{ token: 'attribute.value', foreground: 'e00000' }, // Màu vàng cho giá trị thuộc tính
{ token: 'string', foreground: 'e00000' }, // Màu xanh dương cho chuỗi
{ token: 'comment', foreground: '#4CAF50', fontStyle: 'italic' },
],
colors: {
'editor.foreground': '#000000',
'editorGutter.background': '#f6f6f6',
'editor.lineNumber.foreground': '#000000',
}
})
monaco.editor.create(document.getElementById('tpl_editor'), {
value: `<section class= "section-breakcrumb routing py-12 line-clamp" >
<div class="global-breadcrumb container">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none
d- flex">
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item" class="nopad-l">
<span itemprop="name">Trang chủ</span>
</a>
<meta itemprop="position" content="1">
</li>
<li class="routing-link" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="{{ path.url }}" itemprop="item" class="nopad-l">
<span itemprop="name"> {{ path.name }} </span>
</a>
<meta itemprop="position" content="{{ counter }}" />
</li>
</ol>
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="list-style-none d-flex">
<li class="routing-link" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item" class="nopad-l">
<span itemprop="name">Trang chủ</span>
</a>
<meta itemprop="position" content="1">
</li>
`,
language: 'html',
theme: 'myCustomTheme',
automaticLayout: true,
minimap: { enabled: false },
autoClosingBrackets: true,
autoClosingQuotes: true,
autoIndent: true,
wordWrap: 'on',
});
});
function open_template_list(id) {
var $template = $('#template_list_' + id)
if ($template.prop('open')) {
$('#template_list_' + id).prop('open', false);
} else {
$('#template_list_' + id).prop('open', true);
}
}
function show_older_version() {
$('#older_version').toggle()
}
</script>

View File

View File

@@ -0,0 +1,393 @@
<script>
const initCustomerAcquisitionChart = () => {
const chartOptions = {
chart: {
height: 356,
sparkline: {
enabled: false,
},
toolbar: {
show: false,
},
zoom: {
enabled: false,
},
background: "transparent",
},
forecastDataPoints: {
count: 2,
dashArray: [6, 4],
},
grid: {
show: false,
},
yaxis: {
show: false,
min: 125,
max: 181,
},
xaxis: {
categories: Array.from({ length: 15 }, (_, index) => index + 1),
},
tooltip: {
y: {
formatter: (val) => val.toString(),
},
},
stroke: {
curve: "stepline",
width: [2, 1.5],
},
colors: ["#167bff", "rgba(150,150,150,0.3)"],
series: [
{
name: "Khách hàng",
data: [144, 150, 146, 154, 150, 155, 160, 155, 140, 155, 160, 180, 170, 165, 165],
},
{
name: "Quảng cáo",
data: [140, 142, 142, 140, 146, 148, 150, 136, 130, 133, 145, 148, 158, 150, 150],
},
],
}
if (document.getElementById("customer-acquisition-chart")) {
new ApexCharts(document.getElementById("customer-acquisition-chart"), chartOptions).render()
}
}
const initRevenueStatisticsChart = () => {
const chartOptions = {
chart: {
height: 288,
type: "bar",
stacked: true,
background: "transparent",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
borderRadius: 8,
borderRadiusApplication: "end",
borderRadiusWhenStacked: "last",
colors: {
backgroundBarColors: ["rgba(150,150,150,0.07)"],
backgroundBarRadius: 8,
},
columnWidth: "45%",
barHeight: "100%",
},
},
dataLabels: {
enabled: false,
},
colors: ["#ff8b4b", "#6c74f8"],
legend: {
show: true,
horizontalAlign: "center",
offsetX: 0,
offsetY: 6,
},
series: [
{
name: "Đơn hàng",
data: [10, 12, 14, 16, 18, 20, 14, 16, 24, 12],
},
{
name: "Doanh thu",
data: [15, 24, 21, 28, 30, 40, 22, 32, 48, 20],
},
],
xaxis: {
categories: [
new Date("1/1/2016"),
new Date("1/1/2017"),
new Date("1/1/2018"),
new Date("1/1/2019"),
new Date("1/1/2020"),
new Date("1/1/2021"),
new Date("1/1/2022"),
new Date("1/1/2023"),
new Date("1/1/2024"),
new Date("1/1/2025"),
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
formatter: (val) => {
return new Date(val).getFullYear().toString()
},
},
},
yaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: false,
},
},
tooltip: {
enabled: true,
shared: true,
intersect: false,
},
grid: {
show: false,
},
responsive: [
{
breakpoint: 450,
options: {
plotOptions: {
bar: {
borderRadius: 4,
},
},
xaxis: {
tickAmount: 3,
},
},
},
],
}
if (document.getElementById("revenue-statics-chart")) {
new ApexCharts(document.getElementById("revenue-statics-chart"), chartOptions).render()
}
}
const initGlobalSalesChart = () => {
const data = [
{
name: "Turkey",
orders: 9,
},
{
name: "India",
orders: 12,
},
{
name: "Canada",
orders: 13,
},
{
name: "US",
orders: 16,
},
{
name: "Netherlands",
orders: 14,
},
{
name: "Italy",
orders: 17,
},
{
name: "Other",
orders: 19,
},
]
const chartOptions = {
chart: {
height: 344,
type: "bar",
parentHeightOffset: 0,
background: "transparent",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: true,
borderRadius: 4,
distributed: true,
borderRadiusApplication: "end",
},
},
dataLabels: {
enabled: true,
textAnchor: "start",
style: {
colors: ["#fff"],
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
},
offsetX: -10,
dropShadow: {
enabled: false,
},
},
series: [
{
data: data.map((country) => country.orders),
},
],
legend: {
show: false,
},
stroke: {
width: 0,
colors: ["#fff"],
},
xaxis: {
categories: data.map((country) => country.name),
},
yaxis: {
labels: {
show: false,
},
},
grid: {
show: false,
},
tooltip: {
theme: "dark",
x: {
show: false,
},
y: {
formatter: (val) => `${val}%`,
},
},
colors: ["#7179ff", "#4bcd89", "#ff6c88", "#5cb7ff", "#9071ff", "#ff5892", "#ff8b4b"],
}
if (document.getElementById("global-sales-chart")) {
new ApexCharts(document.getElementById("global-sales-chart"), chartOptions).render()
}
}
const initGradientDonutChart = () => {
const seriesData = [35.1, 23.5, 2.4, 5.4]
const chartOptions = {
chart: {
type: "donut",
height: 380,
toolbar: {
show: false,
},
background: "transparent",
},
title: {
text: "Truy cập website",
style: { fontWeight: "500" },
align: "right",
},
stroke: {
show: true,
width: 1,
colors: ["var(--color-base-100)"],
},
fill: {
type: "solid",
},
plotOptions: {
pie: {
startAngle: -45,
endAngle: 315,
donut: {
size: "60%",
labels: {
show: true,
value: {
formatter: (value) => `${value}K`,
color: "var(--color-base-content)",
},
total: {
show: true,
color: "#FF4560",
formatter: () => `${seriesData.reduce((acc, cur) => acc + cur, 0)}K`,
},
},
},
},
},
tooltip: {
enabled: true,
y: {
formatter: (value) => `${value}K`,
},
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
labels: [
"Trực tiếp",
"Quảng cáo",
"Liên kết",
"Qua email",
],
colors: ["#0041E8", "#6DC580", "#FFC700", "#E00000"],
series: seriesData,
}
if (document.getElementById("gradient-donut-chart")) {
new ApexCharts(document.getElementById("gradient-donut-chart"), chartOptions).render()
}
}
function initAdminHomeTab() {
document.querySelectorAll("#js-admin-home-tab a").forEach(function (link) {
link.addEventListener("click", function (event) {
event.preventDefault();
// Xóa class current ở tất cả các tab
document.querySelectorAll("#js-admin-home-tab a").forEach(function (el) {
el.classList.remove("btn-active");
});
// Gán class current vào tab đang click
this.classList.add("btn-active");
// Lấy ID từ href để show nội dung
var id = this.getAttribute("href");
// Ẩn tất cả nội dung
document.querySelectorAll(".home-report-holder").forEach(function (holder) {
holder.style.display = "none";
});
// Hiện phần tương ứng
document.querySelector(id).style.display = "block";
});
});
}
document.addEventListener("DOMContentLoaded", () => {
initCustomerAcquisitionChart()
initRevenueStatisticsChart()
initGlobalSalesChart()
initGradientDonutChart()
initAdminHomeTab()
})
</script>

View File

@@ -0,0 +1,61 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.css" />
<script src="https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplebar/6.2.7/simplebar.css" />
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- icon -->
<script src="https://unpkg.com/lucide@latest"></script>
<script src="{{'jquery.js' | asset_url }}"></script>
<script src="{{'global.js' | asset_url }}"></script>
{% if global.module == 'home' %}
{% include javascript/homepage %}
{% elsif global.module == 'product' %}
{% if global.view == 'home' %}
{% include javascript/product_list %}
{% endif %}
{% include javascript/product_form %}
{% elsif global.module == 'deal' %}
{% include javascript/product_form %}
{% elsif global.module == 'brand' %}
{% include javascript/brand %}
{% elsif global.module == 'report' %}
{% include javascript/visitor %}
{% elsif global.module == 'system' %}
{% include javascript/system %}
{% elsif global.module == 'page' %}
{% include javascript/page %}
{% elsif global.module == 'template' and global.view == 'edit-template' %}
{% include javascript/edit_template %}
{% elsif global.module == 'tag' and global.view == 'add' %}
{% include javascript/tag %}
{% elsif global.module == 'shipping2' %}
{% include javascript/shipping2 %}
{% endif %}

View File

@@ -0,0 +1,23 @@
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ 'RowExpand.js' | asset_url }}"></script>
<script>
tinymce.init({
selector: 'textarea#product-desc',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script>

View File

@@ -0,0 +1,62 @@
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ 'RowExpand.js' | asset_url }}"></script>
<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet" />
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css"
rel="stylesheet" />
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
<script>
// Quan trọng: đăng ký plugin
FilePond.registerPlugin(FilePondPluginImagePreview);
FilePond.create(document.querySelector("#image-preview-filepond"), {
credits: false,
allowImageCrop: false,
allowImagePreview: false,
allowMultiple: true,
labelIdle: 'Kéo thả ảnh hoặc <span class="filepond--label-action">Chọn ảnh</span>',
})
tinymce.init({
selector: 'textarea#product-desc',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
tinymce.init({
selector: 'textarea#product-static',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script>

View File

@@ -0,0 +1,137 @@
<script>
function _get_list_category() {
return {
"list_product": [
{
'id': 2105,
'title': 'Máy in mã vạch MH241',
'request_path': '/may-in-ma-vach-mh241',
'price': 0,
'market_price': 0,
'quantity': 1,
'image': {
'thumb': 'http://hura8.hurasoft.com/media/product/t-2105-2105_10_1.jpg',
'small': 'http://hura8.hurasoft.com/media/product/s-2105-2105_10_1.jpg',
'large': 'http://hura8.hurasoft.com/media/product/l-2105-2105_10_1.jpg',
'original': 'http://hura8.hurasoft.com/media/product/2105-2105_10_1.jpg',
}
},
{
'id': 2104,
'title': '[Mới 100%] Dell Gaming G16 7620 (Intel core i7-12700H, 16GB, 1TB, RTX 3060 6GB, 16″ QHD+ 165Hz IPS)',
'request_path': '/acer-gaming-predator-helios-neo-16-2023',
'price': 28500000,
'market_price': 0,
'quantity': 1,
'image':
{
'thumb': 'http://hura8.hurasoft.com/media/product/t-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
'small': 'http://hura8.hurasoft.com/media/product/s-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
'large': 'http://hura8.hurasoft.com/media/product/l-2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
'original': 'http://hura8.hurasoft.com/media/product/2104-2104_predator_16_2023_laptop_tcc_1_2.jpg',
}
},
{
'id': 2100,
'title': 'Chăn hè đũi xơ đậu nành mã 32 Gấu xanh',
'request_path': '/chan-he-dui-xo-dau-nanh-ma-32-gau-xanh',
'price': 220000,
'market_price': 340000,
'quantity': 1,
'image':
{
'thumb': 'http://hura8.hurasoft.com/media/product/t-2100-2100_8640_m32___g___u_xanh.jpg',
'small': 'http://hura8.hurasoft.com/media/product/s-2100-2100_8640_m32___g___u_xanh.jpg',
'large': 'http://hura8.hurasoft.com/media/product/l-2100-2100_8640_m32___g___u_xanh.jpg',
'original': 'http://hura8.hurasoft.com/media/product/2100-2100_8640_m32___g___u_xanh.jpg',
}
},
{
'id': 2098,
'title': 'Chăn hè đũi xơ đậu nành mã 35 Tròn chấm pi',
'request_path': '/bo-ga-goi-chun-chan-xo-dau-nanh-ma-36-tho-cherry-1',
'price': 225000,
'market_price': 350000,
'quantity': 1,
'image':
{
'thumb': 'http://hura8.hurasoft.com/media/product/t-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
'small': 'http://hura8.hurasoft.com/media/product/s-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
'large': 'http://hura8.hurasoft.com/media/product/l-2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
'original': 'http://hura8.hurasoft.com/media/product/2098-2098_8666_chan_he_dui_xo_dau_nanh_ma_35_tron_cham_.jpg',
}
},
{
'id': 2097,
'title': 'Bộ ga gối chun chần xơ đậu nành mã 36 Thỏ Cherry',
'request_path': '/bo-ga-goi-chun-chan-xo-dau-nanh-ma-36-tho-cherry',
'price': 280000,
'market_price': 350000,
'quantity': 1,
'image':
{
'thumb': 'http://hura8.hurasoft.com/media/product/t-2097-2097_8695_m36___th____cherry.jpg',
'small': 'http://hura8.hurasoft.com/media/product/s-2097-2097_8695_m36___th____cherry.jpg',
'large': 'http://hura8.hurasoft.com/media/product/l-2097-2097_8695_m36___th____cherry.jpg',
'original': ' http://hura8.hurasoft.com/media/product/2097-2097_8695_m36___th____cherry.jpg',
}
}
]
}
}
function displayProductList(products) {
var productListElement = $("#js-show-search");
var html = '';
$.each(products, function (index, product) {
var price = product.price
if (price > 0) {
price = `<span class="price">` + formatCurrency(price) + ` đ</span>`;
} else {
price = '<span class="price">0</span>';
}
html += `
<a href="`+ product.request_path + `" class="flex items-center justify-between item">
<span class="info">
<span class="name">`+ product.title + `</span>
`+ price + `
</span>
<img src="`+ product.image.thumb + `" alt="` + product.title + `">
</a>
`;
});
productListElement.html(html);
}
function searchProduct() {
var searchTerm = $("#js-input-search").val().toLowerCase();
var allProducts = _get_list_category().list_product;
// Filter products based on the search term
var filteredProducts = $.grep(allProducts, function (product) {
return product.title.toLowerCase().includes(searchTerm);
});
// Display the filtered products
displayProductList(filteredProducts);
if (filteredProducts.length > 0 && searchTerm !== "") {
$("#js-show-search").show();
displayProductList(filteredProducts);
} else {
$("#js-show-search").hide();
}
}
$(document).ready(function () {
$("#js-input-search").on("input", searchProduct);
})
</script>

View File

@@ -0,0 +1,15 @@
<script>
var current_index = '2';
function addRow() {
var index = 1 + parseInt(current_index);
var tpl = '<tr><td>' + index + '</td> ' +
'<td>' +
'<input type="text" name="cod[order_value][]" class="input input-bordered iput-sm h-[35px] rounded-[4px]" size="30" value="" onkeyup="this.value = writeStringToPrice(this.value)" placeholder="Nhập giá trị đơn hàng"></td> ' +
'<td><input type="text" name="cod[fee][]" class="input input-bordered iput-sm h-[35px] rounded-[4px]" size="20" value="" placeholder="Nhập phí" onkeyup="this.value = writeStringToPrice(this.value)"></td>' +
'<td><a href="/admin/tag/delete/1" class="block w-[30px] h-[30px] leading-[30px] p-[5px] border-[1px] rounded-[4px]" > <i class="icons icon-remove"></i></a ></td>' +
'</tr>';
$("#tb_province").append(tpl);
current_index = index;
}
</script>

View File

@@ -0,0 +1,73 @@
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea#info-desc',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
tinymce.init({
selector: 'textarea#contact-desc',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script>
<script>
var $tb_setting = $('#js-tb-settings');
var current_index = $tb_setting.find("tr").length - 1;
var $row_tpl = `
<tr>
<td>{index}</td>
<td>
<input name="" id="" placeholder="0"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]" />
</td>
<td>
<input name="" id="" placeholder="0"
class="w-[100%] border-[1px] border-[#D8D8D8] py-[6px] px-[10px] rounded-[4px] shadow-[0_2px_4px_0_rgba(0,0,0,0.12)] mr-[10px]" />
</td>
<td>
<a href=""
class="w-[30px] h-[30px] border-[1px] border-[#9E9E9E] rounded-[4px] text-center leading-[30px] flex items-center justify-center m-auto">
<i class="icons icon-remove"></i>
</a>
</td>
</tr>
`;
function add_form_setting() {
current_index += 1;
$tb_setting.append($row_tpl.replace(/{index}/g, current_index));
}
</script>

View File

@@ -0,0 +1,20 @@
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea#textarea-desc',
height: 350,
menubar: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script>

View File

@@ -0,0 +1,285 @@
<script src="/assets/script/charts.js"></script>
<script>
$(document).ready(function () {
access_chart();
chart_pie();
revenue_chart();
})
// Truy cập
function access_chart() {
const options = {
colors: ["#0041E8", "#FFC700"],
series: [
{
name: "Lượt truy cập",
color: "#0041E8",
data: [
{ x: "Mon", y: 231 },
{ x: "Tue", y: 122 },
{ x: "Wed", y: 63 },
{ x: "Thu", y: 421 },
{ x: "Fri", y: 122 },
{ x: "Sat", y: 323 },
{ x: "Sun", y: 111 },
],
},
{
name: "Số khách",
color: "#FFC700",
data: [
{ x: "Mon", y: 232 },
{ x: "Tue", y: 113 },
{ x: "Wed", y: 341 },
{ x: "Thu", y: 224 },
{ x: "Fri", y: 522 },
{ x: "Sat", y: 411 },
{ x: "Sun", y: 243 },
],
},
],
chart: {
type: "bar",
height: "320px",
fontFamily: "Inter, sans-serif",
toolbar: {
show: false,
},
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "70%",
borderRadiusApplication: "end",
borderRadius: 8,
},
},
tooltip: {
shared: true,
intersect: false,
style: {
fontFamily: "Inter, sans-serif",
},
},
states: {
hover: {
filter: {
type: "darken",
value: 1,
},
},
},
stroke: {
show: true,
width: 0,
colors: ["transparent"],
},
grid: {
show: false,
strokeDashArray: 4,
padding: {
left: 2,
right: 2,
top: -14
},
},
dataLabels: {
enabled: false,
},
legend: {
show: true,
position: 'top',
},
xaxis: {
floating: false,
labels: {
show: true,
style: {
fontFamily: "Inter, sans-serif",
cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
}
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
show: false,
},
fill: {
opacity: 1,
},
}
if (document.getElementById("js-access-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("js-access-chart"), options);
chart.render();
}
}
function chart_pie() {
const getChartOptions = () => {
return {
series: [55, 30, 15],
colors: ["#0041E8", "#41C0E9", "#A8E5DA",],
chart: {
height: "370px",
width: "100%",
type: "pie",
},
stroke: {
colors: ["transparent"],
lineCap: "",
},
plotOptions: {
pie: {
labels: {
show: true,
name: {
show: true,
fontFamily: "Inter, sans-serif",
offsetY: 20,
},
value: {
show: true,
fontFamily: "Inter, sans-serif",
offsetY: -20,
formatter: function (value) {
return value + "%"
},
},
},
size: "100%",
},
},
labels: ["Desktop", "Table", "Mobile"],
dataLabels: {
enabled: true,
textAnchor: 'middle',
offsetX: '50%',
offsetY: '50%',
borderWidth: 1,
borderColor: '#fff',
},
legend: {
position: "bottom",
fontFamily: "Inter, sans-serif",
},
yaxis: {
labels: {
formatter: function (value) {
return value + "%"
},
},
},
xaxis: {
labels: {
formatter: function (value) {
return value + "%"
},
},
axisTicks: {
show: true,
},
axisBorder: {
show: true,
},
},
}
}
if (document.getElementById("js-chart-pie") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("js-chart-pie"), getChartOptions());
chart.render();
}
}
// Doanh thu
function revenue_chart() {
let options = {
chart: {
maxWidth: "100%",
height: "320px",
type: "area",
fontFamily: "Inter, sans-serif",
dropShadow: {
enabled: false,
},
toolbar: {
show: false,
},
},
tooltip: {
enabled: true,
x: {
show: false,
},
},
fill: {
type: "gradient",
gradient: {
opacityFrom: 0.55,
opacityTo: 0,
shade: "#1C64F2",
gradientToColors: ["#1C64F2"],
},
},
dataLabels: {
enabled: false,
},
stroke: {
width: 6,
},
grid: {
show: false,
strokeDashArray: 4,
padding: {
left: 2,
right: 2,
top: 0
},
},
series: [
{
name: "New users",
data: [6500, 6418, 6456, 6526, 6356, 6456],
color: "#0041E8",
},
],
xaxis: {
categories: [
'01 February',
'02 February',
'03 February',
'04 February',
'05 February',
'06 February',
'07 February'
],
labels: {
show: false,
},
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
},
yaxis: {
show: false,
},
}
if (document.getElementById("js-revenue-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("js-revenue-chart"), options);
chart.render();
}
}
</script>