Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 731aa94dc7 | |||
| 63f9681034 | |||
| fcf0c0a46a | |||
| f411f90765 | |||
| df01be1d85 | |||
| bac5197e81 | |||
| 6400119331 | |||
| e06fff50b3 | |||
| 5aa54e409e | |||
| 85d1c98317 | |||
| 84023c7e5f | |||
| 4db28eb1a2 | |||
| f6cbcac12e | |||
| c604f61cec | |||
| 7a4a674d3c | |||
| b202a57180 | |||
| e411953a73 |
12
Dockerfile
Normal file
12
Dockerfile
Normal file
@ -0,0 +1,12 @@
|
||||
FROM node:14-alpine
|
||||
|
||||
WORKDIR /code
|
||||
|
||||
COPY package.json /code/package.json
|
||||
COPY package-lock.json /code/package-lock.json
|
||||
|
||||
RUN npm install
|
||||
|
||||
COPY . /code
|
||||
|
||||
CMD ["npm", "run", "dev"]
|
||||
11
README.md
Normal file
11
README.md
Normal file
@ -0,0 +1,11 @@
|
||||
# Finance & Crypto Dashboard
|
||||
|
||||
<img src="./static/img/Screenshot1.png" width=100% height=100%>
|
||||
|
||||
|
||||
Test:
|
||||
```
|
||||
vscode://vscode.git/clone?url=https%3a%2f%2fgit.sthope.dev%2fsthope%2fCryptoDashboard.git
|
||||
sudo npm install
|
||||
npm run dev
|
||||
```
|
||||
14
docker-compose.yml
Normal file
14
docker-compose.yml
Normal file
@ -0,0 +1,14 @@
|
||||
---
|
||||
version: "3.8"
|
||||
services:
|
||||
iot_dashboard:
|
||||
image: sthopeless/iot-finances:latest
|
||||
container_name: iot_dashboard
|
||||
restart: unless-stopped
|
||||
network_mode: bridge
|
||||
volumes:
|
||||
- ./:/code
|
||||
ports:
|
||||
- 49153:8080
|
||||
labels:
|
||||
- com.centurylinklabs.watchtower.enable=true
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>CryptoDashboard</title>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.ico"/>
|
||||
<link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.png"/>
|
||||
<!-- css -->
|
||||
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
|
||||
|
||||
<link rel="stylesheet" href="/static/css/AdminLTE.min.css">
|
||||
<link rel="stylesheet" href="/static/css/skin-blue.min.css">
|
||||
<link rel="stylesheet" href="/static/css/skin-cpha-dark.min.css">
|
||||
<link rel="stylesheet" href="/static/js/plugins/pace/pace.min.css">
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
@ -21,6 +21,7 @@
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
<body class="hold-transition skin-blue sidebar-mini" style="overflow-y:scroll">
|
||||
<div id="root"></div>
|
||||
|
||||
1115
package-lock.json
generated
1115
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -21,15 +21,24 @@
|
||||
"datatables.net": "^1.10.19",
|
||||
"datatables.net-bs": "^1.10.19",
|
||||
"faker": "^3.1.0",
|
||||
"fs": "^0.0.1-security",
|
||||
"googleapis": "^95.0.0",
|
||||
"hideseek": "^0.7.0",
|
||||
"http-server": "^0.9.0",
|
||||
"http2": "^3.3.7",
|
||||
"jquery": "^2.2.2",
|
||||
"mdi": "^2.2.43",
|
||||
"moment": "^2.12.0",
|
||||
"net": "^1.0.2",
|
||||
"readline": "^1.3.0",
|
||||
"tls": "^0.0.1",
|
||||
"vue": "^2.2.2",
|
||||
"vue-date-picker": "^1.0.2",
|
||||
"vue-resource": "^1.0.3",
|
||||
"vue-router": "^2.2.0",
|
||||
"vuex": "^2.0.0",
|
||||
"sheetsu-node": "0.0.7",
|
||||
"google-spreadsheet": "^3.0.11",
|
||||
"vuex-router-sync": "^4.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<footer class="main-footer">
|
||||
<strong>Copyright © {{ year }}
|
||||
<a href="https://discord.gg/Mh9mTEA">CPHA.pt</a>.</strong> All rights reserved.
|
||||
<a href="https://www.sthope.dev">Sthope</a>.</strong> All rights reserved.
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
|
||||
@ -3,41 +3,6 @@
|
||||
|
||||
<!-- sidebar: style can be found in sidebar.less -->
|
||||
<section class="sidebar">
|
||||
|
||||
<!-- Sidebar user panel (optional) -->
|
||||
<div class="user-panel">
|
||||
<div class="pull-left image">
|
||||
<img :src="user.avatar" />
|
||||
</div>
|
||||
<div class="pull-left info">
|
||||
<div>
|
||||
<p class="white">{{user.displayName}}</p>
|
||||
</div>
|
||||
<a href="javascript:;">
|
||||
<i class="fa fa-circle text-success"></i> Online
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- search form (Optional) -->
|
||||
<form v-on:submit.prevent class="sidebar-form" id="searchForm">
|
||||
<div class="input-group" id="searchContainer">
|
||||
<span class="input-group-btn">
|
||||
<input type="text"
|
||||
name="search"
|
||||
id="search"
|
||||
class="search form-control"
|
||||
data-toggle="hideseek" p
|
||||
laceholder="Search Menus"
|
||||
data-list=".sidebar-menu">
|
||||
<button type="submit" name="search" id="search-btn" class="btn btn-flat">
|
||||
<i class="fa fa-search"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
<!-- /.search form -->
|
||||
|
||||
<!-- Sidebar Menu -->
|
||||
<sidebar-menu />
|
||||
<!-- /.sidebar-menu -->
|
||||
|
||||
@ -1,140 +1,40 @@
|
||||
<template>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="header">TOOLS</li>
|
||||
<router-link tag="li" class="pageLink" to="/">
|
||||
<a>
|
||||
<i class="fa fa-desktop"></i>
|
||||
<span class="page">Dashboard</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/tables">
|
||||
<a>
|
||||
<i class="fa fa-table"></i>
|
||||
<span class="page">Tables</span>
|
||||
</a>
|
||||
</router-link>
|
||||
|
||||
|
||||
<li class="header">CPHA</li>
|
||||
|
||||
<router-link tag="li" class="pageLink" to="/sthope">
|
||||
<a><i class="fa fa-bug"></i><span class="page">Sthope</span></a>
|
||||
</router-link>
|
||||
|
||||
<router-link tag="li" class="pageLink" to="/personalfinances">
|
||||
<a>
|
||||
<i class="fa fa-money"></i>
|
||||
<span class="page">Finances</span>
|
||||
</a>
|
||||
<a><i class="fa fa-money"></i><span class="page">Personal Finances</span></a>
|
||||
</router-link>
|
||||
|
||||
<router-link tag="li" class="pageLink" to="/expenses">
|
||||
<a><i class="fa fa-credit-card"></i><span class="page">Expenses</span></a>
|
||||
</router-link>
|
||||
|
||||
<router-link tag="li" class="pageLink" to="/cryptos">
|
||||
<a>
|
||||
<i class="fa fa-btc"></i>
|
||||
<span class="page">Cryptos</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/setting">
|
||||
<a>
|
||||
<i class="fa fa-cog"></i>
|
||||
<span class="page">Settings</span>
|
||||
</a>
|
||||
<a><i class="fa fa-btc"></i><span class="page">Cryptos</span></a>
|
||||
</router-link>
|
||||
|
||||
<li class="treeview">
|
||||
<a href="#">
|
||||
<i class="fa fa-folder-o"></i>
|
||||
<span class="treeview-title">Files</span>
|
||||
<i class="fa fa-cog"></i>
|
||||
<span class="treeview-title">Settings</span>
|
||||
<span class="pull-right-container pull-right">
|
||||
<i class="fa fa-angle-left fa-fw"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="treeview-menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-file-word-o"></i> Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-file-picture-o"></i> Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-file-pdf-o"></i> Item 3
|
||||
</a>
|
||||
</li>
|
||||
<router-link tag="li" class="pageLink" to="/user_configs"><a href="#"><i class="fa fa-user"></i> User Configs</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/configurations"><a href="#"><i class="fa fa-cog"></i> Configurations</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/google_settings"><a href="#"><i class="fa fa-google"></i> Google Settings</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/mqtt_homeassistant"><a href="#"><i class="fa fa-connectdevelop"></i> MQTT / Home Assistant</a><</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/backups"><a href="#"><i class="fa fa-server"></i> Backup/Restore</a><</router-link>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="header">ME</li>
|
||||
<router-link tag="li" class="pageLink" to="/tasks">
|
||||
<a>
|
||||
<i class="fa fa-tasks"></i>
|
||||
<span class="page">Tasks</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/setting">
|
||||
<a>
|
||||
<i class="fa fa-cog"></i>
|
||||
<span class="page">Settings</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<li class="treeview">
|
||||
<a href="#">
|
||||
<i class="fa fa-folder-o"></i>
|
||||
<span class="treeview-title">Files</span>
|
||||
<span class="pull-right-container pull-right">
|
||||
<i class="fa fa-angle-left fa-fw"></i>
|
||||
</span>
|
||||
</a>
|
||||
<ul class="treeview-menu">
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-file-word-o"></i> Item 1
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-file-picture-o"></i> Item 2
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<i class="fa fa-file-pdf-o"></i> Item 3
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="header">LOGS</li>
|
||||
<router-link tag="li" class="pageLink" to="/access">
|
||||
<a>
|
||||
<i class="fa fa-book"></i>
|
||||
<span class="page">Access</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/server">
|
||||
<a>
|
||||
<i class="fa fa-hdd-o"></i>
|
||||
<span class="page">Server</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<!-- <router-link tag="li" class="pageLink" to="/repos">
|
||||
<a>
|
||||
<i class="fa fa-heart"></i>
|
||||
<span class="page">Repos</span>
|
||||
<small class="label pull-right bg-green">AJAX</small>
|
||||
</a>
|
||||
</router-link> -->
|
||||
|
||||
<li class="header">PAGES</li>
|
||||
<router-link tag="li" class="pageLink" to="/login">
|
||||
<a>
|
||||
<i class="fa fa-circle-o text-yellow"></i>
|
||||
<span class="page"> Login</span>
|
||||
</a>
|
||||
</router-link>
|
||||
<router-link tag="li" class="pageLink" to="/404">
|
||||
<a>
|
||||
<i class="fa fa-circle-o text-red"></i>
|
||||
<span class="page"> 404</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<h1 class="text-center">Access</h1>
|
||||
<h4 class="text-center">Where our users are coming from.</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<!-- MAP & BOX PANE -->
|
||||
<div class="box box-success">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Visitors Report</h3>
|
||||
|
||||
<div class="box-tools pull-right">
|
||||
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body no-padding">
|
||||
<div class="row no-gutters">
|
||||
<div class="col-md-8">
|
||||
<!-- Map will be created here -->
|
||||
<div id="world-map-markers"></div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-4">
|
||||
<div class="pad box-pane-right bg-green" style="min-height: 400px">
|
||||
<div v-for="stat in stats" class="description-block margin-bottom">
|
||||
<div class="row" data-color="#fff"><i class="fa fa-bar-chart-o fa-3x"></i></div>
|
||||
<h5 class="description-header">{{stat.header}}</h5>
|
||||
<span class="description-text">{{stat.text}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
<link rel="stylesheet" href="/static/js/plugins/jvectormap/jquery-jvectormap-2.0.3.css" >
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import {stats} from '../../demo'
|
||||
|
||||
const pluginURL = '/static/js/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js'
|
||||
const mapURL = '/static/js/plugins/jvectormap/jquery-jvectormap-world-mill.js'
|
||||
|
||||
export default {
|
||||
name: 'Access',
|
||||
data () {
|
||||
return {
|
||||
stats
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
window.jQuery.getScript(pluginURL, () => {
|
||||
window.jQuery.getScript(mapURL, () => {
|
||||
window.jQuery('#world-map-markers').vectorMap({
|
||||
map: 'world_mill'
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fake {
|
||||
color: 'red';
|
||||
}
|
||||
|
||||
#world-map-markers svg {
|
||||
height: 355px;
|
||||
}
|
||||
|
||||
.row.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row.no-gutters > [class^="col-"],
|
||||
.row.no-gutters > [class*=" col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
@ -359,4 +359,33 @@ table.dataTable thead .sorting_desc:after {
|
||||
content: '\f0de';
|
||||
}
|
||||
|
||||
/* Content Division */
|
||||
.wrapper .content{
|
||||
background-color:#1e282c;
|
||||
color:#878787;
|
||||
}
|
||||
/* Heading */
|
||||
.wrapper .center-block {
|
||||
color:#878787;
|
||||
}
|
||||
/* Content header */
|
||||
.wrapper .content-header{
|
||||
background-color:#1e282c;
|
||||
color:#878787;
|
||||
}
|
||||
/* Box header */
|
||||
.content .col-xs-12 .box .box-header{
|
||||
background-color:#1e282c;
|
||||
border: none;
|
||||
}
|
||||
/* Content wrapper */
|
||||
#app .wrapper .content-wrapper{
|
||||
background-color:#1e282c;
|
||||
}
|
||||
/* Footer */
|
||||
#app .wrapper footer{
|
||||
background-color:#1e282c;
|
||||
border-style:none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,354 +0,0 @@
|
||||
<template>
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
|
||||
<!-- Info boxes -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-aqua"
|
||||
:icon-classes="['ion', 'ion-ios-gear-outline']"
|
||||
text="CPU Traffic"
|
||||
number="90%"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-red"
|
||||
:icon-classes="['fa', 'fa-google-plus']"
|
||||
text="Likes"
|
||||
number="41,410"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<!-- fix for small devices only -->
|
||||
<div class="clearfix visible-sm-block"></div>
|
||||
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-green"
|
||||
:icon-classes="['ion', 'ion-ios-cart-outline']"
|
||||
text="Sales"
|
||||
number="760"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-yellow"
|
||||
:icon-classes="['ion', 'ion-ios-people-outline']"
|
||||
text="New Members"
|
||||
number="2,000"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="row center-block">
|
||||
<h2>Data tables</h2>
|
||||
<div class="col-md-12">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<h3 class="box-title">Data Table With Full Features</h3>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
<div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div id="example1_length" class="dataTables_length">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 table-responsive">
|
||||
<table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
|
||||
<th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
|
||||
<th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
|
||||
<th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
|
||||
<th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Blink</td>
|
||||
<td>Iridium 54.0</td>
|
||||
<td>GNU/Linux</td>
|
||||
<td>54</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td>1.9</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td>1</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="1" rowspan="1">Rendering engine</th>
|
||||
<th colspan="1" rowspan="1">Browser</th>
|
||||
<th colspan="1" rowspan="1">Platform(s)</th>
|
||||
<th colspan="1" rowspan="1">Engine version</th>
|
||||
<th colspan="1" rowspan="1">CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<div class="col-xs-12">
|
||||
<div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title"></h3>
|
||||
<div class="box-body">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<p class="text-center">
|
||||
<strong>Web Traffic Overview</strong>
|
||||
</p>
|
||||
<canvas id="trafficBar" ></canvas>
|
||||
</div>
|
||||
<hr class="visible-xs-block">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<p class="text-center">
|
||||
<strong>Language Overview</strong>
|
||||
</p>
|
||||
<canvas id="languagePie"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="text-center">
|
||||
<small><b>Pro Tip</b> Don't forget to star us on github!</small>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- Main row -->
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-yellow"
|
||||
:icon-classes="['ion', 'ion-ios-pricetag-outline']"
|
||||
text="Inventory"
|
||||
number="5,200"
|
||||
:progress="50"
|
||||
description="50% increase since May"></process-info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-green"
|
||||
:icon-classes="['ion', 'ion-ios-heart-outline']"
|
||||
text="Mentions"
|
||||
number="92,050"
|
||||
:progress="20"
|
||||
description="20% increase in 30 days"></process-info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-red"
|
||||
:icon-classes="['ion', 'ion-ios-cloud-download-outline']"
|
||||
text="Downloads"
|
||||
number="114,381"
|
||||
:progress="70"
|
||||
description="70% increase since yesterday"></process-info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-aqua"
|
||||
:icon-classes="['ion', 'ion-ios-chatbubble-outline']"
|
||||
text="Direct Messages"
|
||||
number="163,921"
|
||||
:progress="40"
|
||||
description="40% increase compared to last year"></process-info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Chart from 'chart.js'
|
||||
import Alert from '../widgets/Alert'
|
||||
import InfoBox from '../widgets/InfoBox'
|
||||
import ProcessInfoBox from '../widgets/ProcessInfoBox'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
Alert,
|
||||
InfoBox,
|
||||
ProcessInfoBox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
generateRandomNumbers (numbers, max, min) {
|
||||
var a = []
|
||||
for (var i = 0; i < numbers; i++) {
|
||||
a.push(Math.floor(Math.random() * (max - min + 1)) + max)
|
||||
}
|
||||
return a
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
coPilotNumbers () {
|
||||
return this.generateRandomNumbers(12, 1000000, 10000)
|
||||
},
|
||||
personalNumbers () {
|
||||
return this.generateRandomNumbers(12, 1000000, 10000)
|
||||
},
|
||||
isMobile () {
|
||||
return (window.innerWidth <= 800 && window.innerHeight <= 600)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
var ctx = document.getElementById('trafficBar').getContext('2d')
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [{
|
||||
label: 'CoPilot',
|
||||
fill: false,
|
||||
borderColor: '#284184',
|
||||
pointBackgroundColor: '#284184',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
data: this.coPilotNumbers
|
||||
}, {
|
||||
label: 'Personal Site',
|
||||
borderColor: '#4BC0C0',
|
||||
pointBackgroundColor: '#4BC0C0',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
data: this.personalNumbers
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: !this.isMobile,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: true
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'label',
|
||||
xPadding: 10,
|
||||
yPadding: 10,
|
||||
bodySpacing: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new Chart(ctx, config) // eslint-disable-line no-new
|
||||
|
||||
var pieChartCanvas = document.getElementById('languagePie').getContext('2d')
|
||||
var pieConfig = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ['HTML', 'JavaScript', 'CSS'],
|
||||
datasets: [{
|
||||
data: [56.6, 37.7, 4.1],
|
||||
backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
|
||||
hoverBackgroundColor: ['#00a65a', '#f39c12', '#00c0ef']
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: !this.isMobile,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
display: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new Chart(pieChartCanvas, pieConfig) // eslint-disable-line no-new
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.info-box {
|
||||
cursor: pointer;
|
||||
}
|
||||
.info-box-content {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
display: inherit;
|
||||
}
|
||||
.fullCanvas {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
37
src/components/views/Expenses.vue
Normal file
37
src/components/views/Expenses.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
|
||||
<table class="table table-bordered table-responsive-md table-striped text-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center">Citation</th>
|
||||
<th class="text-center">Security</th>
|
||||
<th class="text-center">Implementation</th>
|
||||
<th class="text-center">Description</th>
|
||||
<th class="text-center">Solution</th>
|
||||
<th class="text-center">Remove</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="pt-3-half" contenteditable="false">Aurelia Vega</td>
|
||||
<td class="pt-3-half" contenteditable="false">30</td>
|
||||
<td class="pt-3-half" contenteditable="false">Deepends</td>
|
||||
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="spain" class="border-none"></td>
|
||||
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="marid" class="border-none"></td>
|
||||
<td>
|
||||
<span class="table-remove"><button type="button" class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -4,17 +4,17 @@
|
||||
|
||||
<!-- Info boxes -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-aqua"
|
||||
:icon-classes="['ion', 'ion-ios-gear-outline']"
|
||||
text="CPU Traffic"
|
||||
number="90%"></info-box>
|
||||
<info-box color-class="bg-green"
|
||||
:icon-classes="['ion', 'ion-cash']"
|
||||
text="Total Income"
|
||||
number="5868.26€"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-red"
|
||||
:icon-classes="['fa', 'fa-google-plus']"
|
||||
text="Likes"
|
||||
number="41,410"></info-box>
|
||||
:icon-classes="['ion', 'ion-ios-cart-outline']"
|
||||
text="Total Expenses"
|
||||
number="1854.54€"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
@ -22,17 +22,17 @@
|
||||
<div class="clearfix visible-sm-block"></div>
|
||||
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-green"
|
||||
:icon-classes="['ion', 'ion-ios-cart-outline']"
|
||||
text="Sales"
|
||||
number="760"></info-box>
|
||||
<info-box color-class="bg-aqua"
|
||||
:icon-classes="['ion', 'ion-card']"
|
||||
text="Total Saved"
|
||||
number="13580.21€"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<info-box color-class="bg-yellow"
|
||||
:icon-classes="['ion', 'ion-ios-people-outline']"
|
||||
text="New Members"
|
||||
number="2,000"></info-box>
|
||||
text="Members"
|
||||
number="2"></info-box>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
@ -46,66 +46,63 @@
|
||||
<div class="box-body">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<p class="text-center">
|
||||
<strong>Web Traffic Overview</strong>
|
||||
<strong>Income vs Expenses</strong>
|
||||
</p>
|
||||
<canvas id="trafficBar" ></canvas>
|
||||
<canvas id="iveBar" ></canvas>
|
||||
</div>
|
||||
<hr class="visible-xs-block">
|
||||
<div class="col-sm-6 col-xs-12">
|
||||
<p class="text-center">
|
||||
<strong>Language Overview</strong>
|
||||
<strong>Income</strong>
|
||||
</p>
|
||||
<canvas id="languagePie"></canvas>
|
||||
<canvas id="incomePie"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="text-center">
|
||||
<small><b>Pro Tip</b> Don't forget to star us on github!</small>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- Main row -->
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<!-- <div class="row"> -->
|
||||
<!-- <div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-yellow"
|
||||
:icon-classes="['ion', 'ion-ios-pricetag-outline']"
|
||||
text="Inventory"
|
||||
number="5,200"
|
||||
:progress="50"
|
||||
description="50% increase since May"></process-info-box>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<!-- <div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-green"
|
||||
:icon-classes="['ion', 'ion-ios-heart-outline']"
|
||||
text="Mentions"
|
||||
number="92,050"
|
||||
:progress="20"
|
||||
description="20% increase in 30 days"></process-info-box>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<!-- <div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-red"
|
||||
:icon-classes="['ion', 'ion-ios-cloud-download-outline']"
|
||||
text="Downloads"
|
||||
number="114,381"
|
||||
:progress="70"
|
||||
description="70% increase since yesterday"></process-info-box>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<!-- <div class="col-md-3 col-sm-6 col-xs-12">
|
||||
<process-info-box color-class="bg-aqua"
|
||||
:icon-classes="['ion', 'ion-ios-chatbubble-outline']"
|
||||
text="Direct Messages"
|
||||
number="163,921"
|
||||
:progress="40"
|
||||
description="40% increase compared to last year"></process-info-box>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- /.col -->
|
||||
<!-- </div> -->
|
||||
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
@ -148,23 +145,24 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
var ctx = document.getElementById('trafficBar').getContext('2d')
|
||||
var ctx = document.getElementById('iveBar').getContext('2d')
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [{
|
||||
label: 'CoPilot',
|
||||
label: 'Income',
|
||||
fill: false,
|
||||
borderColor: '#284184',
|
||||
pointBackgroundColor: '#284184',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
backgroundColor: '#284184',
|
||||
data: this.coPilotNumbers
|
||||
}, {
|
||||
label: 'Personal Site',
|
||||
label: 'Expenses',
|
||||
fill: false,
|
||||
borderColor: '#4BC0C0',
|
||||
pointBackgroundColor: '#4BC0C0',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
backgroundColor: '#4BC0C0',
|
||||
data: this.personalNumbers
|
||||
}]
|
||||
},
|
||||
@ -186,11 +184,11 @@ export default {
|
||||
|
||||
new Chart(ctx, config) // eslint-disable-line no-new
|
||||
|
||||
var pieChartCanvas = document.getElementById('languagePie').getContext('2d')
|
||||
var pieChartCanvas = document.getElementById('incomePie').getContext('2d')
|
||||
var pieConfig = {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ['HTML', 'JavaScript', 'CSS'],
|
||||
labels: ['Person1', 'Person2', 'Others'],
|
||||
datasets: [{
|
||||
data: [56.6, 37.7, 4.1],
|
||||
backgroundColor: ['#00a65a', '#f39c12', '#00c0ef'],
|
||||
|
||||
@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Repos</h1>
|
||||
<h4 class="text-center">Github Repos</h4>
|
||||
|
||||
<section class="content">
|
||||
<div class="row">
|
||||
<div v-if="error">
|
||||
Found an error
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="col-md-4" v-if="response" v-for="repo in response" >
|
||||
<div class="box box-widget widget-user">
|
||||
<div class="widget-user-header bg-aqua-active text-center">
|
||||
<h3 class="widget-user-username center-text">{{repo.name }}</h3>
|
||||
</div>
|
||||
<div class="widget-user-image">
|
||||
<img class="img-circle" v-bind:src="repo.owner.avatar_url" alt="repo.owner.login + ' Avatar'">
|
||||
</div>
|
||||
<div class="box-footer">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 border-right">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">{{repo.stargazers_count}}</h5>
|
||||
<span class="description-text">Star</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4 border-right">
|
||||
<div class="description-block">
|
||||
<a v-bind:href="repo.owner.html_url" target="_blank">
|
||||
<button type="button" class="btn btn-default btn-lg">Visit</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="description-block">
|
||||
<h5 class="description-header">{{repo.forks_count}}</h5>
|
||||
<span class="description-text">Forks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Repository',
|
||||
data () {
|
||||
return {
|
||||
githubUrl: 'https://api.github.com/search/repositories?q=language%3Ajavascript&sort=stars',
|
||||
response: null,
|
||||
error: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
callGitHub () {
|
||||
axios.get(this.githubUrl)
|
||||
.then(response => {
|
||||
console.log('GitHub Response:', response)
|
||||
|
||||
if (response.status !== 200) {
|
||||
this.error = response.statusText
|
||||
return
|
||||
}
|
||||
|
||||
this.response = response.data.items
|
||||
})
|
||||
.catch(error => {
|
||||
// Request failed.
|
||||
console.log('error', error.response)
|
||||
this.error = error.response.statusText
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.callGitHub()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Our Environment</h1>
|
||||
<section class="content">
|
||||
<div class="row" v-if="servers">
|
||||
<div class="col-md-4" v-for="server in servers">
|
||||
<div v-bind:class="'box box-' + server.status">
|
||||
<div class="box-header with-border">
|
||||
<i v-bind:class="'fa fa-' + server.icon + ' fa-2x'"></i>
|
||||
<h3 class="box-title">{{server.name}}</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
|
||||
<span>{{server.description}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {servers} from '../../demo'
|
||||
|
||||
export default {
|
||||
name: 'Servers',
|
||||
data () {
|
||||
return {
|
||||
servers
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
125
src/components/views/Settings_Configurations.vue
Normal file
125
src/components/views/Settings_Configurations.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Settings</h1>
|
||||
<section class="content">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box box-info">
|
||||
<!-- Input Addons -->
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Inputs</h3>
|
||||
</div>
|
||||
|
||||
<div class="box-body">
|
||||
<!-- calendar group -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-calendar"></i>
|
||||
</span>
|
||||
<datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<!-- with characthers -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-at" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" placeholder="Username" type="text">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-usd" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<!-- with icons from font awesome -->
|
||||
<h4>With icons</h4>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
|
||||
<input class="form-control" placeholder="Email" type="email">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Success/Error heads up input -->
|
||||
<h4>With border indicator</h4>
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
|
||||
<input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with success</span>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group has-error">
|
||||
<label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
|
||||
<input class="form-control" id="inputError" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with error</span>
|
||||
</div>
|
||||
|
||||
<!-- select examples -->
|
||||
<h4>Select Options</h4>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group">
|
||||
<label>Select Multiple</label>
|
||||
<select multiple="" class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- /input-group -->
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
require('moment')
|
||||
import datepicker from 'vue-date-picker'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: { datepicker },
|
||||
computed: {
|
||||
datetime () {
|
||||
return new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearInput (vueModel) {
|
||||
vueModel = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.datetime-picker input {
|
||||
height: 4em !important;
|
||||
}
|
||||
</style>
|
||||
125
src/components/views/Settings_Google.vue
Normal file
125
src/components/views/Settings_Google.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Settings</h1>
|
||||
<section class="content">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box box-info">
|
||||
<!-- Input Addons -->
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Inputs</h3>
|
||||
</div>
|
||||
|
||||
<div class="box-body">
|
||||
<!-- calendar group -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-calendar"></i>
|
||||
</span>
|
||||
<datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<!-- with characthers -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-at" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" placeholder="Username" type="text">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-usd" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<!-- with icons from font awesome -->
|
||||
<h4>With icons</h4>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
|
||||
<input class="form-control" placeholder="Email" type="email">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Success/Error heads up input -->
|
||||
<h4>With border indicator</h4>
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
|
||||
<input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with success</span>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group has-error">
|
||||
<label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
|
||||
<input class="form-control" id="inputError" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with error</span>
|
||||
</div>
|
||||
|
||||
<!-- select examples -->
|
||||
<h4>Select Options</h4>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group">
|
||||
<label>Select Multiple</label>
|
||||
<select multiple="" class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- /input-group -->
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
require('moment')
|
||||
import datepicker from 'vue-date-picker'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: { datepicker },
|
||||
computed: {
|
||||
datetime () {
|
||||
return new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearInput (vueModel) {
|
||||
vueModel = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.datetime-picker input {
|
||||
height: 4em !important;
|
||||
}
|
||||
</style>
|
||||
125
src/components/views/Settings_MQTT_HA.vue
Normal file
125
src/components/views/Settings_MQTT_HA.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Settings</h1>
|
||||
<section class="content">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box box-info">
|
||||
<!-- Input Addons -->
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Inputs</h3>
|
||||
</div>
|
||||
|
||||
<div class="box-body">
|
||||
<!-- calendar group -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-calendar"></i>
|
||||
</span>
|
||||
<datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<!-- with characthers -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-at" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" placeholder="Username" type="text">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-usd" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<!-- with icons from font awesome -->
|
||||
<h4>With icons</h4>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
|
||||
<input class="form-control" placeholder="Email" type="email">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Success/Error heads up input -->
|
||||
<h4>With border indicator</h4>
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
|
||||
<input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with success</span>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group has-error">
|
||||
<label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
|
||||
<input class="form-control" id="inputError" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with error</span>
|
||||
</div>
|
||||
|
||||
<!-- select examples -->
|
||||
<h4>Select Options</h4>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group">
|
||||
<label>Select Multiple</label>
|
||||
<select multiple="" class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- /input-group -->
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
require('moment')
|
||||
import datepicker from 'vue-date-picker'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: { datepicker },
|
||||
computed: {
|
||||
datetime () {
|
||||
return new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearInput (vueModel) {
|
||||
vueModel = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.datetime-picker input {
|
||||
height: 4em !important;
|
||||
}
|
||||
</style>
|
||||
125
src/components/views/Settings_User.vue
Normal file
125
src/components/views/Settings_User.vue
Normal file
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-center">Settings</h1>
|
||||
<section class="content">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="box box-info">
|
||||
<!-- Input Addons -->
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Inputs</h3>
|
||||
</div>
|
||||
|
||||
<div class="box-body">
|
||||
<!-- calendar group -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-calendar"></i>
|
||||
</span>
|
||||
<datepicker :readonly="true" format="MMM/D/YYYY" id="dateInput" width="100%"></datepicker>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<!-- with characthers -->
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-at" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" placeholder="Username" type="text">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<i class="fa fa-fw fa-usd" aria-hidden="true"></i>
|
||||
</span>
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<!-- with icons from font awesome -->
|
||||
<h4>With icons</h4>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-envelope"></i></span>
|
||||
<input class="form-control" placeholder="Email" type="email">
|
||||
</div>
|
||||
<br />
|
||||
<div class="input-group">
|
||||
<input class="form-control" type="text">
|
||||
<span class="input-group-addon"><i class="fa fa-fw fa-check"></i></span>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<!-- Success/Error heads up input -->
|
||||
<h4>With border indicator</h4>
|
||||
<div class="form-group has-success">
|
||||
<label class="control-label" for="inputSuccess"><i class="fa fa-fw fa-check"></i> Input with success</label>
|
||||
<input class="form-control" id="inputSuccess" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with success</span>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group has-error">
|
||||
<label class="control-label" for="inputError"><i class="fa fa-fw fa-times-circle-o"></i> Input with error</label>
|
||||
<input class="form-control" id="inputError" placeholder="Enter ..." type="text">
|
||||
<span class="help-block">Help block with error</span>
|
||||
</div>
|
||||
|
||||
<!-- select examples -->
|
||||
<h4>Select Options</h4>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
<br />
|
||||
<div class="form-group">
|
||||
<label>Select Multiple</label>
|
||||
<select multiple="" class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- /input-group -->
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
require('moment')
|
||||
import datepicker from 'vue-date-picker'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
components: { datepicker },
|
||||
computed: {
|
||||
datetime () {
|
||||
return new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearInput (vueModel) {
|
||||
vueModel = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.datetime-picker input {
|
||||
height: 4em !important;
|
||||
}
|
||||
</style>
|
||||
130
src/components/views/Sthope.vue
Normal file
130
src/components/views/Sthope.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<!-- Sthope Trading Cryptos View START -->
|
||||
<div class="col-md-4 col-sm-6 col-xs-12">
|
||||
<h2 id="trading_cryptos">Trading Cryptos</h2>
|
||||
<form action="/trade_cryptos.php">
|
||||
<label for="cname"> Crypto: </label>
|
||||
<input type="text" id="trading" name="cname" value=""><br>
|
||||
|
||||
<label for="aname"> Amount: </label>
|
||||
<input type="text" id="trading" name="aname" value=""><br>
|
||||
|
||||
<label for="ename"> € Paid: </label>
|
||||
<input type="text" id="trading" name="ename" value=""><br>
|
||||
|
||||
<label for="dname"> Date: </label>
|
||||
<input type="date" id="trading" name="dname" value=""><br>
|
||||
|
||||
<label for="buyorsellselect"> Buy or Sell (select for Sell): </label>
|
||||
<input type="checkbox" id="trading" name="buyorsell" value="BUY"><br>
|
||||
|
||||
<button type="button" class="btn btn-danger" id="buyorsell_button"> Cancel</button>
|
||||
<button type="button" class="btn btn-success" id="buyorsell_button"> Buy</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Sthope Trading Cryptos Window END -->
|
||||
<!-- Sthope DCA Calculator Window START -->
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
<h2 id="dca_calculator"> DCA Calculator</h2>
|
||||
<form action="/check_best_dca.php">
|
||||
<label for="cname"> How much € spend: </label>
|
||||
<input type="number" id="trading" name="howmuchtospend" value="">
|
||||
|
||||
<button type="button" class="btn btn-success" id="howmuchtospend_button"> Check</button>
|
||||
</form>
|
||||
|
||||
<form action="/add_dca_to_wallet.php">
|
||||
<label for="cname"> Best Crypto: </label><input type="text" id="trading" name="howmuchtospend" value=""><br>
|
||||
<label for="cname"> Crypto Price: </label><input type="number" id="trading" name="howmuchtospend" value=""><br>
|
||||
<label for="cname"> Buying Amount: </label><input type="number" id="trading" name="howmuchtospend" value=""><br>
|
||||
<label for="cname"> Buying Average: </label><input type="number" id="trading" name="howmuchtospend" value=""><br>
|
||||
<label for="cname"> New Average: </label><input type="number" id="trading" name="howmuchtospend" value=""><br>
|
||||
<button type="button" class="btn btn-success" id="buyorsell_button"> Buy</button>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Sthope DCA Calculator Window END -->
|
||||
<!-- Sthope Salary Calculator View START -->
|
||||
<div class="col-md-4 col-sm-6 col-xs-12">
|
||||
|
||||
<h2 id="cryptos_salary_calculator">Salary Calculator</h2>
|
||||
|
||||
<form action="/calculate_crypto_salary.php">
|
||||
|
||||
<label for="cname"> Crypto: </label>
|
||||
<input type="text" id="trading" name="cname" value=""><br>
|
||||
|
||||
<label for="aname"> Amount: </label>
|
||||
<input type="text" id="trading" name="aname" value=""><br>
|
||||
|
||||
<label for="ename"> € Paid: </label>
|
||||
<input type="text" id="trading" name="ename" value=""><br>
|
||||
|
||||
<label for="dname"> Date: </label>
|
||||
<input type="date" id="trading" name="dname" value=""><br>
|
||||
|
||||
<label for="buyorsellselect"> Buy or Sell (select for Sell): </label>
|
||||
<input type="checkbox" id="trading" name="buyorsell" value="BUY"><br>
|
||||
|
||||
<button type="button" class="btn btn-success" id="calculate_button"> Calculate</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- Sthope Salary Calculator Window END -->
|
||||
<!-- Sthope Compound Interest Calculator View START -->
|
||||
<div class="col-md-6 col-sm-6 col-xs-12">
|
||||
|
||||
<h2 id="cryptos_salary_calculator">Compound Interest Calculator</h2>
|
||||
|
||||
<form action="/calculate_crypto_salary.php">
|
||||
|
||||
<label for="cname"> Crypto: </label>
|
||||
<input type="text" id="trading" name="cname" value=""><br>
|
||||
|
||||
<label for="aname"> Amount: </label>
|
||||
<input type="text" id="trading" name="aname" value=""><br>
|
||||
|
||||
<label for="ename"> € Paid: </label>
|
||||
<input type="text" id="trading" name="ename" value=""><br>
|
||||
|
||||
<label for="dname"> Date: </label>
|
||||
<input type="date" id="trading" name="dname" value=""><br>
|
||||
|
||||
<label for="buyorsellselect"> Buy or Sell (select for Sell): </label>
|
||||
<input type="checkbox" id="trading" name="buyorsell" value="BUY"><br>
|
||||
|
||||
<button type="button" class="btn btn-success" id="calculate_button"> Calculate</button>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<!-- Sthope Compound Interest Window END -->
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Body */
|
||||
body{
|
||||
text-align:center;
|
||||
background-color:#1e282c;
|
||||
color: gray
|
||||
}
|
||||
|
||||
/* Fname */
|
||||
#trading{
|
||||
background-color:#686868;
|
||||
}
|
||||
/* Import Google Fonts */
|
||||
@import url("//fonts.googleapis.com/css2?family=Andika:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
|
||||
|
||||
/* Button */
|
||||
#buyorsell_button{
|
||||
width:125px;
|
||||
height:40px;
|
||||
font-size:20px;
|
||||
font-family:'Andika', sans-serif;
|
||||
font-weight:700;
|
||||
}
|
||||
</style>
|
||||
@ -1,239 +0,0 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="row center-block">
|
||||
<h2>Simple</h2>
|
||||
<div class="col-md-12">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<h3 class="box-title">Striped Full Width Table</h3>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body no-padding table-responsive">
|
||||
<table class="table table-striped">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td><div class="progress progress-xs"><div class="progress-bar progress-bar-danger" style="width: 55%"></div></div></td>
|
||||
<td><span class="badge bg-red">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-yellow">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-light-blue">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-green">90%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row center-block">
|
||||
<h2>Data tables</h2>
|
||||
<div class="col-md-12">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<h3 class="box-title">Data Table With Full Features</h3>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
<div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div id="example1_length" class="dataTables_length">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 table-responsive">
|
||||
<table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 167px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">Rendering engine</th>
|
||||
<th aria-label="Browser: activate to sort column ascending" style="width: 207px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Browser</th>
|
||||
<th aria-label="Platform(s): activate to sort column ascending" style="width: 182px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Platform(s)</th>
|
||||
<th aria-label="Engine version: activate to sort column ascending" style="width: 142px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">Engine version</th>
|
||||
<th aria-label="CSS grade: activate to sort column ascending" style="width: 101px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">CSS grade</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Blink</td>
|
||||
<td>Iridium 54.0</td>
|
||||
<td>GNU/Linux</td>
|
||||
<td>54</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 1.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 1.5</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 2.0</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Firefox 3.0</td>
|
||||
<td>Win 2k+ / OSX.3+</td>
|
||||
<td>1.9</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Camino 1.0</td>
|
||||
<td>OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Camino 1.5</td>
|
||||
<td>OSX.3+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape 7.2</td>
|
||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape Browser 8</td>
|
||||
<td>Win 98SE+</td>
|
||||
<td>1.7</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="odd" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Netscape Navigator 9</td>
|
||||
<td>Win 98+ / OSX.2+</td>
|
||||
<td>1.8</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
<tr class="even" role="row">
|
||||
<td class="sorting_1">Gecko</td>
|
||||
<td>Mozilla 1.0</td>
|
||||
<td>Win 95+ / OSX.1+</td>
|
||||
<td>1</td>
|
||||
<td>A</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="1" rowspan="1">Rendering engine</th>
|
||||
<th colspan="1" rowspan="1">Browser</th>
|
||||
<th colspan="1" rowspan="1">Platform(s)</th>
|
||||
<th colspan="1" rowspan="1">Engine version</th>
|
||||
<th colspan="1" rowspan="1">CSS grade</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
// Require needed datatables modules
|
||||
require('datatables.net')
|
||||
require('datatables.net-bs')
|
||||
|
||||
export default {
|
||||
name: 'Tables',
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
$('#example1').DataTable()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Using the bootstrap style, but overriding the font to not draw in
|
||||
the Glyphicons Halflings font as an additional requirement for sorting icons.
|
||||
|
||||
An alternative to the solution active below is to use the jquery style
|
||||
which uses images, but the color on the images does not match adminlte.
|
||||
|
||||
@import url('/static/js/plugins/datatables/jquery.dataTables.min.css');
|
||||
*/
|
||||
|
||||
@import url('/static/js/plugins/datatables/dataTables.bootstrap.css');
|
||||
|
||||
table.dataTable thead .sorting:after,
|
||||
table.dataTable thead .sorting_asc:after,
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
font-family: 'FontAwesome';
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting:after {
|
||||
content: '\f0dc';
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting_asc:after {
|
||||
content: '\f0dd';
|
||||
}
|
||||
|
||||
table.dataTable thead .sorting_desc:after {
|
||||
content: '\f0de';
|
||||
}
|
||||
</style>
|
||||
@ -1,50 +0,0 @@
|
||||
<template>
|
||||
<section class="content">
|
||||
<div class="row center-block">
|
||||
<h1 class="text-center">Tasks</h1>
|
||||
<ul class="timeline">
|
||||
<!-- timeline time label -->
|
||||
<li class="time-label">
|
||||
<span class="bg-green">{{today}}</span>
|
||||
</li>
|
||||
<!-- timeline item -->
|
||||
<li v-for="line in timeline">
|
||||
<!-- timeline icon -->
|
||||
<i v-bind:class="'fa ' + line.icon + ' bg-' + line.color"></i>
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa fa-clock-o"></i> {{line.time}}</span>
|
||||
<h3 class="timeline-header">{{line.title}}</h3>
|
||||
<div class="timeline-body" v-if="line.body" v-html="line.body">
|
||||
</div>
|
||||
<div class="timeline-footer" v-if="line.buttons">
|
||||
<a v-for="btn in line.buttons" v-bind:class="'btn btn-' + btn.type + ' btn-xs'" v-bind:href="btn.href" v-bind:target="btn.target">{{btn.message}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- END timeline item -->
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import {timeline} from '../../demo'
|
||||
|
||||
export default {
|
||||
name: 'Tasks',
|
||||
computed: {
|
||||
today () {
|
||||
return moment().format('MMM Do YY')
|
||||
},
|
||||
timeline () {
|
||||
return timeline
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.timeline-footer a.btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +1,24 @@
|
||||
import DashView from './components/Dash.vue'
|
||||
import LoginView from './components/Login.vue'
|
||||
// import LoginView from './components/Login.vue'
|
||||
import NotFoundView from './components/404.vue'
|
||||
|
||||
// Import Views - Dash
|
||||
import DashboardView from './components/views/Dashboard.vue'
|
||||
import TablesView from './components/views/Tables.vue'
|
||||
import TasksView from './components/views/Tasks.vue'
|
||||
import SettingView from './components/views/Setting.vue'
|
||||
import AccessView from './components/views/Access.vue'
|
||||
import ServerView from './components/views/Server.vue'
|
||||
// Sthope Views
|
||||
import CryptosView from './components/views/Cryptos.vue'
|
||||
import PersonalFinancesView from './components/views/PersonalFinances.vue'
|
||||
import ExpensesView from './components/views/Expenses.vue'
|
||||
|
||||
// Sthope Settings Views
|
||||
import SettingsBackupView from './components/views/Settings_Backup.vue'
|
||||
import SettingsConfigurationsView from './components/views/Settings_Configurations.vue'
|
||||
import SettingsGoogleView from './components/views/Settings_Google.vue'
|
||||
import SettingsMQTTHAView from './components/views/Settings_MQTT_HA.vue'
|
||||
import SettingsUserView from './components/views/Settings_User.vue'
|
||||
// Sthope Testing Tab
|
||||
import SthopeView from './components/views/Sthope.vue'
|
||||
|
||||
// Routes
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
component: LoginView
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: DashView,
|
||||
@ -27,44 +28,52 @@ const routes = [
|
||||
alias: '',
|
||||
component: PersonalFinancesView,
|
||||
name: 'Personal Finances',
|
||||
meta: {description: 'Overview of environment'}
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
alias: '',
|
||||
component: DashboardView,
|
||||
name: 'Dashboard',
|
||||
meta: {description: 'Overview of environment'}
|
||||
}, {
|
||||
path: 'tables',
|
||||
component: TablesView,
|
||||
name: 'Tables',
|
||||
meta: {description: 'Simple and advance table in CoPilot'}
|
||||
}, {
|
||||
path: 'tasks',
|
||||
component: TasksView,
|
||||
name: 'Tasks',
|
||||
meta: {description: 'Tasks page in the form of a timeline'}
|
||||
}, {
|
||||
path: 'setting',
|
||||
component: SettingView,
|
||||
name: 'Settings',
|
||||
meta: {description: 'User settings page'}
|
||||
}, {
|
||||
path: 'access',
|
||||
component: AccessView,
|
||||
name: 'Access',
|
||||
meta: {description: 'Example of using maps'}
|
||||
}, {
|
||||
path: 'server',
|
||||
component: ServerView,
|
||||
name: 'Servers',
|
||||
meta: {description: 'List of our servers', requiresAuth: true}
|
||||
meta: {description: ''}
|
||||
}, {
|
||||
path: 'cryptos',
|
||||
component: CryptosView,
|
||||
name: 'Cryptos',
|
||||
meta: {description: 'List of popular javascript repos'}
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'configurations',
|
||||
component: SettingsBackupView,
|
||||
name: 'Configurations',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'configurations',
|
||||
component: SettingsConfigurationsView,
|
||||
name: 'Configurations',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'google_settings',
|
||||
component: SettingsGoogleView,
|
||||
name: 'Google Settings',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'mqtt_homeassistant',
|
||||
component: SettingsMQTTHAView,
|
||||
name: 'MQTT / HomeAssistant',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'user_configs',
|
||||
component: SettingsUserView,
|
||||
name: 'User Configs',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'backups',
|
||||
component: SettingsUserView,
|
||||
name: 'Backups',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'sthope',
|
||||
component: SthopeView,
|
||||
name: 'Sthope',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}, {
|
||||
path: 'expenses',
|
||||
component: ExpensesView,
|
||||
name: 'Expenses',
|
||||
meta: {description: '', requiresAuth: false}
|
||||
}
|
||||
]
|
||||
}, {
|
||||
|
||||
2
static/css/skin-blue.min.css
vendored
2
static/css/skin-blue.min.css
vendored
@ -1 +1 @@
|
||||
.skin-blue .main-header .navbar{background-color:#3c8dbc}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus,.skin-blue .main-header .navbar .nav>.active>a{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue .main-header .logo{background-color:#367fa9;color:#fff;border-bottom:0 solid transparent}.skin-blue .main-header .logo:hover{background-color:#357ca5}.skin-blue .main-header li.user-header{background-color:#3c8dbc}.skin-blue .content-header{background:transparent}.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side{background-color:#222d32}.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#fff}.skin-blue .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent}.skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#3c8dbc}.skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .treeview-menu>li>a{color:#8aa4af}.skin-blue .treeview-menu>li.active>a,.skin-blue .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-blue .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:2px}.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form .btn{color:#999;border-top-left-radius:0;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:0}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#3b8ab8}
|
||||
.skin-blue .main-header .navbar{background-color:#1e282c}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus,.skin-blue .main-header .navbar .nav>.active>a{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color:#1e282c}@media (max-width:767px){.skin-blue .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue .main-header .navbar .dropdown-menu li a:hover{background:#1e282c}}.skin-blue .main-header .logo{background-color:#1e282c;color:#fff;border-bottom:0 solid transparent}.skin-blue .main-header .logo:hover{background-color:#357ca5}.skin-blue .main-header li.user-header{background-color:#686868}.skin-blue .content-header{background:transparent}.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side{background-color:#222d32}.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#fff}.skin-blue .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent}.skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#686868}.skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .treeview-menu>li>a{color:#8aa4af}.skin-blue .treeview-menu>li.active>a,.skin-blue .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-blue .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:2px}.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form .btn{color:#999;border-top-left-radius:0;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:0}.skin-blue.layout-top-nav .main-header>.logo{background-color:#686868;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#1e282c}
|
||||
|
||||
1
static/css/skin-cpha-dark.min.css
vendored
Normal file
1
static/css/skin-cpha-dark.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.skin-blue .main-header .navbar{background-color:#1e282c}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus,.skin-blue .main-header .navbar .nav>.active>a{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color:#1e282c}@media (max-width:767px){.skin-blue .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue .main-header .navbar .dropdown-menu li a:hover{background:#1e282c}}.skin-blue .main-header .logo{background-color:#1e282c;color:#fff;border-bottom:0 solid transparent}.skin-blue .main-header .logo:hover{background-color:#357ca5}.skin-blue .main-header li.user-header{background-color:#686868}.skin-blue .content-header{background:transparent}.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side{background-color:#222d32}.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#fff}.skin-blue .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent}.skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#686868}.skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .treeview-menu>li>a{color:#8aa4af}.skin-blue .treeview-menu>li.active>a,.skin-blue .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-blue .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:2px}.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form .btn{color:#999;border-top-left-radius:0;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:0}.skin-blue.layout-top-nav .main-header>.logo{background-color:#686868;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#1e282c}
|
||||
BIN
static/img/Screenshot1.png
Normal file
BIN
static/img/Screenshot1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
static/img/Screenshot2.png
Normal file
BIN
static/img/Screenshot2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
static/img/Screenshot3.png
Normal file
BIN
static/img/Screenshot3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
@ -1 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 170 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Layer.-1"><path d="M82.574,102.829l-44.006,25.533l17.688,-40.831l26.318,15.298Zm6.347,-70.93l41.688,96.463l-73.569,-42.757l23.216,-53.706c1.45,-1.426 2.888,-2.021 4.315,-1.783c1.45,-0.261 2.9,0.333 4.35,1.783" style="fill:#fff;stroke:#fff;stroke-width:0.75px;"/><path d="M138.669,30.794c14.906,14.906 22.36,32.879 22.36,53.919c0,21.064 -7.454,39.049 -22.36,53.956c-14.906,14.905 -32.891,22.359 -53.955,22.359c-21.04,0 -39.014,-7.454 -53.92,-22.359c-14.906,-14.907 -22.359,-32.892 -22.359,-53.956c0,-21.04 7.453,-39.013 22.359,-53.919c14.906,-14.906 32.88,-22.359 53.92,-22.359c21.064,0 39.049,7.453 53.955,22.359l0,0Z" style="fill:none;stroke:#fff;stroke-width:8.56px;stroke-linecap:round;stroke-miterlimit:3;"/></g></svg>
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="150.000000pt" height="150.000000pt" viewBox="0 0 150.000000 150.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 438 B |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
BIN
static/img/favicon.png
Normal file
BIN
static/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>AutoFill example - Column options</title>
|
||||
@ -641,4 +641,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>AutoFill example - Complete callback</title>
|
||||
@ -27,7 +27,7 @@ $(document).ready(function() {
|
||||
new $.fn.dataTable.AutoFill( table, {
|
||||
complete: function ( altered ) {
|
||||
var last = altered[ altered.length-1 ];
|
||||
alert(
|
||||
alert(
|
||||
altered.length+' cells were altered in this auto-fill. The '+
|
||||
'value of the last cell altered was: '+last.oldValue+' and is '+
|
||||
'now '+last.newValue
|
||||
@ -555,7 +555,7 @@ $(document).ready(function() {
|
||||
new $.fn.dataTable.AutoFill( table, {
|
||||
complete: function ( altered ) {
|
||||
var last = altered[ altered.length-1 ];
|
||||
alert(
|
||||
alert(
|
||||
altered.length+' cells were altered in this auto-fill. The '+
|
||||
'value of the last cell altered was: '+last.oldValue+' and is '+
|
||||
'now '+last.newValue
|
||||
@ -649,4 +649,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>AutoFill example - Horizontal and vertical fill</title>
|
||||
@ -638,4 +638,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>AutoFill example - Horizontal fill</title>
|
||||
@ -638,4 +638,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
@ -63,4 +63,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>AutoFill example - Scrolling DataTable</title>
|
||||
@ -635,4 +635,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>AutoFill example - Basic initialisation</title>
|
||||
@ -628,4 +628,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>AutoFill example - Step callback</title>
|
||||
@ -657,4 +657,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Alternative insert styling</title>
|
||||
@ -634,4 +634,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Individual column filtering</title>
|
||||
@ -27,12 +27,12 @@ $(document).ready(function() {
|
||||
var title = $('#example thead th').eq( $(this).index() ).text();
|
||||
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
|
||||
} );
|
||||
|
||||
|
||||
// DataTable
|
||||
var table = $('#example').DataTable( {
|
||||
dom: 'Rlfrtip'
|
||||
} );
|
||||
|
||||
|
||||
// Apply the filter
|
||||
$("#example tfoot input").on( 'keyup change', function () {
|
||||
table
|
||||
@ -556,12 +556,12 @@ $(document).ready(function() {
|
||||
var title = $('#example thead th').eq( $(this).index() ).text();
|
||||
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
|
||||
} );
|
||||
|
||||
|
||||
// DataTable
|
||||
var table = $('#example').DataTable( {
|
||||
dom: 'Rlfrtip'
|
||||
} );
|
||||
|
||||
|
||||
// Apply the filter
|
||||
$("#example tfoot input").on( 'keyup change', function () {
|
||||
table
|
||||
@ -653,4 +653,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - ColVis integration</title>
|
||||
@ -632,4 +632,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - FixedColumns integration</title>
|
||||
@ -828,4 +828,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - FixedHeader integration</title>
|
||||
@ -632,4 +632,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
@ -71,4 +71,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - jQuery UI styling</title>
|
||||
@ -632,4 +632,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Initialisation using `new`</title>
|
||||
@ -623,4 +623,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Predefined column ordering</title>
|
||||
@ -633,4 +633,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Realtime updating</title>
|
||||
@ -634,4 +634,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Reset ordering API</title>
|
||||
@ -29,10 +29,10 @@ $(document).ready(function() {
|
||||
order: [ 4, 3, 2, 1, 0 ]
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
$('#reset').click( function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
table.colReorder.reset();
|
||||
} );
|
||||
} );
|
||||
@ -556,10 +556,10 @@ $(document).ready(function() {
|
||||
order: [ 4, 3, 2, 1, 0 ]
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
$('#reset').click( function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
table.colReorder.reset();
|
||||
} );
|
||||
} );</code>
|
||||
@ -646,4 +646,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Scrolling table</title>
|
||||
@ -629,4 +629,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Server-side processing</title>
|
||||
@ -189,4 +189,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - Basic initialisation</title>
|
||||
@ -627,4 +627,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColReorder example - State saving</title>
|
||||
@ -628,4 +628,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Button ordering</title>
|
||||
@ -627,4 +627,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Exclude columns from list</title>
|
||||
@ -629,4 +629,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Group columns</title>
|
||||
@ -653,4 +653,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
@ -69,4 +69,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - jQuery UI styling</title>
|
||||
@ -634,4 +634,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Mouseover activation</title>
|
||||
@ -629,4 +629,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - `new` initialisation</title>
|
||||
@ -626,4 +626,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Restore / show all</title>
|
||||
@ -638,4 +638,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Basic initialisation</title>
|
||||
@ -624,4 +624,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Custom button text</title>
|
||||
@ -628,4 +628,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Column button callback</title>
|
||||
@ -633,4 +633,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Two tables with individual controls</title>
|
||||
@ -336,4 +336,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>ColVis example - Two tables with shared controls</title>
|
||||
@ -360,4 +360,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Bootstrap</title>
|
||||
@ -816,4 +816,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Individual column filtering</title>
|
||||
@ -34,7 +34,7 @@ $(document).ready(function() {
|
||||
var title = $('#example thead th').eq( $(this).index() ).text();
|
||||
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
|
||||
} );
|
||||
|
||||
|
||||
// DataTable
|
||||
var table = $('#example').DataTable( {
|
||||
scrollY: "300px",
|
||||
@ -42,7 +42,7 @@ $(document).ready(function() {
|
||||
scrollCollapse: true,
|
||||
paging: false
|
||||
} );
|
||||
|
||||
|
||||
// Apply the filter
|
||||
table.columns().indexes().each( function (idx) {
|
||||
$( 'input', table.column( idx ).footer() ).on( 'keyup change', function () {
|
||||
@ -746,7 +746,7 @@ $(document).ready(function() {
|
||||
var title = $('#example thead th').eq( $(this).index() ).text();
|
||||
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
|
||||
} );
|
||||
|
||||
|
||||
// DataTable
|
||||
var table = $('#example').DataTable( {
|
||||
scrollY: "300px",
|
||||
@ -754,7 +754,7 @@ $(document).ready(function() {
|
||||
scrollCollapse: true,
|
||||
paging: false
|
||||
} );
|
||||
|
||||
|
||||
// Apply the filter
|
||||
table.columns().indexes().each( function (idx) {
|
||||
$( 'input', table.column( idx ).footer() ).on( 'keyup change', function () {
|
||||
@ -854,4 +854,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - ColVis integration</title>
|
||||
@ -830,4 +830,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - CSS row sizing</title>
|
||||
@ -825,4 +825,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
@ -71,4 +71,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Index column</title>
|
||||
@ -929,4 +929,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Left and right fixed columns</title>
|
||||
@ -813,4 +813,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Right column only</title>
|
||||
@ -813,4 +813,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Complex headers</title>
|
||||
@ -654,4 +654,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Server-side processing</title>
|
||||
@ -201,4 +201,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Basic initialisation</title>
|
||||
@ -810,4 +810,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Assigned column width</title>
|
||||
@ -821,4 +821,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Fluid column width</title>
|
||||
@ -821,4 +821,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedColumns example - Multiple fixed columns</title>
|
||||
@ -807,4 +807,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedHeader example - Header and footer fixed</title>
|
||||
@ -638,4 +638,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
@ -66,4 +66,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedHeader example - Basic initialisation</title>
|
||||
@ -634,4 +634,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedHeader example - Header, left and right all fixed</title>
|
||||
@ -233,4 +233,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedHeader example - Multiple tables</title>
|
||||
@ -351,4 +351,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>FixedHeader example - z-index order control</title>
|
||||
@ -650,4 +650,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>KeyTable example - Events</title>
|
||||
@ -35,37 +35,37 @@ $(document).ready(function() {
|
||||
keys.event.focus( 4, null, function( node, x, y ) {
|
||||
eventMsg( "Cell "+x+","+y+" focused ('live' event - column)" );
|
||||
} );
|
||||
|
||||
|
||||
/* Focus handler for all cells in 8th row */
|
||||
keys.event.focus( null, 7, function( node, x, y ) {
|
||||
eventMsg( "Cell "+x+","+y+" focused ('live' event - row)" );
|
||||
} );
|
||||
|
||||
|
||||
/* Focus using coords. */
|
||||
keys.event.focus( 1, 0, function( node ) {
|
||||
keys.event.remove.focus( node );
|
||||
eventMsg( "Cell 1,0 focus - this event has now been removed" );
|
||||
} );
|
||||
|
||||
|
||||
keys.event.focus( 1, 3, function() {
|
||||
eventMsg( "Cell 1,3 focus" );
|
||||
} );
|
||||
|
||||
|
||||
/* focus with a node */
|
||||
keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
|
||||
eventMsg( "Cell 0,2 focus" );
|
||||
} );
|
||||
|
||||
|
||||
/* Blur using a node */
|
||||
keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {
|
||||
eventMsg( "Cell 1,2 blur" );
|
||||
} );
|
||||
|
||||
|
||||
/* Blur using coords */
|
||||
keys.event.blur( 2, 4, function() {
|
||||
eventMsg( "Cell 2,4 blur" );
|
||||
} );
|
||||
|
||||
|
||||
/* Action */
|
||||
keys.event.action( 2, 2, function( node ) {
|
||||
eventMsg( "Cell 2,2 action" );
|
||||
@ -76,7 +76,7 @@ $(document).ready(function() {
|
||||
node.style.fontWeight = "normal";
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
keys.event.action( 2, 5, function( node ) {
|
||||
eventMsg( "Cell 2,5 action" );
|
||||
if ( node.style.fontStyle == "" ) {
|
||||
@ -618,37 +618,37 @@ $(document).ready(function() {
|
||||
keys.event.focus( 4, null, function( node, x, y ) {
|
||||
eventMsg( "Cell "+x+","+y+" focused ('live' event - column)" );
|
||||
} );
|
||||
|
||||
|
||||
/* Focus handler for all cells in 8th row */
|
||||
keys.event.focus( null, 7, function( node, x, y ) {
|
||||
eventMsg( "Cell "+x+","+y+" focused ('live' event - row)" );
|
||||
} );
|
||||
|
||||
|
||||
/* Focus using coords. */
|
||||
keys.event.focus( 1, 0, function( node ) {
|
||||
keys.event.remove.focus( node );
|
||||
eventMsg( "Cell 1,0 focus - this event has now been removed" );
|
||||
} );
|
||||
|
||||
|
||||
keys.event.focus( 1, 3, function() {
|
||||
eventMsg( "Cell 1,3 focus" );
|
||||
} );
|
||||
|
||||
|
||||
/* focus with a node */
|
||||
keys.event.focus( $('#example tbody tr:eq(2) td:eq(0)')[0], function() {
|
||||
eventMsg( "Cell 0,2 focus" );
|
||||
} );
|
||||
|
||||
|
||||
/* Blur using a node */
|
||||
keys.event.blur( $('#example tbody tr:eq(1) td:eq(2)')[0], function() {
|
||||
eventMsg( "Cell 1,2 blur" );
|
||||
} );
|
||||
|
||||
|
||||
/* Blur using coords */
|
||||
keys.event.blur( 2, 4, function() {
|
||||
eventMsg( "Cell 2,4 blur" );
|
||||
} );
|
||||
|
||||
|
||||
/* Action */
|
||||
keys.event.action( 2, 2, function( node ) {
|
||||
eventMsg( "Cell 2,2 action" );
|
||||
@ -659,7 +659,7 @@ $(document).ready(function() {
|
||||
node.style.fontWeight = "normal";
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
keys.event.action( 2, 5, function( node ) {
|
||||
eventMsg( "Cell 2,5 action" );
|
||||
if ( node.style.fontStyle == "" ) {
|
||||
@ -753,4 +753,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>KeyTable example - Plain HTML table</title>
|
||||
@ -624,4 +624,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
|
||||
@ -66,4 +66,4 @@
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>KeyTable example - Scrolling table</title>
|
||||
@ -634,4 +634,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.png">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>KeyTable example - Basic initialisation</title>
|
||||
@ -628,4 +628,4 @@ $(document).ready(function() {
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user