Create the initial version of the TableManager class for configuring settings

This commit is contained in:
Oliver-Akins 2025-05-11 17:24:09 -06:00
parent 4bfce858ef
commit 8a2d946b63
21 changed files with 718 additions and 115 deletions

View file

@ -3,16 +3,6 @@
gap: 1rem;
}
[data-application-part="tableSelect"] {
display: flex;
flex-direction: row;
gap: 1rem;
> div {
width: 100%;
}
}
[data-application-part="dataFilters"] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@ -25,10 +15,4 @@
justify-items: center;
position: relative;
}
.control-group {
display: flex;
flex-direction: column;
gap: 2px;
}
}

View file

@ -0,0 +1,63 @@
.stat-tracker.TableManager {
min-width: 400px;
min-height: 200px;
max-height: initial;
.window-content {
gap: 1rem;
}
[data-application-part="buckets"] {
display: flex;
flex-direction: column;
gap: 0.5rem;
height: auto;
flex-grow: 1;
}
.alert-box {
border-width: 2px;
border-style: dashed;
border-radius: 8px;
box-sizing: border-box;
padding: 1rem;
&.warning {
background: color(from var(--color-level-warning-bg) srgb r g b / 0.1);
border-color: var(--color-level-warning);
}
&.locked {
margin: -0.5rem;
padding: 0.5rem;
border-color: var(--color-level-error);
background: color(from var(--color-level-error-bg) srgb r g b / 0.25);
}
}
.center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.input-group {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
align-items: center;
.hint {
grid-column: 1 / -1;
}
}
.flex-fill {
flex-grow: 1;
margin-bottom: -0.5rem;
}
.save {
width: 100%;
}
}

View file

@ -0,0 +1,21 @@
.stat-tracker {
[data-application-part="tableSelect"] {
display: flex;
flex-direction: row;
gap: 1rem;
> div {
width: 100%;
}
}
.control-group {
display: flex;
flex-direction: column;
gap: 2px;
}
.st-scrollable {
overflow: auto;
}
}

View file

@ -0,0 +1,5 @@
.stat-tracker span {
&.large {
font-size: var(--font-size-24);
}
}

View file

@ -0,0 +1,13 @@
.stat-tracker string-tags {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px;
> .tags {
grid-column: 1 / -1;
}
> button {
height: 100%;
}
}

View file

@ -1,7 +1,12 @@
@layer resets, elements, components, apps, exceptions;
@layer resets, elements, components, partials, apps, exceptions;
@import url("./elements/custom-multi-select.css") layer(elements);
@import url("./elements/string-tags.css") layer(elements);
@import url("./elements/span.css") layer(elements);
@import url("./Apps/common.css") layer(partials);
@import url("./Apps/StatsViewer.css") layer(apps);
@import url("./Apps/StatsSidebar.css") layer(apps);
@import url("./Apps/TableCreator.css") layer(apps);
@import url("./Apps/TableCreator.css") layer(apps);
@import url("./Apps/TableManager.css") layer(apps);

View file

@ -0,0 +1,7 @@
<div class="alert-box warning center">
{{#if table}}
<span class="large">Select a Subtable</span>
{{else}}
<span class="large">Select a Table</span>
{{/if}}
</div>

View file

@ -0,0 +1,57 @@
<div class="{{#if buckets.locked}}alert-box locked{{/if}}">
{{#if buckets.locked}}
<p class="center">
This bucket configuration has been locked, preventing editing
of the settings.
</p>
{{/if}}
<div class="input-group">
<label for="{{meta.idp}}-min">
Minimum
</label>
<input
id="{{meta.idp}}-min"
type="number"
name="buckets.min"
value="{{ buckets.min }}"
{{disabled buckets.locked}}
>
<p class="hint">
The minimum allowed value. Leave empty for no minimum.
</p>
</div>
<div class="input-group">
<label for="{{meta.idp}}-max">
Maximum
</label>
<input
id="{{meta.idp}}-max"
type="number"
name="buckets.max"
value="{{ buckets.max }}"
{{disabled buckets.locked}}
>
<p class="hint">
The maximum allowed value. Leave empty for no maximum.
</p>
</div>
<div class="input-group">
<label for="{{meta.idp}}-step">
Step
</label>
<input
id="{{meta.idp}}-min"
type="number"
name="buckets.step"
value="{{ buckets.step }}"
minimum="1"
placeholder="1"
{{disabled buckets.locked}}
>
<p class="hint">
The step value, if a minimum is not provided this will not be
saved and the existing value will be removed from the saved
configuration.
</p>
</div>
</div>

View file

@ -0,0 +1,50 @@
<div class="{{#if buckets.locked}}alert-box locked{{/if}}">
{{#if buckets.locked}}
<p class="center">
This bucket configuration has been locked, preventing editing
of the settings.
</p>
{{/if}}
<div class="input-group">
<label for="{{meta.idp}}-min">
Minimum
</label>
<input
id="{{meta.idp}}-min"
type="number"
name="buckets.min"
value="{{ buckets.min }}"
required
{{disabled buckets.locked}}
>
</div>
<div class="input-group">
<label for="{{meta.idp}}-max">
Maximum
</label>
<input
id="{{meta.idp}}-max"
type="number"
name="buckets.max"
value="{{ buckets.max }}"
required
{{disabled buckets.locked}}
>
</div>
<div class="input-group">
<label for="{{meta.idp}}-step">
Step
</label>
<input
id="{{meta.idp}}-step"
type="number"
name="buckets.step"
value="{{ buckets.step }}"
required
{{disabled buckets.locked}}
>
<p class="hint">
The size of the step between values within the range.
</p>
</div>
</div>

View file

@ -0,0 +1,17 @@
<div class="{{#if buckets.locked}}alert-box locked{{/if}}">
<div class="input-group">
<label for="">
Valid Options
</label>
<string-tags
name="buckets.choices"
value="{{ buckets.choices }}"
></string-tags>
<p class="hint">
These are the only values that are allowed to be provided to
the database and are case-sensitive. Leave this empty to
allow any string to be valid. Empty strings are never valid and
extra spaces are removed the start and end of the options.
</p>
</div>
</div>

View file

@ -0,0 +1,5 @@
<button
type="submit"
>
Save
</button>

View file

@ -7,6 +7,7 @@
id="{{meta.idp}}-selected-table"
data-bind="_selectedTable"
>
<option value="">Select a Table</option>
{{ st-options table tables }}
</select>
</div>
@ -19,6 +20,7 @@
id="{{meta.idp}}-selected-subtable"
data-bind="_selectedSubtable"
>
<option value="">Select a Subtable</option>
{{ st-options subtable subtables }}
</select>
</div>