Support custom date and time formats
Anton
parent
16d4911972
commit
fce8ef2d12
|
|
@ -3,8 +3,9 @@
|
|||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||||
<style>
|
||||
table { width:100%;}
|
||||
.table_t {font-weight:bold;width:40%;};
|
||||
table {width:100%;margin-top:3%;}
|
||||
.table_t {font-weight:bold;width:40%;}
|
||||
.form-group > * {display:block;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -15,13 +16,15 @@
|
|||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input id="translations" type="checkbox" /> <label for="translations">Add common language translations like "Yes", "No", "On", "Off"<br/><i>(Not recommended. For translations use the option under <code>More...</code> in the app loader.</i></label>
|
||||
<label><input id="translations" type="checkbox" /> Add common language translations like "Yes", "No", "On", "Off"<br/><i>(Not recommended. For translations use the option under <code>More...</code> in the app loader.</i></label>
|
||||
<label><input id="customize" type="checkbox" /> Advanced: Customize the date and time formats.</label>
|
||||
</div>
|
||||
<p>
|
||||
<table id="examples">
|
||||
<span id="customize-warning"></span>
|
||||
<table id="examples-short-long"></table>
|
||||
<table id="examples"></table>
|
||||
</p>
|
||||
|
||||
</table>
|
||||
<p>Then click <button id="upload" class="btn btn-primary">Upload</button></p>
|
||||
|
||||
<script src="../../core/lib/customize.js"></script>
|
||||
|
|
@ -125,15 +128,14 @@ exports = { name : "system", currencySym:"£",
|
|||
});
|
||||
|
||||
|
||||
function createLocaleModule(lang) {
|
||||
function createLocaleModule() {
|
||||
console.log(`Language ${lang}`);
|
||||
|
||||
const translations = document.getElementById('translations').checked;
|
||||
console.log(`Translations: ${translations}`);
|
||||
|
||||
const locale = locales[lang];
|
||||
if (!locale) {
|
||||
alert(`Language ${lang} not found!`);
|
||||
alert(`Locale not set for language ${lang}!`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -185,16 +187,10 @@ exports = { name : "system", currencySym:"£",
|
|||
"%P": `d.getHours()<12?${js(locale.ampm[0].toLowerCase())}:${js(locale.ampm[1].toLowerCase())}`
|
||||
};
|
||||
|
||||
var timeN = locale.timePattern[0];
|
||||
var timeS = locale.timePattern[1];
|
||||
var dateN = locale.datePattern[0];
|
||||
var dateS = locale.datePattern[1];
|
||||
Object.keys(replaceList).forEach(e => {
|
||||
timeN = timeN.replace(e,"${"+replaceList[e]+"}");
|
||||
timeS = timeS.replace(e,"${"+replaceList[e]+"}");
|
||||
dateN = dateN.replace(e,"${"+replaceList[e]+"}");
|
||||
dateS = dateS.replace(e,"${"+replaceList[e]+"}");
|
||||
});
|
||||
var timeN = patternToCode(locale.timePattern[0]);
|
||||
var timeS = patternToCode(locale.timePattern[1]);
|
||||
var dateN = patternToCode(locale.datePattern[0]);
|
||||
var dateS = patternToCode(locale.datePattern[1]);
|
||||
var temperature = locale.temperature=='°F' ? '(t*9/5)+32' : 't';
|
||||
|
||||
function getLocaleModule(isLocal) {
|
||||
|
|
@ -246,22 +242,121 @@ exports = {
|
|||
eval(getLocaleModule(true));
|
||||
console.log("exports:",exports);
|
||||
|
||||
function patternToCode(pattern){
|
||||
for(const symbol of Object.keys(replaceList)){
|
||||
pattern = pattern.replaceAll(symbol,"${"+replaceList[symbol]+"}");
|
||||
}
|
||||
return pattern;
|
||||
}
|
||||
function patternToOutput(pattern){
|
||||
const code = patternToCode(pattern);
|
||||
const result = eval(`let d = new Date();\`${code}\``);
|
||||
return result;
|
||||
}
|
||||
function dataList(id, options, formatter){
|
||||
let output = `<datalist id="${id}">`;
|
||||
for(const option of options){
|
||||
const formatted = formatter?.(option) || option;
|
||||
output+=`\n<option value="${option}">${formatted}</option>`
|
||||
}
|
||||
output += "\n</datalist>";
|
||||
return output;
|
||||
}
|
||||
|
||||
var date = new Date();
|
||||
document.getElementById("examples").innerHTML = `
|
||||
// TODO: This warning should have a link to an article explaining how the formats work, and how long they are allowed to be
|
||||
document.getElementById("customize-warning").innerText = customizeLocale ? "⚠️ If you make the formats too long, some apps will not work!" : "";
|
||||
document.getElementById("examples-short-long").innerHTML = `
|
||||
<tr><td class="table_t"></td><td style="font-weight:bold">Short</td><td style="font-weight:bold">Long</td></tr>
|
||||
<tr><td class="table_t">Day</td><td>${exports.dow(date,1)}</td><td>${exports.dow(date,0)}</td></tr>
|
||||
<tr><td class="table_t">Month</td><td>${exports.month(date,1)}</td><td>${exports.month(date,0)}</td></tr>
|
||||
<tr><td class="table_t">Date</td><td>${exports.date(date,1)}</td><td>${exports.date(date,0)}</td></tr>
|
||||
<tr><td class="table_t">Time</td><td>${exports.time(date,1)}</td><td>${exports.time(date,0)}</td></tr>
|
||||
<tr><td class="table_t">Date</td>
|
||||
<td id="short-date-pattern-output">${exports.date(date,1)}</td>
|
||||
<td id="long-date-pattern-output">${exports.date(date,0)}</td>
|
||||
</tr>
|
||||
${customizeLocale ? `<tr><td class="table_t">Date format</td>
|
||||
<td>
|
||||
<input type=text id="short-date-pattern" list="short-date-patterns" value="${locale?.datePattern["1"]}"/>
|
||||
${dataList("short-date-patterns", [locale?.datePattern["1"], "%-d.%-m.%y", "%-d/%-m/%y", "%d/%m/%Y"], patternToOutput)}
|
||||
</td>
|
||||
<td>
|
||||
<input type=text id="long-date-pattern" list="long-date-patterns" value="${locale?.datePattern["0"]}"/>
|
||||
${dataList("long-date-patterns", [locale?.datePattern["0"], "%-d. %b %Y", "%b %d, %Y"], patternToOutput)}
|
||||
</td>
|
||||
</td>`
|
||||
: ""}
|
||||
<tr><td class="table_t">Time</td>
|
||||
<td id="short-time-pattern-output">${exports.time(date,1)}</td>
|
||||
<td id="long-time-pattern-output">${exports.time(date,0)}</td>
|
||||
</tr>
|
||||
${customizeLocale ? `<tr><td class="table_t">Time format</td>
|
||||
<td>
|
||||
<input type=text id="short-time-pattern" list="short-time-patterns" value="${locale?.timePattern["1"]}"/>
|
||||
${dataList("short-time-patterns", [ "%HH.%MM", "%HH:%MM"], patternToOutput)}
|
||||
</td>
|
||||
<td>
|
||||
<input type=text id="long-time-pattern" list="long-time-patterns" value="${locale?.timePattern["0"]}"/>
|
||||
${dataList("long-time-patterns", [locale?.timePattern["0"], "%HH.%MM.%SS", "%HH:%MM:%SS"], patternToOutput)}
|
||||
</td>
|
||||
</td>`
|
||||
: ""}
|
||||
<tr><td class="table_t">Number</td><td>${exports.number(12.3456789)}</td><td>${exports.number(12.3456789,4)}</td></tr>
|
||||
<tr><td class="table_t">Distance</td><td>${exports.distance(12.34,0)}</td><td>${exports.distance(12345.6,1)}</td></tr>
|
||||
<tr><td class="table_t">Speed</td><td></td><td>${exports.speed(123)}</td></tr>
|
||||
<tr><td class="table_t">Temperature</td><td></td><td>${exports.temp(12,0)}</td></tr>
|
||||
`;
|
||||
document.getElementById("examples").innerHTML = `
|
||||
<tr><td class="table_t">Meridian</td><td>
|
||||
<span id="meridian-am-output">${exports.meridian(new Date(0))}</span> /
|
||||
<span id="meridian-pm-output">${exports.meridian(new Date(43200000))}</span>
|
||||
</td></tr>
|
||||
${customizeLocale ? `<tr><td class="table_t">Meridian names</td>
|
||||
<td>
|
||||
<input type=text id="meridian-am" list="meridian-ams" value="${locale?.ampm["0"]}"/>
|
||||
${dataList("meridian-ams", [locale?.ampm["0"], "AM"])}
|
||||
</td>
|
||||
<td>
|
||||
<input type=text id="meridian-pm" list="meridian-pms" value="${locale?.ampm["1"]}"/>
|
||||
${dataList("meridian-pms", [locale?.ampm["1"], "PM"])}
|
||||
</td>
|
||||
</tr>`
|
||||
: ""}
|
||||
<tr><td class="table_t">Speed</td><td>${exports.speed(123)}</td></tr>
|
||||
<tr><td class="table_t">Temperature</td><td>${exports.temp(12,0)}</td></tr>
|
||||
`;
|
||||
|
||||
if(customizeLocale){
|
||||
document.querySelector("input#short-date-pattern").addEventListener("input", event => {
|
||||
locale.datePattern["1"] = event.target.value;
|
||||
document.querySelector("td#short-date-pattern-output").innerText = patternToOutput(event.target.value);
|
||||
});
|
||||
document.querySelector("input#long-date-pattern").addEventListener("input", event => {
|
||||
locale.datePattern["0"] = event.target.value;
|
||||
document.querySelector("td#long-date-pattern-output").innerText = patternToOutput(event.target.value);
|
||||
});
|
||||
document.querySelector("input#short-time-pattern").addEventListener("input", event => {
|
||||
locale.timePattern["1"] = event.target.value;
|
||||
document.querySelector("td#short-time-pattern-output").innerText = patternToOutput(event.target.value);
|
||||
});
|
||||
document.querySelector("input#long-time-pattern").addEventListener("input", event => {
|
||||
locale.timePattern["0"] = event.target.value;
|
||||
document.querySelector("td#long-time-pattern-output").innerText = patternToOutput(event.target.value);
|
||||
});
|
||||
document.querySelector("input#meridian-am").addEventListener("input", event => {
|
||||
locale.ampm["0"] = event.target.value;
|
||||
document.querySelector("span#meridian-am-output").innerText = event.target.value;
|
||||
});
|
||||
document.querySelector("input#meridian-pm").addEventListener("input", event => {
|
||||
locale.ampm["1"] = event.target.value;
|
||||
document.querySelector("span#meridian-pm-output").innerText = event.target.value;
|
||||
});
|
||||
}
|
||||
return getLocaleModule(false);
|
||||
}
|
||||
|
||||
var lang;
|
||||
var locale;
|
||||
var customizeLocale;
|
||||
var languageSelector = document.getElementById("languages");
|
||||
var customizeSelector = document.getElementById('customize');
|
||||
languageSelector.innerHTML = Object.keys(locales).map(l=>{
|
||||
var locale = locales[l];
|
||||
var localeParts = l.split("_"); // en_GB -> ["en","GB"]
|
||||
|
|
@ -274,18 +369,25 @@ exports = {
|
|||
return `<option value="${l}">${icon}${l}${locale.notes?" - "+locale.notes:""}</option>`
|
||||
}).join("\n");
|
||||
languageSelector.addEventListener('change', function() {
|
||||
const lang = languageSelector.options[languageSelector.selectedIndex].value;
|
||||
createLocaleModule(lang);
|
||||
lang = languageSelector.options[languageSelector.selectedIndex].value;
|
||||
locale = locales[lang]
|
||||
createLocaleModule();
|
||||
});
|
||||
customizeSelector.addEventListener('change', function() {
|
||||
customizeLocale = customizeSelector.checked;
|
||||
createLocaleModule();
|
||||
});
|
||||
// initial value
|
||||
createLocaleModule(languageSelector.options[languageSelector.selectedIndex].value);
|
||||
lang = languageSelector.options[languageSelector.selectedIndex].value;
|
||||
locale = locales[lang];
|
||||
customizeLocale = false;
|
||||
createLocaleModule();
|
||||
|
||||
|
||||
|
||||
document.getElementById("upload").addEventListener("click", function() {
|
||||
|
||||
const lang = languageSelector.options[languageSelector.selectedIndex].value;
|
||||
var localeModule = createLocaleModule(lang);
|
||||
var localeModule = createLocaleModule();
|
||||
|
||||
console.log("Locale Module is:",localeModule);
|
||||
sendCustomizedApp({
|
||||
|
|
|
|||
Loading…
Reference in New Issue