jennevdmeer · August 29, 2024 13:18
diff --git a/mysql_decimal.html b/mysql_decimal.html
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>(My)SQL decimal definition</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <style>
            html,
            body {
                min-height: 100vh;
            }
        </style>
    </head>
    <body class="flex flex-col">
        <div class="max-w-xl m-auto">
            <div class="flex flex-wrap gap-4">
                <fieldset class="flex flex-col grow">
                    <label for="precision" class="block order-first font-bold">Precision</label>
                    <input type="number" name="precision" id="precision" class="border rounded outline-0 invalid:border-red p-1" value="6" min="1" max="65">
                </fieldset>

                <fieldset class="flex flex-col grow">
                    <label for="scale" class="block order-first font-bold">Scale</label>
                    <input type="number" name="scale" id="scale" class="border rounded outline-0 invalid:border-red p-1" value="2" min="0" max="30">
                </fieldset>
            </div>

            <pre class="p-1 my-2 overflow-x-auto bg-slate-100" id="output_min"></pre>
            <pre class="p-1 my-2 overflow-x-auto bg-slate-100" id="output_max"></pre>
            <pre class="p-1 my-2 overflow-x-auto bg-slate-100" id="output_mysql"></pre>
            <pre class="p-1 my-2 overflow-x-auto bg-slate-100" id="output_doctrine"></pre>
        </div>

        <script>
            const scaleInput = document.getElementById('scale');
            const precisionInput = document.getElementById('precision');

            const minElement = document.getElementById('output_min');
            const maxElement = document.getElementById('output_max');
            const mysqlElement = document.getElementById('output_mysql');
            const doctrineElement = document.getElementById('output_doctrine');

            const example = (new Intl.NumberFormat()).format('1000.1');
            const thousandsSeparator = example[1];
            const decimalSeparator = example[5];

            function update() {
                const precision = parseInt(precisionInput.value);
                const scale = parseInt(scaleInput.value);

                let minInteger = addThousandsSeparator('9'.repeat(precision - scale));
                let minDecimal = '9'.repeat(scale);

                let maxInteger = addThousandsSeparator('9'.repeat(precision - scale));
                let maxDecimal = '9'.repeat(scale);

                // If precision is equal to scale, then integer value is 0
                if (precision === scale) {
                    minInteger = 0;
                    maxInteger = 0;
                }

                let min = '-' + minInteger;
                if (scale > 0) {
                    min += decimalSeparator + minDecimal;
                }

                minElement.textContent = `${min}`;

                let max = maxInteger;
                if (scale > 0) {
                    max += decimalSeparator + maxDecimal;
                }

                maxElement.textContent = `${max}`;

                mysqlElement.textContent = `DECIMAL(${precision}, ${scale})`;
                doctrineElement.textContent = `#[ORM\\Column(type: 'decimal', precision: ${precision}, scale: ${scale})]`;
            }

            function addThousandsSeparator(value) {
                const splits = [];
                while (value.length) {
                    splits.push(value.slice(-3));
                    value = value.slice(0, -3);
                }

                return splits.reverse().join(thousandsSeparator);
            }

            precisionInput.addEventListener('input', e => {
                const precisionValue = parseInt(precisionInput.value, 10);
                const scaleValue = parseInt(scaleInput.value, 10);

                if (scaleValue > precisionValue) {
                    scaleInput.value = precisionValue;
                }

                update();
            });


            scaleInput.addEventListener('input', e => {
                const precisionValue = parseInt(precisionInput.value, 10);
                const scaleValue = parseInt(scaleInput.value, 10);

                if (scaleValue > precisionValue) {
                    precisionInput.value = scaleValue;
                }

                update();
            });

            update();
        </script>
    </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>(My)SQL decimal definition</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
	html,
	body {
	min-height: 100vh;
	}
	</style>
	</head>
	<body class="flex flex-col">
	<div class="max-w-xl m-auto">
	<div class="flex flex-wrap gap-4">
	<fieldset class="flex flex-col grow">
	<label for="precision" class="block order-first font-bold">Precision</label>
	<input type="number" name="precision" id="precision" class="border rounded outline-0 invalid:border-red p-1" value="6" min="1" max="65">
	</fieldset>

	<fieldset class="flex flex-col grow">
	<label for="scale" class="block order-first font-bold">Scale</label>
	<input type="number" name="scale" id="scale" class="border rounded outline-0 invalid:border-red p-1" value="2" min="0" max="30">
	</fieldset>
	</div>

	<pre class="p-1 my-2 overflow-x-auto bg-slate-100" id="output_min"></pre>
	<pre class="p-1 my-2 overflow-x-auto bg-slate-100" id="output_max"></pre>
	<pre class="p-1 my-2 overflow-x-auto bg-slate-100" id="output_mysql"></pre>
	<pre class="p-1 my-2 overflow-x-auto bg-slate-100" id="output_doctrine"></pre>
	</div>

	<script>
	const scaleInput = document.getElementById('scale');
	const precisionInput = document.getElementById('precision');

	const minElement = document.getElementById('output_min');
	const maxElement = document.getElementById('output_max');
	const mysqlElement = document.getElementById('output_mysql');
	const doctrineElement = document.getElementById('output_doctrine');

	const example = (new Intl.NumberFormat()).format('1000.1');
	const thousandsSeparator = example[1];
	const decimalSeparator = example[5];

	function update() {
	const precision = parseInt(precisionInput.value);
	const scale = parseInt(scaleInput.value);

	let minInteger = addThousandsSeparator('9'.repeat(precision - scale));
	let minDecimal = '9'.repeat(scale);

	let maxInteger = addThousandsSeparator('9'.repeat(precision - scale));
	let maxDecimal = '9'.repeat(scale);

	// If precision is equal to scale, then integer value is 0
	if (precision === scale) {
	minInteger = 0;
	maxInteger = 0;
	}

	let min = '-' + minInteger;
	if (scale > 0) {
	min += decimalSeparator + minDecimal;
	}

	minElement.textContent = `${min}`;

	let max = maxInteger;
	if (scale > 0) {
	max += decimalSeparator + maxDecimal;
	}

	maxElement.textContent = `${max}`;

	mysqlElement.textContent = `DECIMAL(${precision}, ${scale})`;
	doctrineElement.textContent = `#[ORM\\Column(type: 'decimal', precision: ${precision}, scale: ${scale})]`;
	}

	function addThousandsSeparator(value) {
	const splits = [];
	while (value.length) {
	splits.push(value.slice(-3));
	value = value.slice(0, -3);
	}

	return splits.reverse().join(thousandsSeparator);
	}

	precisionInput.addEventListener('input', e => {
	const precisionValue = parseInt(precisionInput.value, 10);
	const scaleValue = parseInt(scaleInput.value, 10);

	if (scaleValue > precisionValue) {
	scaleInput.value = precisionValue;
	}

	update();
	});


	scaleInput.addEventListener('input', e => {
	const precisionValue = parseInt(precisionInput.value, 10);
	const scaleValue = parseInt(scaleInput.value, 10);

	if (scaleValue > precisionValue) {
	precisionInput.value = scaleValue;
	}

	update();
	});

	update();
	</script>
	</body>
	</html>