Add localstorage management
This commit is contained in:
dario-cfpt
@ -9,7 +9,7 @@
|
||||
<meta name="theme-color" content="#2196f3">
|
||||
<meta name="format-detection" content="telephone=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="css/icons.css">
|
||||
@ -34,21 +34,6 @@
|
||||
</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>
|
||||
|
||||
<!-- Your main view, should have "view-main" class -->
|
||||
<div class="view view-main safe-areas">
|
||||
@ -63,20 +48,7 @@
|
||||
<i class="icon material-icons md-only">menu</i>
|
||||
</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 class="title sliding">Fire Emblem Charts</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scrollable page content-->
|
||||
@ -84,131 +56,10 @@
|
||||
<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>
|
||||
</li>
|
||||
<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 class="list">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" class="item-link list-button login-button">Sign In</a>
|
||||
</li>
|
||||
</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>
|
||||
<!-- Cordova -->
|
||||
<!--
|
||||
@ -223,5 +74,6 @@
|
||||
|
||||
<!-- Your custom app scripts -->
|
||||
<script src="js/app.js"></script>
|
||||
<script src="js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,24 +4,15 @@ var $$ = Dom7;
|
||||
// Framework7 App main instance
|
||||
var app = new Framework7({
|
||||
root: '#app', // App root element
|
||||
id: 'io.framework7.testapp', // App bundle ID
|
||||
name: 'Framework7', // App name
|
||||
id: 'net.dariogenga.fecharts', // App bundle ID
|
||||
name: 'Fire Emblem Charts', // App name
|
||||
theme: 'auto', // Automatic theme detection
|
||||
// App root data
|
||||
data: function () {
|
||||
return {
|
||||
user: {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
},
|
||||
};
|
||||
return {};
|
||||
},
|
||||
// App root methods
|
||||
methods: {
|
||||
helloWorld: function () {
|
||||
app.dialog.alert('Hello World!');
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
// App routes
|
||||
routes: routes,
|
||||
});
|
||||
@ -31,14 +22,3 @@ var mainView = app.views.create('.view-main', {
|
||||
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: '/',
|
||||
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);
|
||||
}
|
||||
else {
|
||||
res.status(status.OK).send(); // Catalogue up-to-date
|
||||
res.status(status.OK).send({}); // Catalogue up-to-date
|
||||
}
|
||||
}
|
||||
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();
|
||||
res.status(status.OK).send(data);
|
||||
} else {
|
||||
res.status(status.OK).send(); // Catalogue up-to-date
|
||||
res.status(status.OK).send({}); // Catalogue up-to-date
|
||||
}
|
||||
} catch (e) {
|
||||
res.status(status.INTERNAL_SERVER_ERROR).send(e.message);
|
||||
|
||||
Reference in New Issue
Block a user