Create the initial version of the TableManager class for configuring settings
This commit is contained in:
parent
4bfce858ef
commit
8a2d946b63
21 changed files with 718 additions and 115 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
63
public/styles/Apps/TableManager.css
Normal file
63
public/styles/Apps/TableManager.css
Normal 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%;
|
||||
}
|
||||
}
|
||||
21
public/styles/Apps/common.css
Normal file
21
public/styles/Apps/common.css
Normal 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;
|
||||
}
|
||||
}
|
||||
5
public/styles/elements/span.css
Normal file
5
public/styles/elements/span.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.stat-tracker span {
|
||||
&.large {
|
||||
font-size: var(--font-size-24);
|
||||
}
|
||||
}
|
||||
13
public/styles/elements/string-tags.css
Normal file
13
public/styles/elements/string-tags.css
Normal 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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
7
public/templates/Apps/TableManager/buckets/empty.hbs
Normal file
7
public/templates/Apps/TableManager/buckets/empty.hbs
Normal 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>
|
||||
57
public/templates/Apps/TableManager/buckets/number.hbs
Normal file
57
public/templates/Apps/TableManager/buckets/number.hbs
Normal 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>
|
||||
50
public/templates/Apps/TableManager/buckets/range.hbs
Normal file
50
public/templates/Apps/TableManager/buckets/range.hbs
Normal 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>
|
||||
17
public/templates/Apps/TableManager/buckets/string.hbs
Normal file
17
public/templates/Apps/TableManager/buckets/string.hbs
Normal 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>
|
||||
5
public/templates/Apps/TableManager/submit.hbs
Normal file
5
public/templates/Apps/TableManager/submit.hbs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<button
|
||||
type="submit"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue