import './styles.css';
import '@mescius/wijmo.cultures/wijmo.culture.ja';
import '@mescius/wijmo.styles/wijmo.css';
import * as wjCore from '@mescius/wijmo';
import * as wjNav from '@mescius/wijmo.nav';
import { Codabar, Code128, QrCode } from '@mescius/wijmo.barcode.common';
import { ShowText, RadialGauge } from '@mescius/wijmo.gauge';
import * as wjcGrid from '@mescius/wijmo.grid';
import * as input from '@mescius/wijmo.input';
import { history, monthArray, getChartData, getExpenseData, couponData, heartIcon } from './data.js';
import * as chart from '@mescius/wijmo.chart';
import { MultiRow } from '@mescius/wijmo.grid.multirow';
document.readyState === 'complete' ? init() : window.onload = init;
function init() {
new Codabar('#nw', {
value: 'A1512-6893-987D',
font: { fontSize: 12 },
});
new Code128('#barcode', {
value: '9000 1234-w000-j123',
});
let theTabPanel = new wjNav.TabPanel('#theTabPanel');
let host = theTabPanel.hostElement;
let clsName = 'tabs-below';
wjCore.toggleClass(host, clsName, true);
new RadialGauge('#pointGauge', {
min: 0,
max: 10000,
value: 8000,
startAngle: -270,
sweepAngle: 360,
showText: ShowText.Value,
face: {
thickness: 0.3,
},
pointer: {
thickness: 0.3,
},
format: 'n0',
getText: getTextCallback,
});
function getTextCallback(gauge, part, value, text) {
return `${text}pt`;
}
let theChart = new chart.FlexChart('#pointchart', {
bindingX: 'month',
series: [
{
binding: '2022',
},
{
binding: 'sum',
chartType: 'LineSymbols'
},
],
axisY: {
labels: false,
},
dataLabel: {
content: '{y}',
},
tooltip: {
content: '',
},
itemsSource: getChartData(),
});
//電子マネー
let historyGird = new wjcGrid.FlexGrid('#history', {
autoGenerateColumns: false,
allowSorting: false,
columns: [
{
header: '2022年XX月 利用履歴',
binding: 'amount',
width: '*',
align: 'center'
},
],
headersVisibility: wjcGrid.HeadersVisibility.Column,
selectionMode: wjcGrid.SelectionMode.None,
formatItem: function (s, e) {
if (e.panel == s.cells && e.col == 0) {
let html = wjCore.format('<div class="item-header">{operate}</div>' +
'<div class="item-detail1">' +
'<div class="item-detail1-1">{date}</div>' +
'<div class="item-detail1-2">{amount}</div></div>', s.rows[e.row].dataItem);
e.cell.innerHTML = html;
}
if (e.panel == s.columnHeaders) {
e.cell.innerHTML = '<div class=header>' +
'<div id="h-left"><span class="wj-glyph-left" onclick="previousMonth()"></span></div>' +
'<div >' + e.cell.innerHTML + '</div>' +
'<div ><span class="wj-glyph-right" onclick="nextMonth()"></span></div></div>';
}
},
});
let currentMonthIndex = monthArray.length - 1;
let data = getExpenseData();
let sumExpense = () => {
return data.filter((item) => item.month === monthArray[currentMonthIndex])
.map(function (data) {
return data.amount;
})
.reduce(function (sum = 0, cur) {
return sum + cur;
});
};
let setinnerText = () => {
return '計:' + wjCore.Globalize.format(sumExpense(), 'C');
};
let expensChart = new chart.FlexPie('#expensechart', {
bindingName: 'type',
binding: 'amount',
tooltip: {
content: '',
},
innerRadius: 0.6,
dataLabel: {
content: (ht) => {
return `${ht.name} ${wjCore.Globalize.format(ht.value, 'c0')}`;
},
},
innerText: setinnerText(),
innerTextStyle: {
fontWeight: 'bold',
fontSize: '15px',
},
legend: {
position: 0,
},
itemsSource: data.filter((item) => item.month === monthArray[currentMonthIndex]),
});
historyGird.itemsSource = history.filter((item) => item.month === monthArray[currentMonthIndex]);
historyGird.rows.defaultSize = 80;
historyGird.columns[0].header = historyGird.columns[0].header.replace('XX月', monthArray[currentMonthIndex]);
let monthExpense = document.getElementById('monthExpense');
monthExpense.textContent = monthExpense.textContent.replace('今月', monthArray[currentMonthIndex]);
let previousMonth = () => {
if (currentMonthIndex === 0)
return;
currentMonthIndex--;
historyGird.itemsSource = history.filter((item) => item.month === monthArray[currentMonthIndex]);
historyGird.columns[0].header = historyGird.columns[0].header.replace(monthArray[currentMonthIndex + 1], monthArray[currentMonthIndex]);
monthExpense.textContent = monthExpense.textContent.replace(monthArray[currentMonthIndex + 1], monthArray[currentMonthIndex]);
expensChart.itemsSource = data.filter((item) => item.month === monthArray[currentMonthIndex]);
expensChart.innerText = setinnerText();
};
let nextMonth = () => {
if (currentMonthIndex === monthArray.length - 1)
return;
currentMonthIndex++;
historyGird.itemsSource = history.filter((item) => item.month === monthArray[currentMonthIndex]);
historyGird.columns[0].header = historyGird.columns[0].header.replace(monthArray[currentMonthIndex - 1], monthArray[currentMonthIndex]);
monthExpense.textContent = monthExpense.textContent.replace(monthArray[currentMonthIndex - 1], monthArray[currentMonthIndex]);
expensChart.itemsSource = data.filter((item) => item.month === monthArray[currentMonthIndex]);
expensChart.innerText = setinnerText();
};
window.previousMonth = previousMonth;
window.nextMonth = nextMonth;
document.getElementById('syleChangebtn').addEventListener('click', () => {
let elm = document.getElementsByClassName('barcode-area')[0];
elm.classList.toggle('hide');
elm.classList.toggle('show');
});
//クーポンタブ
let frmLogin = new input.Popup('#theDialog');
let qrCode = new QrCode('#barcode2', {
value: 'https://en.wikipedia.org/wiki/QR_code'
});
const multiRow = new MultiRow('#multiRow', {
itemsSource: couponData(),
headersVisibility: wjcGrid.HeadersVisibility.None,
selectionMode: wjcGrid.SelectionMode.Cell,
layoutDefinition: [
{
cells: [
{ binding: 'descriptionL', width: '*', cssClass: 'id', align: 'center' }
]
}, {
cells: [
{ binding: 'descriptionR', width: '*', cssClass: 'id', align: 'center' }
]
}
],
formatItem: function (s, e) {
if (e.panel == s.cells) {
let icon = s.columns[e.col].binding === 'descriptionL' ? s.rows[e.row].dataItem.iconL : s.rows[e.row].dataItem.iconR;
let text = s.columns[e.col].binding === 'descriptionL' ? s.rows[e.row].dataItem.descriptionL : s.rows[e.row].dataItem.descriptionR;
var item = s.rows[e.row].dataItem;
formatRatingCell(e.cell, icon, text);
}
}
});
multiRow.rows.defaultSize = 140;
multiRow.addEventListener(multiRow.hostElement, 'click', function (e) {
var ht = multiRow.hitTest(e);
if (ht.panel == multiRow.cells) {
frmLogin.show(true, (sender) => {
});
}
});
function formatRatingCell(cell, icon, test) {
let testArr = test.split(',');
let html = '<div>' + heartIcon + '<div class="couponIcon">' + icon + '<hr><div class="couponText1">' + testArr[0] + '<div class="couponText2">' + testArr[1];
html += '</div></div></div><div>';
cell.innerHTML = html;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo mobile like</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=”description” content=”Wijmoのコントロールを使用して、モバイル風なアプリケーションを作成します。” />
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="mobile">
<div class="display">
<div id="theTabPanel">
<div>
<a><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
class="bi bi-currency-yen tab-icon" viewBox="0 0 16 16">
<path
d="M8.75 14v-2.629h2.446v-.967H8.75v-1.31h2.445v-.967H9.128L12.5 2h-1.699L8.047 7.327h-.086L5.207 2H3.5l3.363 6.127H4.778v.968H7.25v1.31H4.78v.966h2.47V14h1.502z" />
</svg>
<div class="tabText">電子マネー</div>
</a>
<div class="digital-money">
<div class="card">
<div class="tile-content">
<div class="color-white balance">
<div>
<p>残高</p>
</div>
<div class="digital-money-font">￥12,500</div>
</div>
<div class="barcode-area hide">
<div id="barcode"></div>
</div>
<div class="btn-area">
<button type="button" class="circle-btn" id="syleChangebtn">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="80"
fill="currentColor" class="bi bi-arrow-repeat swicthIcon"
viewBox="0 0 16 16">
<path
d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z" />
<path fill-rule="evenodd"
d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z" />
</svg>
</button>
</div>
</div>
</div>
<div class="history-area">
<div id="history"></div>
<hr />
<b id="monthExpense">今月の出費</b>
<div class="expensechartarea">
<div id="expensechart"></div>
</div>
</div>
</div>
</div>
<div>
<a><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
class="bi bi-piggy-bank tab-icon" viewBox="0 0 16 16">
<path
d="M5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm1.138-1.496A6.613 6.613 0 0 1 7.964 4.5c.666 0 1.303.097 1.893.273a.5.5 0 0 0 .286-.958A7.602 7.602 0 0 0 7.964 3.5c-.734 0-1.441.103-2.102.292a.5.5 0 1 0 .276.962z" />
<path fill-rule="evenodd"
d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595zM2.516 6.26c.455-2.066 2.667-3.733 5.448-3.733 3.146 0 5.536 2.114 5.536 4.542 0 1.254-.624 2.41-1.67 3.248a.5.5 0 0 0-.165.535l.66 2.175h-.985l-.59-1.487a.5.5 0 0 0-.629-.288c-.661.23-1.39.359-2.157.359a6.558 6.558 0 0 1-2.157-.359.5.5 0 0 0-.635.304l-.525 1.471h-.979l.633-2.15a.5.5 0 0 0-.17-.534 4.649 4.649 0 0 1-1.284-1.541.5.5 0 0 0-.446-.275h-.56a.5.5 0 0 1-.492-.414l-.254-1.46h.933a.5.5 0 0 0 .488-.393zm12.621-.857a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199z" />
</svg>
<div class="tabText">ポイント</div>
</a>
<div>
<div class="card">
<div class="tile-content">
<div class="content">
<p class="card-title">Wijmo member's card</p>
<div id="nw"></div>
</div>
</div>
</div>
<div class="point-scroll">
<div class="gauge-area">
<div class="gauge-description">ブロンズステージ</div>
<div class="gauge">
<div id="pointGauge"></div>
</div>
<div class="gauge-description2">あと、2000でシルバー</div>
<hr />
<b class="pointDescription"> 獲得ポイント</b>
<div class="chartarea">
<div id="pointchart"></div>
</div>
</div>
</div>
</div>
</div>
<div>
<a><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
class="bi bi-ticket tab-icon" viewBox="0 0 16 16">
<path
d="M0 4.5A1.5 1.5 0 0 1 1.5 3h13A1.5 1.5 0 0 1 16 4.5V6a.5.5 0 0 1-.5.5 1.5 1.5 0 0 0 0 3 .5.5 0 0 1 .5.5v1.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 11.5V10a.5.5 0 0 1 .5-.5 1.5 1.5 0 1 0 0-3A.5.5 0 0 1 0 6V4.5ZM1.5 4a.5.5 0 0 0-.5.5v1.05a2.5 2.5 0 0 1 0 4.9v1.05a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-1.05a2.5 2.5 0 0 1 0-4.9V4.5a.5.5 0 0 0-.5-.5h-13Z" />
</svg>
<div class="tabText">クーポン</div>
</a>
<div class="couponArea">
<b>利用可能なクーポン</b>
<div id="multiRow"></div>
<div id="theDialog">
<div id="barcode2"></div>
<div>上記のQRコードを提示してください</div>
</div>
</div>
</div>
</div>
</div>
<div class="box2"></div>
</div>
<div>
<p>このデモサイトではBootstrap Iconsを利用しています。</p>
<p>Copyright (c) 2011-2024 The Bootstrap Authors</p>
<a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank">Bootstrap Iconsのライセンス</a>
</div>
</body>
</html>
const cartIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-cart-check couponIcon" viewBox="0 0 16 16"><path d="M11.354 6.354a.5.5 0 0 0-.708-.708L8 8.293 6.854 7.146a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3z"/><path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>';
const basketIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-basket couponIcon" viewBox="0 0 16 16"><path d="M5.757 1.071a.5.5 0 0 1 .172.686L3.383 6h9.234L10.07 1.757a.5.5 0 1 1 .858-.514L13.783 6H15a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1v4.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 13.5V9a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h1.217L5.07 1.243a.5.5 0 0 1 .686-.172zM2 9v4.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V9H2zM1 7v1h14V7H1zm3 3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 4 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 6 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3A.5.5 0 0 1 8 10zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5zm2 0a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 1 .5-.5z"/></svg>';
const bookIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-book couponIcon" viewBox="0 0 16 16"><path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/></svg>';
const pointCardIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-piggy-bank couponIcon" viewBox="0 0 16 16"><path d="M5 6.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm1.138-1.496A6.613 6.613 0 0 1 7.964 4.5c.666 0 1.303.097 1.893.273a.5.5 0 0 0 .286-.958A7.602 7.602 0 0 0 7.964 3.5c-.734 0-1.441.103-2.102.292a.5.5 0 1 0 .276.962z"/><path fill-rule="evenodd" d="M7.964 1.527c-2.977 0-5.571 1.704-6.32 4.125h-.55A1 1 0 0 0 .11 6.824l.254 1.46a1.5 1.5 0 0 0 1.478 1.243h.263c.3.513.688.978 1.145 1.382l-.729 2.477a.5.5 0 0 0 .48.641h2a.5.5 0 0 0 .471-.332l.482-1.351c.635.173 1.31.267 2.011.267.707 0 1.388-.095 2.028-.272l.543 1.372a.5.5 0 0 0 .465.316h2a.5.5 0 0 0 .478-.645l-.761-2.506C13.81 9.895 14.5 8.559 14.5 7.069c0-.145-.007-.29-.02-.431.261-.11.508-.266.705-.444.315.306.815.306.815-.417 0 .223-.5.223-.461-.026a.95.95 0 0 0 .09-.255.7.7 0 0 0-.202-.645.58.58 0 0 0-.707-.098.735.735 0 0 0-.375.562c-.024.243.082.48.32.654a2.112 2.112 0 0 1-.259.153c-.534-2.664-3.284-4.595-6.442-4.595zM2.516 6.26c.455-2.066 2.667-3.733 5.448-3.733 3.146 0 5.536 2.114 5.536 4.542 0 1.254-.624 2.41-1.67 3.248a.5.5 0 0 0-.165.535l.66 2.175h-.985l-.59-1.487a.5.5 0 0 0-.629-.288c-.661.23-1.39.359-2.157.359a6.558 6.558 0 0 1-2.157-.359.5.5 0 0 0-.635.304l-.525 1.471h-.979l.633-2.15a.5.5 0 0 0-.17-.534 4.649 4.649 0 0 1-1.284-1.541.5.5 0 0 0-.446-.275h-.56a.5.5 0 0 1-.492-.414l-.254-1.46h.933a.5.5 0 0 0 .488-.393zm12.621-.857a.565.565 0 0 1-.098.21.704.704 0 0 1-.044-.025c-.146-.09-.157-.175-.152-.223a.236.236 0 0 1 .117-.173c.049-.027.08-.021.113.012a.202.202 0 0 1 .064.199z"/></svg>';
const cupIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-cup-straw couponIcon" viewBox="0 0 16 16"><path d="M13.902.334a.5.5 0 0 1-.28.65l-2.254.902-.4 1.927c.376.095.715.215.972.367.228.135.56.396.56.82 0 .046-.004.09-.011.132l-.962 9.068a1.28 1.28 0 0 1-.524.93c-.488.34-1.494.87-3.01.87-1.516 0-2.522-.53-3.01-.87a1.28 1.28 0 0 1-.524-.93L3.51 5.132A.78.78 0 0 1 3.5 5c0-.424.332-.685.56-.82.262-.154.607-.276.99-.372C5.824 3.614 6.867 3.5 8 3.5c.712 0 1.389.045 1.985.127l.464-2.215a.5.5 0 0 1 .303-.356l2.5-1a.5.5 0 0 1 .65.278zM9.768 4.607A13.991 13.991 0 0 0 8 4.5c-1.076 0-2.033.11-2.707.278A3.284 3.284 0 0 0 4.645 5c.146.073.362.15.648.222C5.967 5.39 6.924 5.5 8 5.5c.571 0 1.109-.03 1.588-.085l.18-.808zm.292 1.756C9.445 6.45 8.742 6.5 8 6.5c-1.133 0-2.176-.114-2.95-.308a5.514 5.514 0 0 1-.435-.127l.838 8.03c.013.121.06.186.102.215.357.249 1.168.69 2.438.69 1.27 0 2.081-.441 2.438-.69.042-.029.09-.094.102-.215l.852-8.03a5.517 5.517 0 0 1-.435.127 8.88 8.88 0 0 1-.89.17zM4.467 4.884s.003.002.005.006l-.005-.006zm7.066 0-.005.006c.002-.004.005-.006.005-.006zM11.354 5a3.174 3.174 0 0 0-.604-.21l-.099.445.055-.013c.286-.072.502-.149.648-.222z"/></svg>';
const yenIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="55" height="55" fill="currentColor" class="bi bi-currency-yen couponIcon" viewBox="0 0 16 16"><path d="M8.75 14v-2.629h2.446v-.967H8.75v-1.31h2.445v-.967H9.128L12.5 2h-1.699L8.047 7.327h-.086L5.207 2H3.5l3.363 6.127H4.778v.968H7.25v1.31H4.78v.966h2.47V14h1.502z"/></svg>';
export const heartIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart hartIcon" viewBox="0 0 16 16"><path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/></svg>';
export let point = [
{ expired: '2023年3月末 ', point: 300 },
{ expired: '2023年9月末 ', point: 600 },
{ expired: '2024年3月末 ', point: 900 },
];
export let monthArray = ['9月', '10月', '11月', '12月'];
export let history = [
{ operate: 'チャージ (入)', date: '2022/12/29', amount: '￥5000', month: '12月' },
{ operate: '雑費（出）', date: '2022/12/22', amount: '￥-1500', month: '12月' },
{ operate: '食費（出）', date: '2022/12/19', amount: '￥-900', month: '12月' },
{ operate: '食費（出）', date: '2022/12/15', amount: '￥-2700', month: '12月' },
{ operate: 'チャージ (入)', date: '2022/12/10', amount: '￥3000', month: '12月' },
{ operate: '日用品（出）', date: '2022/12/05', amount: '￥-900', month: '12月' },
{ operate: '雑費（出）', date: '2022/11/30', amount: '￥880', month: '11月' },
{ operate: '食費（出）', date: '2022/11/15', amount: '￥4500', month: '11月' },
{ operate: 'チャージ (入)', date: '2022/11/10', amount: '￥3000', month: '11月' },
{ operate: '書籍（出）', date: '2022/11/05', amount: '￥-2700', month: '11月' },
{ operate: '日用品（出）', date: '2022/10/27', amount: '￥-3000', month: '10月' },
{ operate: 'チャージ (入)', date: '2022/10/10', amount: '￥3000', month: '10月' },
{ operate: '雑費（出）', date: '2022/10/01', amount: '￥-1500', month: '10月' },
{ operate: '書籍（出）', date: '2022/9/25', amount: '￥-900', month: '9月' },
{ operate: 'チャージ (入)', date: '2022/10/15', amount: '￥4000', month: '9月' },
{ operate: '日用品（出）', date: '2022/9/8', amount: '￥-2000', month: '9月' },
];
export function getChartData() {
return [
{ month: '8月', 2022: 1500, sum: 0 },
{ month: '9月', 2022: 500, sum: 2000 },
{ month: '10月', 2022: 2000, sum: 4000 },
{ month: '11月', 2022: 1000, sum: 5000 },
{ month: '12月', 2022: 3000, sum: 8000 },
];
}
export function getExpenseData() {
return [
{ type: '雑費', amount: 1500, month: '12月' },
{ type: '食費', amount: 3600, month: '12月' },
{ type: '日用品', amount: 900, month: '12月' },
{ type: '雑費', amount: 880, month: '11月' },
{ type: '食費', amount: 4500, month: '11月' },
{ type: '書籍', amount: 2700, month: '11月' },
{ type: '日用品', amount: 3000, month: '10月' },
{ type: '雑費', amount: 1500, month: '10月' },
{ type: '書籍', amount: 900, month: '9月' },
{ type: '日用品', amount: 2000, month: '9月' },
];
}
export function couponData() {
return [
{
descriptionL: 'お会計から,5%OFF', descriptionR: '食料品,10%OFF', iconL: cartIcon, iconR: cupIcon
},
{ descriptionL: '日用品,10%OFF', descriptionR: 'ポイント,5倍', iconL: basketIcon, iconR: pointCardIcon },
{ descriptionL: '書籍,15%OFF', descriptionR: 'お会計から,500円OFF', iconL: bookIcon, iconR: yenIcon },
];
}
body {
font-family: sans-serif;
font-size: 14px;
margin: 50px 15px;
}
.mobile {
height: 480px;
width: 310px;
margin: 0 auto 0;
border: 1px solid #cfd8df;
background-color: black;
border-radius: 50px;
}
.display {
margin-top: 35px;
height: 83.5%;
width: 91%;
margin-left: 13px;
border-radius: 40px;
border: 1px solid #cfd8df;
background-color: #fff;
justify-content: center;
display: flex;
}
.point-scroll {
justify-content: center;
display: flex;
margin-top: 10%;
height: 190px;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.gauge-area {
margin-top: -8.1%;
}
.point-scroll::-webkit-scrollbar,
.history-area::-webkit-scrollbar,
.couponArea::-webkit-scrollbar {
display: none;
}
#pointGauge {
width: 65%;
height: 65%;
margin-left: 18%;
}
.gauge-description {
position: relative;
top: 30%;
font-size: 13px;
text-align: center;
color: #0085c7;
}
.gauge-description2 {
position: relative;
top: -33%;
font-size: 11px;
text-align: center;
color: #0085c7;
}
table,
td {
border: 1px solid #333;
border-collapse: collapse;
border-color: lightgrey;
}
thead {
background-color: #0085c7;
color: #fff;
}
.card {
display: flex;
justify-content: center;
}
.tile-content {
height: 120px;
width: 100%;
border: 1px solid #e0e0e0;
border-radius: 10px;
background: linear-gradient(to right, #96c7eb, #b5d5eb);
}
.content {
margin-left: 10%;
}
#nw {
width: 90%;
}
.wj-gauge .wj-pointer {
fill: #66a2cc;
}
.wj-gauge .wj-value {
color: #66a2cc;
font-size: 200%;
}
.wj-tabpanel.tabs-below>div {
display: flex;
flex-direction: column;
align-items: stretch;
}
.wj-tabpanel.tabs-below .wj-tabheaders {
order: 1;
}
.wj-tabpanel.tabs-below .wj-tabpanes {
order: 0;
}
.wj-tabpanel.tabs-below .wj-tabheaders .wj-tabheader.wj-state-active:after {
top: 0;
bottom: unset;
}
#theTabPanel {
height: 90%;
margin-top: 5%;
width: 90%;
}
.chartarea {
margin-top: -10%;
margin-left: -2%;
}
#pointchart.wj-flexchart {
border: none;
height: 200px;
width: 280px;
}
.history-area {
justify-content: center;
margin-top: 10%;
height: 190px;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.tile .tile-container {
border-bottom: 1px solid #e0e0e0;
padding: 0.75rem 1rem;
}
.tile .tile-content2 {
padding: 0.75rem 1rem;
}
.tile {
width: 100%;
background: #f2f2f2;
border-radius: 10px;
margin-top: 10%;
margin-bottom: 5%;
}
.bold-font {
font-weight: bold;
}
.row-text {
margin-left: 23%;
}
.wj-gridline {
display: none;
}
.card-title {
font-size: 0.9rem;
color: white;
padding-left: 15px;
}
.digital-money {
height: 90%;
}
.balance {
padding-left: 14%;
padding-top: 15%;
display: flex;
flex-direction: row;
user-select: none;
}
.animation {
animation: fadein 1s ease-out forwards;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.wj-flexgrid,
.wj-flexgrid .wj-cell {
border: none;
}
.col-expired {
padding-left: 20px;
}
.col-point {
padding-right: 15px;
}
.color-white {
color: white;
}
.digital-money-font {
font-size: 2em;
margin-left: 5%;
}
.item-header {
font-weight: bold;
font-size: 100%;
text-align: left;
}
.item-detail1 {
text-align: right;
}
.item-detail1-1 {
margin-top: -9%;
}
.item-detail1-2 {
margin-top: 10%;
font-weight: bold;
font-size: 140%;
color: #0085c7;
}
.barcode-area {
margin-left: 4%;
margin-top: -22%;
}
.btn-area {
display: flex;
justify-content: flex-end;
margin-top: -5px;
font-size: larger;
}
.circle-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: 100%;
background-color: white;
border: 0.1px solid #0085c7;
}
.swicthIcon {
margin-top: -88%;
margin-left: -13%;
}
.wj-tabheader {
width: 33%;
}
.hide {
opacity: 0;
visibility: hidden;
transition: 0.8s;
}
.show {
transition: 0.8s;
opacity: 1;
visibility: visible;
}
.circle-btn:active {
background: #96c7eb;
color: #fff;
}
.box2 {
background-color: whitesmoke;
margin-top: 3px;
position: relative;
left: 45%;
width: 35px;
height: 35px;
border-radius: 50%;
}
#expensechart{
height: 230px;
}
#expensechart.wj-flexchart {
border: none;
}
.expensechartarea {
position: relative;
top: -10%;
}
#pointchart .wj-data-label {
font-size: 10px;
}
.wj-data-label {
font-size: 12px;
}
#theTabPanel.wj-tabpanel>div>.wj-tabheaders>.wj-tabheader {
padding: 8px 0px;
font-size: smaller;
}
.couponArea {
justify-content: center;
margin-top: 10%;
height: 310px;
width: 100%;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.barcodePopup {
position: relative;
top: 200px
}
.wj-multirow .wj-row .wj-cell.id {
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 5px;
width: 120px !important;
height: 130px !important;
font-size: 12.5px;
}
.wj-content {
border: none !important;
}
.couponIcon {
margin-top: 10px;
}
.wj-cells .wj-cell.wj-state-selected {
background: white !important;
color: black !important;
}
#theDialog {
display: flex;
flex-direction: column;
align-items: center;
width: 280px;
top: 150px !important;
margin-right: 4%;
}
#theDialog .wj-barcode-qrcode {
width: 180px;
height: 172px;
}
.couponText {}
.tabText {
font-size: smaller;
margin-top: -9px
}
.tab-icon{
margin-top: -3px;
}
.wj-tabheader{
height: 40px;
}
.wj-tabheaders{
margin-top: 3px;
}
.couponText1{
font-size: 11px;
}
.couponText2{
font-size:16px;
font-weight: bold;
}
.couponIcon{
margin-top: -5px;
}
.hartIcon{
margin-left: 80px;
}
.pointDescription{
margin-left: 20px;
}
.wj-glyph-left{
padding-right: 10px;
}
.header{
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
}
.h-center{
align-items: center;
}
.h-right{
align-items:end;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'jszip': 'npm:jszip/dist/jszip.js',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js',
'@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js',
'@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js',
'@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js',
'@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js',
'@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js',
'@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js',
'@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js',
'@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js',
'@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js',
'@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js',
'@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js',
'@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js',
'@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js',
'@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js',
'@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js',
'@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js',
'@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js',
'@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js',
'@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js',
'@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js',
'@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js',
'@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js',
'@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js',
'@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js',
'@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js',
'@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js',
'@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js',
'@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js',
'@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js',
'@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js',
'@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js',
'@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js',
'@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js',
'@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
