Files
lubelog/Views/Shared/_Layout.cshtml
2025-05-16 13:44:53 -06:00

177 lines
8.1 KiB
Plaintext

@using CarCareTracker.Helper
@using System.Globalization
<!DOCTYPE html>
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
var userConfig = config.GetUserConfig(User);
var useDarkMode = userConfig.UseDarkMode;
var useSystemColorMode = userConfig.UseSystemColorMode;
var enableCsvImports = userConfig.EnableCsvImports;
var useMPG = userConfig.UseMPG;
var useMarkDown = userConfig.UseMarkDownOnSavedNotes;
var useThreeDecimals = userConfig.UseThreeDecimalGasCost;
var automaticDecimalFormat = userConfig.AutomaticDecimalFormat;
var shortDatePattern = CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern;
var firstDayOfWeek = (int)CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek;
var numberFormat = CultureInfo.CurrentCulture.NumberFormat;
var userLanguage = userConfig.UserLanguage;
shortDatePattern = shortDatePattern.ToLower();
if (!shortDatePattern.Contains("dd"))
{
shortDatePattern = shortDatePattern.Replace("d", "dd");
}
if (!shortDatePattern.Contains("mm"))
{
shortDatePattern = shortDatePattern.Replace("m", "mm");
}
}
<html lang="en" data-bs-theme="@(useDarkMode ? "dark" : "light")">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-title" content="LubeLogger" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>@ViewData["Title"] - LubeLogger</title>
<link rel="icon" type="image/x-icon" href="~/favicon.ico">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap-icons.css" />
<link rel="stylesheet" href="~/lib/bootstrap-datepicker/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.css" />
<link rel="stylesheet" href="~/css/site.css"/>
<link rel="stylesheet" href="~/css/loader.css"/>
<link rel="stylesheet" href="~/sweetalert/sweetalert2.min.css"/>
<link rel="icon" sizes="192x192" href="~/defaults/lubelogger_icon_192.png" />
<link rel="icon" sizes="128x128" href="~/defaults/lubelogger_icon_128.png" />
<link rel="apple-touch-icon" sizes="128x128" href="~/defaults/lubelogger_icon_128.png" />
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="~/defaults/lubelogger_icon_128.png" />
<link rel="apple-touch-startup-image" href="~/defaults/lubelogger_launch.png" />
<link rel="manifest" href="~/manifest.json">
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/shared.js?v=@StaticHelper.VersionNumber"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="~/lib/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script src="~/sweetalert/sweetalert2.all.min.js"></script>
<script src="~/js/loader.js?v=@StaticHelper.VersionNumber"></script>
<script>
function getGlobalConfig() {
return {
useDarkMode: "@useDarkMode" == "True" || ("@useSystemColorMode" == "True" && window.matchMedia('(prefers-color-scheme: dark)').matches),
enableCsvImport : "@enableCsvImports" == "True",
useMarkDown: "@useMarkDown" == "True",
currencySymbol: decodeHTMLEntities("@numberFormat.CurrencySymbol"),
useThreeDecimals: "@useThreeDecimals" == "True",
useMPG: "@useMPG" == "True",
firstDayOfWeek: @firstDayOfWeek
}
}
function getShortDatePattern() {
return {
pattern: "@shortDatePattern"
}
}
function globalParseFloat(input){
//remove thousands separator.
var thousandSeparator = decodeHTMLEntities("@numberFormat.NumberGroupSeparator");
var decimalSeparator = decodeHTMLEntities("@numberFormat.NumberDecimalSeparator");
var currencySymbol = decodeHTMLEntities("@numberFormat.CurrencySymbol");
if (input == "---") {
input = "0";
}
//strip thousands from input.
input = input.replace(thousandSeparator, "");
//convert to JS format where decimal is only separated by .
input = input.replace(decimalSeparator, ".");
//remove any currency symbol
input = input.replace(currencySymbol, "");
return parseFloat(input);
}
function globalFloatToString(input) {
var decimalSeparator = decodeHTMLEntities("@numberFormat.NumberDecimalSeparator");
input = input.replace(".", decimalSeparator);
return input;
}
function fixDecimalInput(input, numOfDecimals) {
if ("@automaticDecimalFormat" == "True") {
//get the decimal separator.
var decimalSeparator = decodeHTMLEntities("@numberFormat.NumberDecimalSeparator");
var inputText = $(input).val().trim();
inputText = inputText.replace(decimalSeparator, '');
inputText = +inputText;
if (isNaN(inputText)){
return;
}
inputText = inputText.toString();
if (inputText == '') {
return;
};
//check number of decimals.
if (inputText.length <= numOfDecimals) {
//less than number of decimals, assume everything is behind the decimal.
inputText = `0${decimalSeparator}${inputText}`; //add leading zero.
$(input).val(inputText);
} else {
//check if leading zero
var charToSlice = numOfDecimals * -1;
var charsBehindDecimal = inputText.slice(charToSlice);
var charsFrontDecimal = inputText.substr(0, inputText.length - numOfDecimals);
inputText = `${charsFrontDecimal}${decimalSeparator}${charsBehindDecimal}`;
$(input).val(inputText);
}
}
}
function interceptDecimalKeys(event) {
if ("@automaticDecimalFormat" == "True") {
if (event.which == 190 || event.which == 188) {
event.preventDefault(); //intercept keys.
}
}
}
function genericErrorMessage(){
return decodeHTMLEntities('@translator.Translate(userLanguage, "An error has occurred, please try again later")');
}
function globalAppendCurrency(input){
//check currency symbol position
var currencySymbolPosition = "@numberFormat.CurrencyPositivePattern";
var currencySymbol = decodeHTMLEntities("@numberFormat.CurrencySymbol");
switch (currencySymbolPosition) {
case "0":
return `${currencySymbol}${input}`;
break;
case "1":
return `${input}${currencySymbol}`;
break;
case "2":
return `${currencySymbol} ${input}`;
break;
case "3":
return `${input} ${currencySymbol}`;
break;
}
}
function setThemeBasedOnDevice() {
var systemPrefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (systemPrefersDarkMode) {
$(document.documentElement).attr("data-bs-theme", "dark");
}
}
</script>
@await RenderSectionAsync("Scripts", required: false)
</head>
<body>
@await RenderSectionAsync("Nav", required: false)
<div class="container" style="height:85vh;">
<main role="main">
@RenderBody()
</main>
</div>
</body>
</html>
@if (useSystemColorMode)
{
<script>
setThemeBasedOnDevice();
</script>
}