Add localstorage management
This commit is contained in:
dario-cfpt
@ -1,227 +1,79 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
|
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||||||
<meta name="theme-color" content="#2196f3">
|
<meta name="theme-color" content="#2196f3">
|
||||||
<meta name="format-detection" content="telephone=no">
|
<meta name="format-detection" content="telephone=no">
|
||||||
<meta name="msapplication-tap-highlight" content="no">
|
<meta name="msapplication-tap-highlight" content="no">
|
||||||
<title>My App</title>
|
<title>Fire Emblem Charts</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="framework7/css/framework7.bundle.min.css">
|
<link rel="stylesheet" href="framework7/css/framework7.bundle.min.css">
|
||||||
<link rel="stylesheet" href="css/icons.css">
|
<link rel="stylesheet" href="css/icons.css">
|
||||||
<link rel="stylesheet" href="css/app.css">
|
<link rel="stylesheet" href="css/app.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<!-- Status bar overlay for fullscreen mode-->
|
<!-- Status bar overlay for fullscreen mode-->
|
||||||
<div class="statusbar"></div>
|
<div class="statusbar"></div>
|
||||||
<!-- Left panel with cover effect-->
|
<!-- Left panel with cover effect-->
|
||||||
<div class="panel panel-left panel-cover theme-dark">
|
<div class="panel panel-left panel-cover theme-dark">
|
||||||
<div class="view">
|
<div class="view">
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="title">Left Panel</div>
|
<div class="title">Left Panel</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="block">Left panel content goes here</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block">Left panel content goes here</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Right panel with reveal effect-->
|
|
||||||
<div class="panel panel-right panel-reveal theme-dark">
|
|
||||||
<div class="view">
|
|
||||||
<div class="page">
|
|
||||||
<div class="navbar">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="title">Right Panel</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block">Right panel content goes here</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Your main view, should have "view-main" class -->
|
<!-- Your main view, should have "view-main" class -->
|
||||||
<div class="view view-main safe-areas">
|
<div class="view view-main safe-areas">
|
||||||
<!-- Page, data-name contains page name which can be used in callbacks -->
|
<!-- Page, data-name contains page name which can be used in callbacks -->
|
||||||
<div class="page" data-name="home">
|
<div class="page" data-name="home">
|
||||||
<!-- Top Navbar -->
|
<!-- Top Navbar -->
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<a href="#" class="link icon-only panel-open" data-panel="left">
|
<a href="#" class="link icon-only panel-open" data-panel="left">
|
||||||
<i class="icon f7-icons ios-only">menu</i>
|
<i class="icon f7-icons ios-only">menu</i>
|
||||||
<i class="icon material-icons md-only">menu</i>
|
<i class="icon material-icons md-only">menu</i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
<div class="title sliding">My App</div>
|
|
||||||
<div class="right">
|
|
||||||
<a href="#" class="link icon-only panel-open" data-panel="right">
|
|
||||||
<i class="icon f7-icons ios-only">menu</i>
|
|
||||||
<i class="icon material-icons md-only">menu</i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Toolbar-->
|
|
||||||
<div class="toolbar toolbar-bottom">
|
|
||||||
<div class="toolbar-inner">
|
|
||||||
<a href="#" class="link">Left Link</a>
|
|
||||||
<a href="#" class="link">Right Link</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Scrollable page content-->
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p>Here is your blank Framework7 app. Let's see what we have here.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="block-title">Navigation</div>
|
|
||||||
<div class="list">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="/about/" class="item-content item-link">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">About</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/form/" class="item-content item-link">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Form</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="block-title">Modals</div>
|
|
||||||
<div class="block block-strong">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-50">
|
|
||||||
<a href="#" class="button button-raised button-fill popup-open" data-popup="#my-popup">Popup</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-50">
|
|
||||||
<a href="#" class="button button-raised button-fill login-screen-open" data-login-screen="#my-login-screen">Login Screen</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="block-title">Panels</div>
|
|
||||||
<div class="block block-strong">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-50">
|
|
||||||
<a href="#" class="button button-raised button-fill panel-open" data-panel="left">Left Panel</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-50">
|
|
||||||
<a href="#" class="button button-raised button-fill panel-open" data-panel="right">Right Panel</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="block-title searchbar-hide-on-search">Page Loaders & Router</div>
|
|
||||||
<div class="list links-list searchbar-hide-on-search">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="/page-loader-template7/vladimir/123/about-me/1/?start=0&end=30#top">Template7 Page</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/page-loader-component/vladimir/123/about-me/1/?start=0&end=30#top">Component Page</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/load-something-that-doesnt-exist/">Default Route (404)</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/request-and-load/user/123456/">Request Data & Load</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Popup -->
|
|
||||||
<div class="popup" id="my-popup">
|
|
||||||
<div class="view">
|
|
||||||
<div class="page">
|
|
||||||
<div class="navbar">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="title">Popup</div>
|
|
||||||
<div class="right">
|
|
||||||
<a href="#" class="link popup-close">Close</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block">
|
|
||||||
<p>Popup content goes here.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Login Screen -->
|
|
||||||
<div class="login-screen" id="my-login-screen">
|
|
||||||
<div class="view">
|
|
||||||
<div class="page">
|
|
||||||
<div class="page-content login-screen-content">
|
|
||||||
<div class="login-screen-title">Login</div>
|
|
||||||
<div class="list">
|
|
||||||
<ul>
|
|
||||||
<li class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Username</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<input type="text" name="username" placeholder="Your username">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="title sliding">Fire Emblem Charts</div>
|
||||||
</li>
|
</div>
|
||||||
<li class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Password</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<input type="password" name="password" placeholder="Your password">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="list">
|
<!-- Scrollable page content-->
|
||||||
<ul>
|
<div class="page-content">
|
||||||
<li>
|
<div class="block block-strong">
|
||||||
<a href="#" class="item-link list-button login-button">Sign In</a>
|
<p>Here is your blank Framework7 app. Let's see what we have here.</p>
|
||||||
</li>
|
</div>
|
||||||
</ul>
|
|
||||||
<div class="block-footer">Some text about login information.<br>Click "Sign In" to close Login Screen</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!-- Cordova -->
|
|
||||||
<!--
|
|
||||||
<script src="cordova.js"></script>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- Framework7 library -->
|
</div>
|
||||||
<script src="framework7/js/framework7.bundle.min.js"></script>
|
<!-- Cordova -->
|
||||||
|
<!--
|
||||||
|
<script src="cordova.js"></script>
|
||||||
|
-->
|
||||||
|
|
||||||
<!-- App routes -->
|
<!-- Framework7 library -->
|
||||||
<script src="js/routes.js"></script>
|
<script src="framework7/js/framework7.bundle.min.js"></script>
|
||||||
|
|
||||||
<!-- Your custom app scripts -->
|
<!-- App routes -->
|
||||||
<script src="js/app.js"></script>
|
<script src="js/routes.js"></script>
|
||||||
|
|
||||||
|
<!-- Your custom app scripts -->
|
||||||
|
<script src="js/app.js"></script>
|
||||||
|
<script src="js/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -2,43 +2,23 @@
|
|||||||
var $$ = Dom7;
|
var $$ = Dom7;
|
||||||
|
|
||||||
// Framework7 App main instance
|
// Framework7 App main instance
|
||||||
var app = new Framework7({
|
var app = new Framework7({
|
||||||
root: '#app', // App root element
|
root: '#app', // App root element
|
||||||
id: 'io.framework7.testapp', // App bundle ID
|
id: 'net.dariogenga.fecharts', // App bundle ID
|
||||||
name: 'Framework7', // App name
|
name: 'Fire Emblem Charts', // App name
|
||||||
theme: 'auto', // Automatic theme detection
|
theme: 'auto', // Automatic theme detection
|
||||||
// App root data
|
// App root data
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {};
|
||||||
user: {
|
|
||||||
firstName: 'John',
|
|
||||||
lastName: 'Doe',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
// App root methods
|
|
||||||
methods: {
|
|
||||||
helloWorld: function () {
|
|
||||||
app.dialog.alert('Hello World!');
|
|
||||||
},
|
},
|
||||||
},
|
// App root methods
|
||||||
// App routes
|
methods: {},
|
||||||
routes: routes,
|
// App routes
|
||||||
|
routes: routes,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Init/Create main view
|
// Init/Create main view
|
||||||
var mainView = app.views.create('.view-main', {
|
var mainView = app.views.create('.view-main', {
|
||||||
url: '/'
|
url: '/'
|
||||||
});
|
});
|
||||||
|
|
||||||
// Login Screen Demo
|
|
||||||
$$('#my-login-screen .login-button').on('click', function () {
|
|
||||||
var username = $$('#my-login-screen [name="username"]').val();
|
|
||||||
var password = $$('#my-login-screen [name="password"]').val();
|
|
||||||
|
|
||||||
// Close login screen
|
|
||||||
app.loginScreen.close('#my-login-screen');
|
|
||||||
|
|
||||||
// Alert username and password
|
|
||||||
app.dialog.alert('Username: ' + username + '<br>Password: ' + password);
|
|
||||||
});
|
|
||||||
|
|||||||
50
mobile/www/js/index.js
Normal file
50
mobile/www/js/index.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
const baseUrl = "http://localhost:3000/";
|
||||||
|
|
||||||
|
let feData = JSON.parse(localStorage.getItem("feData"));
|
||||||
|
|
||||||
|
function updateData(data) {
|
||||||
|
if (Object.keys(data).length > 0) {
|
||||||
|
localStorage.setItem("feData", JSON.stringify(data));
|
||||||
|
feData = data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (feData != null) {
|
||||||
|
fetch(baseUrl + "update", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({version: feData.version}) ,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (res.ok) {
|
||||||
|
return res.json();
|
||||||
|
} else {
|
||||||
|
console.log(res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
updateData(data);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
fetch(baseUrl + "all")
|
||||||
|
.then(res => {
|
||||||
|
if (res.ok) {
|
||||||
|
return res.json();
|
||||||
|
} else {
|
||||||
|
console.log(res);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.then(data => {
|
||||||
|
updateData(data);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -3,77 +3,5 @@ routes = [
|
|||||||
path: '/',
|
path: '/',
|
||||||
url: './index.html',
|
url: './index.html',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/about/',
|
|
||||||
url: './pages/about.html',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/form/',
|
|
||||||
url: './pages/form.html',
|
|
||||||
},
|
|
||||||
// Page Loaders & Router
|
|
||||||
{
|
|
||||||
path: '/page-loader-template7/:user/:userId/:posts/:postId/',
|
|
||||||
templateUrl: './pages/page-loader-template7.html',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/page-loader-component/:user/:userId/:posts/:postId/',
|
|
||||||
componentUrl: './pages/page-loader-component.html',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/request-and-load/user/:userId/',
|
|
||||||
async: function (routeTo, routeFrom, resolve, reject) {
|
|
||||||
// Router instance
|
|
||||||
var router = this;
|
|
||||||
|
|
||||||
// App instance
|
|
||||||
var app = router.app;
|
|
||||||
|
|
||||||
// Show Preloader
|
|
||||||
app.preloader.show();
|
|
||||||
|
|
||||||
// User ID from request
|
|
||||||
var userId = routeTo.params.userId;
|
|
||||||
|
|
||||||
// Simulate Ajax Request
|
|
||||||
setTimeout(function () {
|
|
||||||
// We got user data from request
|
|
||||||
var user = {
|
|
||||||
firstName: 'Vladimir',
|
|
||||||
lastName: 'Kharlampidi',
|
|
||||||
about: 'Hello, i am creator of Framework7! Hope you like it!',
|
|
||||||
links: [
|
|
||||||
{
|
|
||||||
title: 'Framework7 Website',
|
|
||||||
url: 'http://framework7.io',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Framework7 Forum',
|
|
||||||
url: 'http://forum.framework7.io',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
};
|
|
||||||
// Hide Preloader
|
|
||||||
app.preloader.hide();
|
|
||||||
|
|
||||||
// Resolve route to load page
|
|
||||||
resolve(
|
|
||||||
{
|
|
||||||
componentUrl: './pages/request-and-load.html',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
context: {
|
|
||||||
user: user,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}, 1000);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// Default route (404 page). MUST BE THE LAST
|
|
||||||
{
|
|
||||||
path: '(.*)',
|
|
||||||
url: './pages/404.html',
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<div class="page">
|
|
||||||
<div class="navbar">
|
|
||||||
<div class="navbar-inner sliding">
|
|
||||||
<div class="left">
|
|
||||||
<a href="#" class="link back">
|
|
||||||
<i class="icon icon-back"></i>
|
|
||||||
<span class="ios-only">Back</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="title">Not found</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p>Sorry</p>
|
|
||||||
<p>Requested content not found.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<div class="page" data-name="about">
|
|
||||||
<div class="navbar">
|
|
||||||
<div class="navbar-inner sliding">
|
|
||||||
<div class="left">
|
|
||||||
<a href="#" class="link back">
|
|
||||||
<i class="icon icon-back"></i>
|
|
||||||
<span class="ios-only">Back</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="title">About</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block-title">About My App</div>
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p>Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum, voluptate omnis quasi quidem illum consequuntur, a, quisquam.</p>
|
|
||||||
<p>Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum, excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia perspiciatis, reiciendis ex debitis, ut tenetur alias.</p>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe iste consectetur in repellat ut minus quibusdam!</p>
|
|
||||||
<p>Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis, aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius, velit corrupti reprehenderit dignissimos consequatur!</p>
|
|
||||||
<p>Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto doloribus a at! Ea molestiae ullam delectus!</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,257 +0,0 @@
|
|||||||
<div class="page" data-name="form">
|
|
||||||
<div class="navbar">
|
|
||||||
<div class="navbar-inner sliding">
|
|
||||||
<div class="left">
|
|
||||||
<a href="#" class="link back">
|
|
||||||
<i class="icon icon-back"></i>
|
|
||||||
<span class="ios-only">Back</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="title">Form</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block-title">Form Example</div>
|
|
||||||
<div class="list no-hairlines-md">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Name</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<input type="text" placeholder="Your name"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">E-mail</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<input type="email" placeholder="E-mail"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">URL</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<input type="url" placeholder="URL"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Password</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<input type="password" placeholder="Password"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Phone</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<input type="tel" placeholder="Phone"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Gender</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<select>
|
|
||||||
<option>Male</option>
|
|
||||||
<option>Female</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Birth date</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<input type="date" placeholder="Birth day" value="2014-04-30"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="item-content">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Toggle</div>
|
|
||||||
<div class="item-after">
|
|
||||||
<label class="toggle toggle-init">
|
|
||||||
<input type="checkbox">
|
|
||||||
<span class="toggle-icon"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Slider</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<div class="range-slider range-slider-init" data-label="true">
|
|
||||||
<input type="range" value="50" min="0" max="100" step="1">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="align-top">
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Textarea</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<textarea placeholder="Bio"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="align-top">
|
|
||||||
<div class="item-content item-input">
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title item-label">Resizable</div>
|
|
||||||
<div class="item-input-wrap">
|
|
||||||
<textarea placeholder="Bio" class="resizable"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="block-title">Buttons</div>
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p class="row">
|
|
||||||
<a href="#" class="col button">Button</a>
|
|
||||||
<a href="#" class="col button button-fill">Fill</a>
|
|
||||||
</p>
|
|
||||||
<p class="row">
|
|
||||||
<a href="#" class="col button button-raised">Raised</a>
|
|
||||||
<a href="#" class="col button button-raised button-fill">Raised Fill</a>
|
|
||||||
</p>
|
|
||||||
<p class="row">
|
|
||||||
<a href="#" class="col button button-round">Round</a>
|
|
||||||
<a href="#" class="col button button-round button-fill">Round Fill</a>
|
|
||||||
</p>
|
|
||||||
<p class="row">
|
|
||||||
<a href="#" class="col button button-outline">Outline</a>
|
|
||||||
<a href="#" class="col button button-round button-outline">Outline Round</a>
|
|
||||||
</p>
|
|
||||||
<p class="row">
|
|
||||||
<a href="#" class="col button button-small button-outline">Small</a>
|
|
||||||
<a href="#" class="col button button-small button-round button-outline">Small Round</a>
|
|
||||||
</p>
|
|
||||||
<p class="row">
|
|
||||||
<a href="#" class="col button button-small button-fill">Small</a>
|
|
||||||
<a href="#" class="col button button-small button-round button-fill">Small Round</a>
|
|
||||||
</p>
|
|
||||||
<p class="row">
|
|
||||||
<a href="#" class="col button button-large button-raised">Large</a>
|
|
||||||
<a href="#" class="col button button-large button-fill button-raised">Large Fill</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="row">
|
|
||||||
<a href="#" class="col button button-large button-fill button-raised color-red">Large Red</a>
|
|
||||||
<a href="#" class="col button button-large button-fill button-raised color-green">Large Green</a>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="block-title">Checkbox group</div>
|
|
||||||
<div class="list">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label class="item-checkbox item-content">
|
|
||||||
<input type="checkbox" name="checkbox" value="Books" checked="checked"/>
|
|
||||||
<i class="icon icon-checkbox"></i>
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Books</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label class="item-checkbox item-content">
|
|
||||||
<input type="checkbox" name="checkbox" value="Movies"/>
|
|
||||||
<i class="icon icon-checkbox"></i>
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Movies</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label class="item-checkbox item-content">
|
|
||||||
<input type="checkbox" name="checkbox" value="Food"/>
|
|
||||||
<i class="icon icon-checkbox"></i>
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Food</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label class="item-checkbox item-content">
|
|
||||||
<input type="checkbox" name="checkbox" value="Drinks"/>
|
|
||||||
<i class="icon icon-checkbox"></i>
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Drinks</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="block-title">Radio buttons group</div>
|
|
||||||
<div class="list">
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<label class="item-radio item-content">
|
|
||||||
<input type="radio" name="radio" value="Books" checked="checked"/>
|
|
||||||
<i class="icon icon-radio"></i>
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Books</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label class="item-radio item-content">
|
|
||||||
<input type="radio" name="radio" value="Movies"/>
|
|
||||||
<i class="icon icon-radio"></i>
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Movies</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label class="item-radio item-content">
|
|
||||||
<input type="radio" name="radio" value="Food"/>
|
|
||||||
<i class="icon icon-radio"></i>
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Food</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<label class="item-radio item-content">
|
|
||||||
<input type="radio" name="radio" value="Drinks"/>
|
|
||||||
<i class="icon icon-radio"></i>
|
|
||||||
<div class="item-inner">
|
|
||||||
<div class="item-title">Drinks</div>
|
|
||||||
</div>
|
|
||||||
</label>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,131 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<div class="navbar">
|
|
||||||
<div class="navbar-inner sliding">
|
|
||||||
<div class="left">
|
|
||||||
<a href="#" class="link back">
|
|
||||||
<i class="icon icon-back"></i>
|
|
||||||
<span class="ios-only">Back</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="title">Component Page</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p>Component page is alos compiled with Template7, but it has much more functionality. In addition to Template7 page it has lifecycle hooks, events handling and data managment.</p>
|
|
||||||
<p>It is useful to use Component page when you need page-specific logic.</p>
|
|
||||||
</div>
|
|
||||||
<div class="block-title">Events Handling</div>
|
|
||||||
<div class="block block-strong">
|
|
||||||
<a href="#" class="button button-raised" @click="openAlert">Open Alert</a>
|
|
||||||
</div>
|
|
||||||
<div class="block-title">Page Component Data</div>
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p>Hello! My name is {{name}}. I am {{age}} years old.</p>
|
|
||||||
<p>I like to play:</p>
|
|
||||||
<ul>
|
|
||||||
{{#each like}}
|
|
||||||
<li>{{this}}</li>
|
|
||||||
{{/each}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="block-title">Extended Context</div>
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p>Component page context as Template7 page context is also extended with some additional variables.</p>
|
|
||||||
<h4>$route</h4>
|
|
||||||
<p>Contains properties of the current route:</p>
|
|
||||||
<ul style="padding-left:25px">
|
|
||||||
<li><b>$route.url</b>: {{$route.url}}</li>
|
|
||||||
<li><b>$route.path</b>: {{$route.path}}</li>
|
|
||||||
<li><b>$route.params</b>: {{js 'return JSON.stringify(this.$route.params)'}}</li>
|
|
||||||
<li><b>$route.hash</b>: {{$route.hash}}</li>
|
|
||||||
<li><b>$route.query</b>: {{js 'return JSON.stringify(this.$route.query)'}}</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4>$root</h4>
|
|
||||||
<p>Root data & methods:</p>
|
|
||||||
<ul style="padding-left:25px">
|
|
||||||
<li><b>$root.user.firstName</b>: {{$root.user.firstName}}</li>
|
|
||||||
<li><b>$root.user.lastName</b>: {{$root.user.lastName}}</li>
|
|
||||||
<li><a @click="$root.helloWorld()">$root.helloWorld()</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4>$theme</h4>
|
|
||||||
<p>Currently active theme:</p>
|
|
||||||
<ul style="padding-left:25px">
|
|
||||||
<li><b>$theme.ios</b>: {{$theme.ios}}</li>
|
|
||||||
<li><b>$theme.md</b>: {{$theme.md}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<style>
|
|
||||||
p {
|
|
||||||
margin: 10px 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script>
|
|
||||||
return {
|
|
||||||
// Lifecycle Hooks
|
|
||||||
beforeCreate() {
|
|
||||||
console.log('componentBeforeCreate', this)
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
console.log('componentCreated', this)
|
|
||||||
},
|
|
||||||
beforeMount() {
|
|
||||||
console.log('componentBeforeMount', this)
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
console.log('componentMounted', this);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
console.log('componentBeforeDestroy', this);
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
console.log('componentDestroyed', this);
|
|
||||||
},
|
|
||||||
// Component Data
|
|
||||||
data: function () {
|
|
||||||
// Must return an object
|
|
||||||
return {
|
|
||||||
name: 'Jimmy',
|
|
||||||
age: 25,
|
|
||||||
like: ['Tennis', 'Chess', 'Football'],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Component Methods
|
|
||||||
methods: {
|
|
||||||
openAlert: function () {
|
|
||||||
var self = this;
|
|
||||||
self.$app.dialog.alert('Hello World');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// Page Events
|
|
||||||
on: {
|
|
||||||
pageMounted: function(e, page) {
|
|
||||||
console.log('pageMounted', page);
|
|
||||||
},
|
|
||||||
pageInit: function(e, page) {
|
|
||||||
console.log('pageInit', page);
|
|
||||||
},
|
|
||||||
pageBeforeIn: function(e, page) {
|
|
||||||
console.log('pageBeforeIn', page);
|
|
||||||
},
|
|
||||||
pageAfterIn: function(e, page) {
|
|
||||||
console.log('pageAfterIn', page);
|
|
||||||
},
|
|
||||||
pageBeforeOut: function(e, page) {
|
|
||||||
console.log('pageBeforeOut', page);
|
|
||||||
},
|
|
||||||
pageAfterOut: function(e, page) {
|
|
||||||
console.log('pageAfterOut', page);
|
|
||||||
},
|
|
||||||
pageBeforeRemove: function(e, page) {
|
|
||||||
console.log('pageBeforeRemove', page);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<div class="page">
|
|
||||||
<div class="navbar">
|
|
||||||
<div class="navbar-inner sliding">
|
|
||||||
<div class="left">
|
|
||||||
<a href="#" class="link back">
|
|
||||||
<i class="icon icon-back"></i>
|
|
||||||
<span class="ios-only">Back</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="title">Template7 Page</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p>This page was loaded and compiled with Template7 template engine.</p>
|
|
||||||
</div>
|
|
||||||
<div class="block-title">Extended Context</div>
|
|
||||||
<div class="block block-strong">
|
|
||||||
<p>Template7 page context is extended with some additional variables.</p>
|
|
||||||
|
|
||||||
<h4>$route</h4>
|
|
||||||
<p>Contains properties of the current route:</p>
|
|
||||||
<ul style="padding-left:25px">
|
|
||||||
<li><b>$route.url</b>: {{$route.url}}</li>
|
|
||||||
<li><b>$route.path</b>: {{$route.path}}</li>
|
|
||||||
<li><b>$route.params</b>: {{js 'return JSON.stringify(this.$route.params)'}}</li>
|
|
||||||
<li><b>$route.hash</b>: {{$route.hash}}</li>
|
|
||||||
<li><b>$route.query</b>: {{js 'return JSON.stringify(this.$route.query)'}}</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4>$root</h4>
|
|
||||||
<p>Root app data:</p>
|
|
||||||
<ul style="padding-left:25px">
|
|
||||||
<li><b>$root.user.firstName</b>: {{$root.user.firstName}}</li>
|
|
||||||
<li><b>$root.user.lastName</b>: {{$root.user.lastName}}</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h4>$theme</h4>
|
|
||||||
<p>Currently active theme:</p>
|
|
||||||
<ul style="padding-left:25px">
|
|
||||||
<li><b>$theme.ios</b>: {{$theme.ios}}</li>
|
|
||||||
<li><b>$theme.md</b>: {{$theme.md}}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="page">
|
|
||||||
<div class="navbar">
|
|
||||||
<div class="navbar-inner sliding">
|
|
||||||
<div class="left">
|
|
||||||
<a href="#" class="back link">
|
|
||||||
<i class="icon icon-back"></i>
|
|
||||||
<span class="ios-only">Back</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="title">{{user.firstName}} {{user.lastName}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="page-content">
|
|
||||||
<div class="block block-strong">
|
|
||||||
{{user.about}}
|
|
||||||
</div>
|
|
||||||
<div class="list links-list">
|
|
||||||
<ul>
|
|
||||||
{{#each user.links}}
|
|
||||||
<li><a class="external" target="_blank" href="{{url}}">{{title}}</a></li>
|
|
||||||
{{/each}}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
return {}
|
|
||||||
</script>
|
|
||||||
2
server/dist/index.js
vendored
2
server/dist/index.js
vendored
@ -167,7 +167,7 @@ app.post('/update', (req, res) => __awaiter(void 0, void 0, void 0, function* ()
|
|||||||
res.status(status.OK).send(data);
|
res.status(status.OK).send(data);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
res.status(status.OK).send(); // Catalogue up-to-date
|
res.status(status.OK).send({}); // Catalogue up-to-date
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
catch (e) {
|
catch (e) {
|
||||||
|
|||||||
2
server/dist/index.js.map
vendored
2
server/dist/index.js.map
vendored
File diff suppressed because one or more lines are too long
@ -155,7 +155,7 @@ app.post('/update', async (req, res) => {
|
|||||||
const data = await FE_Charts.getAllData();
|
const data = await FE_Charts.getAllData();
|
||||||
res.status(status.OK).send(data);
|
res.status(status.OK).send(data);
|
||||||
} else {
|
} else {
|
||||||
res.status(status.OK).send(); // Catalogue up-to-date
|
res.status(status.OK).send({}); // Catalogue up-to-date
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
res.status(status.INTERNAL_SERVER_ERROR).send(e.message);
|
res.status(status.INTERNAL_SERVER_ERROR).send(e.message);
|
||||||
|
|||||||
Reference in New Issue
Block a user