forked from fixin.me/fixin.me
Compare commits
9 Commits
fix/measur
...
feature/ex
| Author | SHA1 | Date | |
|---|---|---|---|
| 3e0f27b357 | |||
| d893e59293 | |||
| 33004f62bd | |||
| 687e6fcdff | |||
| 5ed066ad18 | |||
| dde4e52f1b | |||
| a9091d76a8 | |||
| 4175d31b9d | |||
| c659201904 |
34
DESIGN.md
Normal file
34
DESIGN.md
Normal file
@@ -0,0 +1,34 @@
|
||||
DESIGN
|
||||
======
|
||||
|
||||
Below is a list of design decisions. The justification is to be consulted
|
||||
whenever a change is considered, to avoid regressions.
|
||||
|
||||
### Data type for DB storage of numeric values (`decimal` vs `float`)
|
||||
|
||||
* among database engines supported (by Rails), SQLite offers storage of
|
||||
`decimal` data type with the lowest precision, equal to the precision of
|
||||
`REAL` type (double precision float value, IEEE 754), but in a floating point
|
||||
format,
|
||||
* decimal types in other database engines offer greater precision, but store
|
||||
data in a fixed point format,
|
||||
* biology-related values differ by several orders of magnitude; storing them in
|
||||
fixed point format would only make sense if required precision would be
|
||||
greater than that offered by floating point format,
|
||||
* even then, fixed point would mean either bigger memory requirements or
|
||||
worse precision for numbers close to scale limit,
|
||||
* for a fixed point format to use the same 8 bytes of storage as IEEE
|
||||
754, precision would need to be limited to 18 digits (4 bytes/9 digits)
|
||||
and scale approximately half of that - 9,
|
||||
* double precision floating point guarantees 15 digits of precision, which
|
||||
is more than enough for all expected use cases,
|
||||
* single precision floating point only guarntees 6 digits of precision,
|
||||
which is estimated to be too low for some use cases (e.g. storing
|
||||
latitude/longitude with a resolution grater than 100m)
|
||||
* double precision floating point (IEEE 754) is a standard that ensures
|
||||
compatibility with all database engines,
|
||||
* the same data format is used internally by Ruby as a `Float`; it
|
||||
guarantees no conversions between storage and computation,
|
||||
* as a standard with hardware implementations ensures both: computing
|
||||
efficiency and hardware/3rd party library compatibility as opposed to Ruby
|
||||
custom `BigDecimal` type
|
||||
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" /></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 167 B After Width: | Height: | Size: 152 B |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path fill="#ffffff" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="icon" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" /></svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 293 B After Width: | Height: | Size: 278 B |
@@ -18,10 +18,12 @@
|
||||
/* Strive for simplicity:
|
||||
* * style elements/tags only - if possible,
|
||||
* * replace element/tag name with class name - if element has to be styled
|
||||
* differently depending on context (e.g. form)
|
||||
* differently depending on context (e.g. <form>, <table>, <a> as link/button),
|
||||
* * styles with multiple selectors should have all selectors with same
|
||||
* specificity, to allow proper rule specificity vs order management.
|
||||
*
|
||||
* NOTE: Style in a modular way, similar to how CSS @scope would be used,
|
||||
* to make transition easier once @scope is widely available */
|
||||
* NOTE: style in a modular way, similar to how CSS @scope would be used,
|
||||
* to make transition easier once @scope is widely available. */
|
||||
:root {
|
||||
--color-focus-gray: #f3f3f3;
|
||||
--color-border-gray: #dddddd;
|
||||
@@ -53,17 +55,36 @@
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
/* NOTE: move to higher priority layer instead of using !important?; add CSS
|
||||
* @layer requirements in README */
|
||||
[disabled] {
|
||||
border-color: var(--color-border-gray) !important;
|
||||
color: var(--color-border-gray) !important;
|
||||
/* NOTE: cannot set cursor when `pointer-events: none`; can be fixed by setting
|
||||
* `cursor` on wrapping element.
|
||||
cursor: not-allowed; */
|
||||
fill: var(--color-border-gray) !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
/* Styles set `display` without distinguishing between [hidden] elements, making
|
||||
* them visible. */
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* Color coding of input controls' background:
|
||||
* blue - target for interaction with pointer
|
||||
* gray - target for interaction with keyboard
|
||||
* red - destructive, non-undoable action
|
||||
* blue - target for interaction with pointer,
|
||||
* gray - target for interaction with keyboard,
|
||||
* red - destructive, non-undoable action.
|
||||
*/
|
||||
/* TODO: merge selectors using :is() */
|
||||
a,
|
||||
button,
|
||||
details,
|
||||
input,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
background-color: inherit;
|
||||
font: inherit;
|
||||
@@ -73,56 +94,24 @@ input,
|
||||
select {
|
||||
text-align: inherit;
|
||||
}
|
||||
a,
|
||||
button,
|
||||
input[type=submit] {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* [hidden] submit controls cannot have `display` set as it makes them visible */
|
||||
.button,
|
||||
button:not([hidden]),
|
||||
input[type=submit]:not([hidden]),
|
||||
.tab {
|
||||
align-items: center;
|
||||
color: var(--color-gray);
|
||||
display: flex;
|
||||
fill: var(--color-gray);
|
||||
font-weight: bold;
|
||||
}
|
||||
.button,
|
||||
button,
|
||||
input[type=submit] {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.6em 0.5em;
|
||||
width: fit-content;
|
||||
}
|
||||
input:not([type=submit]):not([type=checkbox]),
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
.button,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
border: solid 1px var(--color-gray);
|
||||
border: 1px solid var(--color-gray);
|
||||
border-radius: 0.25em;
|
||||
padding: 0.2em 0.4em;
|
||||
}
|
||||
[name=cancel],
|
||||
.auxiliary {
|
||||
border-color: var(--color-border-gray);
|
||||
color: var(--color-nav-gray);
|
||||
fill: var(--color-nav-gray);
|
||||
svg {
|
||||
height: 1.4em;
|
||||
margin: 0 0.2em 0 0;
|
||||
width: 1.4em;
|
||||
}
|
||||
svg:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
input[type=checkbox],
|
||||
svg,
|
||||
textarea {
|
||||
margin: 0
|
||||
margin: 0;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
accent-color: var(--color-blue);
|
||||
@@ -130,17 +119,20 @@ input[type=checkbox] {
|
||||
-webkit-appearance: none;
|
||||
display: flex;
|
||||
height: 1.1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 1.1em;
|
||||
}
|
||||
input[type=checkbox]:checked {
|
||||
appearance: checkbox;
|
||||
-webkit-appearance: checkbox;
|
||||
}
|
||||
/* Hide spin buttons in input number fields */
|
||||
/* TODO: add spin buttons inside input[number]: before (-) and after (+) input */
|
||||
/* Hide spin buttons of <input type=number>. */
|
||||
/* TODO: add spin buttons inside <input type=number>: before (-) and after (+) input. */
|
||||
input[type=number] {
|
||||
appearance: textfield;
|
||||
-moz-appearance: textfield;
|
||||
text-align: end;
|
||||
}
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
@@ -149,37 +141,108 @@ input::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.button > svg,
|
||||
.tab > svg,
|
||||
button > svg {
|
||||
height: 1.4em;
|
||||
width: 1.4em;
|
||||
/* Text color of table form controls:
|
||||
* - black for row/table forms,
|
||||
* - inherited for internal (column specific) buttons/forms. */
|
||||
table input,
|
||||
table select,
|
||||
table summary,
|
||||
table textarea {
|
||||
border-color: var(--color-border-gray);
|
||||
}
|
||||
.button > svg:not(:last-child),
|
||||
.tab > svg:not(:last-child),
|
||||
button > svg:not(:last-child) {
|
||||
margin-right: 0.2em;
|
||||
table input,
|
||||
table select,
|
||||
table textarea {
|
||||
padding-block: 0.375em;
|
||||
}
|
||||
/* TODO: move normal non-button links (<a>:hover/:focus) styling here (i.e.
|
||||
* page-wide, top-level) and remove from table.items - as the style should be
|
||||
* same everywhere */
|
||||
.button:focus-visible,
|
||||
button:focus-visible,
|
||||
input[type=submit]:focus-visible {
|
||||
background-color: var(--color-focus-gray);
|
||||
table form input,
|
||||
table form select,
|
||||
table form summary,
|
||||
table form textarea {
|
||||
color: inherit;
|
||||
}
|
||||
table svg:not(:only-child) {
|
||||
height: 1.25em;
|
||||
width: 1.25em;
|
||||
}
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
select:focus-within,
|
||||
/* TODO: how to achieve summary:focus-within for ::details-content? */
|
||||
/* TODO: how to achieve `summary:focus-within` for `::details-content`? */
|
||||
summary:focus-visible,
|
||||
textarea:focus-visible {
|
||||
accent-color: var(--color-dark-blue);
|
||||
background-color: var(--color-focus-gray);
|
||||
color: black;
|
||||
}
|
||||
.button:hover,
|
||||
button:hover,
|
||||
input[type=submit]:hover {
|
||||
input:hover,
|
||||
select:hover,
|
||||
summary:hover,
|
||||
textarea:hover {
|
||||
border-color: var(--color-blue);
|
||||
outline: 1px solid var(--color-blue);
|
||||
}
|
||||
select:hover,
|
||||
summary:hover {
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* TODO: style <details>/<summary> focus to match <select> as much as possible.
|
||||
summary:focus-visible::before,
|
||||
summary:hover::before {
|
||||
background-color: black;
|
||||
}
|
||||
*/
|
||||
input:invalid,
|
||||
select:invalid,
|
||||
textarea:invalid {
|
||||
border-color: var(--color-red);
|
||||
outline-color: var(--color-red);
|
||||
}
|
||||
|
||||
/* `.button`: button-styled <a>, <button>, <input type=submit>.
|
||||
* `.link`: any other <a>.
|
||||
* `.tab`: tab-styled <a>.
|
||||
*/
|
||||
.button,
|
||||
.link,
|
||||
.tab {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.button,
|
||||
.tab {
|
||||
align-items: center;
|
||||
color: var(--color-gray);
|
||||
display: flex;
|
||||
fill: var(--color-gray);
|
||||
font-weight: bold;
|
||||
}
|
||||
.button {
|
||||
border: 1px solid var(--color-gray);
|
||||
border-radius: 0.25em;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.6em 0.5em;
|
||||
width: fit-content;
|
||||
}
|
||||
.link {
|
||||
color: inherit;
|
||||
text-decoration: underline 1px var(--color-border-gray);
|
||||
text-underline-offset: 0.25em;
|
||||
}
|
||||
[name=cancel],
|
||||
.auxiliary {
|
||||
border-color: var(--color-border-gray);
|
||||
color: var(--color-nav-gray);
|
||||
fill: var(--color-nav-gray);
|
||||
}
|
||||
.button:focus-visible,
|
||||
.tab:focus-visible,
|
||||
.tab:hover {
|
||||
background-color: var(--color-focus-gray);
|
||||
}
|
||||
.button:hover {
|
||||
background-color: var(--color-blue);
|
||||
border-color: var(--color-blue);
|
||||
color: white;
|
||||
@@ -189,32 +252,24 @@ input[type=submit]:hover {
|
||||
background-color: var(--color-red);
|
||||
border-color: var(--color-red);
|
||||
}
|
||||
input:hover,
|
||||
select:hover,
|
||||
summary:hover,
|
||||
textarea:hover {
|
||||
border-color: var(--color-blue);
|
||||
outline: solid 1px var(--color-blue);
|
||||
.link:focus-visible {
|
||||
text-decoration-color: var(--color-gray);
|
||||
}
|
||||
select:hover,
|
||||
summary:hover {
|
||||
cursor: pointer;
|
||||
.link:hover {
|
||||
color: var(--color-blue);
|
||||
text-decoration-color: var(--color-blue);
|
||||
}
|
||||
input:invalid,
|
||||
select:invalid,
|
||||
textarea:invalid {
|
||||
border-color: var(--color-red);
|
||||
outline: solid 1px var(--color-red);
|
||||
}
|
||||
input[type=text]:read-only,
|
||||
textarea:read-only {
|
||||
border: none;
|
||||
padding-inline: 0;
|
||||
table .button {
|
||||
border-color: var(--color-border-gray);
|
||||
color: var(--color-table-gray);
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
|
||||
/* NOTE: collapse gaps around empty rows (`topside`) once possible
|
||||
* with grid-collapse property and remove alternative grid-template
|
||||
/* NOTE: collapse gaps around empty rows (`topside`) once possible with
|
||||
* `grid-collapse` property and remove alternative `grid-template-areas`.
|
||||
* https://github.com/w3c/csswg-drafts/issues/5813 */
|
||||
body {
|
||||
display: grid;
|
||||
@@ -222,16 +277,16 @@ body {
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"nav nav nav"
|
||||
"leftside topside rightside"
|
||||
"leftside main rightside";
|
||||
grid-template-columns: 1fr minmax(max-content, 2fr) 1fr;
|
||||
font-family: system-ui;
|
||||
margin: 0.4em;
|
||||
}
|
||||
body:not(:has(.topside-area)) {
|
||||
body:has(> .topside-area) {
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"nav nav nav"
|
||||
"leftside topside rightside"
|
||||
"leftside main rightside";
|
||||
}
|
||||
|
||||
@@ -247,18 +302,14 @@ header {
|
||||
margin-inline-start: 4%;
|
||||
}
|
||||
.navigation > .tab {
|
||||
border-bottom: solid 2px var(--color-nav-gray);
|
||||
border-bottom: 2px solid var(--color-nav-gray);
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
justify-content: center;
|
||||
padding-block: 0.4em;
|
||||
}
|
||||
.navigation > .tab:hover,
|
||||
.navigation > .tab:focus-visible {
|
||||
background-color: var(--color-focus-gray);
|
||||
}
|
||||
.navigation > .tab.active {
|
||||
border-bottom: solid 4px var(--color-blue);
|
||||
border-bottom: 4px solid var(--color-blue);
|
||||
color: var(--color-blue);
|
||||
fill: var(--color-blue);
|
||||
}
|
||||
@@ -290,7 +341,7 @@ header {
|
||||
|
||||
#flashes {
|
||||
display: grid;
|
||||
gap: 0.2em;
|
||||
row-gap: 0.4em;
|
||||
grid-template-columns: 1fr auto auto auto 1fr;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
@@ -306,49 +357,42 @@ header {
|
||||
display: grid;
|
||||
grid-column: 2/5;
|
||||
grid-template-columns: subgrid;
|
||||
line-height: 2.2em;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.flash.alert:before {
|
||||
content: url('pictograms/alert-outline.svg');
|
||||
.flash:before {
|
||||
filter: invert();
|
||||
height: 1.4em;
|
||||
margin: 0 0.5em;
|
||||
width: 1.4em;
|
||||
}
|
||||
.flash.alert:before {
|
||||
content: url('pictograms/alert-outline.svg');
|
||||
}
|
||||
.flash.alert {
|
||||
border-color: var(--color-red);
|
||||
background-color: var(--color-red);
|
||||
}
|
||||
.flash.notice:before {
|
||||
content: url('pictograms/check-circle-outline.svg');
|
||||
height: 1.4em;
|
||||
margin: 0 0.5em;
|
||||
width: 1.4em;
|
||||
}
|
||||
.flash.notice {
|
||||
border-color: var(--color-blue);
|
||||
background-color: var(--color-blue);
|
||||
}
|
||||
.flash > div {
|
||||
grid-column: 2;
|
||||
}
|
||||
/* NOTE: currently flash button inherits some unnecessary styles from generic
|
||||
* button. */
|
||||
.flash > button {
|
||||
border: none;
|
||||
color: inherit;
|
||||
.flash svg {
|
||||
cursor: pointer;
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
grid-column: 3;
|
||||
fill: white;
|
||||
height: 2.2em;
|
||||
opacity: 0.6;
|
||||
padding: 0.2em 0.4em;
|
||||
padding: 0.4em 0.5em;
|
||||
width: 2.4em;
|
||||
}
|
||||
.flash > button:hover {
|
||||
.flash svg:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* TODO: Hover over invalid should work like in measurements (thin vs thick border) */
|
||||
.labeled-form {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
@@ -365,7 +409,7 @@ header {
|
||||
.labeled-form label.required {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Don't style `label.error + input` if case already covered by input:invalid */
|
||||
/* Don't style `label.error + input` if case already covered by `input:invalid`. */
|
||||
.labeled-form label.error {
|
||||
color: var(--color-red);
|
||||
}
|
||||
@@ -385,200 +429,117 @@ header {
|
||||
.labeled-form .auxiliary {
|
||||
grid-column: 3;
|
||||
/* If more buttons are needed, `grid-row` can be replaced with
|
||||
* `reading-flow: grid-columns` to ensure proper tabindex order */
|
||||
* `reading-flow: grid-columns` to ensure proper [tabindex] order. */
|
||||
grid-row: 1;
|
||||
height: 100%;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.tabular-form table {
|
||||
border: none;
|
||||
border-spacing: 0.4em 0;
|
||||
margin-inline: -0.4em;
|
||||
}
|
||||
.tabular-form table td {
|
||||
border: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tabular-form table td {
|
||||
padding-inline: 0;
|
||||
}
|
||||
.tabular-form table :is(form, input, select, textarea):only-child {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
/* TODO: remove .items class (?) and make 'form table' work properly */
|
||||
table.items {
|
||||
|
||||
.items-table {
|
||||
border-spacing: 0;
|
||||
border: solid 1px var(--color-border-gray);
|
||||
border: 1px solid var(--color-border-gray);
|
||||
border-radius: 0.25em;
|
||||
font-size: 0.85rem;
|
||||
text-align: left;
|
||||
}
|
||||
table:not(:has(tr)) {
|
||||
display: none;
|
||||
}
|
||||
table.items thead {
|
||||
.items-table thead {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
table.items thead,
|
||||
table.items tbody tr:hover {
|
||||
.items-table thead,
|
||||
.items-table tbody tr:hover {
|
||||
background-color: var(--color-focus-gray);
|
||||
}
|
||||
table.items th {
|
||||
padding-block: 0.75em;
|
||||
.items-table th {
|
||||
padding: 0.75em 0 0.75em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
table.items th,
|
||||
table.items td {
|
||||
padding-inline: 1em 0;
|
||||
}
|
||||
/* For <a> to fill <td> completely, we use an ::after pseudoelement. */
|
||||
table.items td.link {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
table.items td.link a {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
table.items td.link a::after {
|
||||
content: '';
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
}
|
||||
table.items td:first-child {
|
||||
padding-inline-start: calc(1em + var(--depth) * 0.8em);
|
||||
}
|
||||
table.items td:has(input, select, textarea) {
|
||||
padding-inline-start: calc(0.6em - 0.9px);
|
||||
}
|
||||
table.items td:first-child:has(input, select, textarea) {
|
||||
padding-inline-start: calc(0.6em + var(--depth) * 0.8em - 0.9px);
|
||||
}
|
||||
table.items th:last-child {
|
||||
.items-table th:last-child {
|
||||
padding-inline-end: 0.4em;
|
||||
}
|
||||
table.items td:last-child {
|
||||
.items-table td {
|
||||
border-top: 1px solid var(--color-border-gray);
|
||||
height: 2.4em;
|
||||
padding: 0.1em 0 0.1em calc(1em + var(--depth) * 0.8em);
|
||||
}
|
||||
.items-table td:last-child {
|
||||
padding-inline-end: 0.1em;
|
||||
}
|
||||
table.items td {
|
||||
border-top: solid 1px var(--color-border-gray);
|
||||
height: 2.4em;
|
||||
padding-block: 0.1em;
|
||||
.items-table :is(form, input, select, textarea):only-child {
|
||||
margin-inline-start: calc(-0.4em - 0.9px);
|
||||
}
|
||||
table.items .actions {
|
||||
display: flex;
|
||||
/* For <a> to fill table cell completely, we use an `::after` pseudoelement. */
|
||||
/* TODO: expand to whole row? will require adjusting z-index on inputs/buttons */
|
||||
.items-table td:has(> .link) {
|
||||
position: relative;
|
||||
}
|
||||
.items-table .link::after {
|
||||
content: '';
|
||||
inset: -1px 0 0 0;
|
||||
position: absolute;
|
||||
}
|
||||
.items-table .flex {
|
||||
gap: 0.4em;
|
||||
justify-content: end;
|
||||
}
|
||||
table.items .actions.centered {
|
||||
justify-content: center;
|
||||
}
|
||||
table.items tr.dropzone {
|
||||
.items-table .dropzone {
|
||||
position: relative;
|
||||
}
|
||||
table.items tr.dropzone::after {
|
||||
.items-table .dropzone::after {
|
||||
content: '';
|
||||
inset: 1px 0 0 0;
|
||||
position: absolute;
|
||||
outline: dashed 2px var(--color-blue);
|
||||
outline: 2px dashed var(--color-blue);
|
||||
outline-offset: -1px;
|
||||
z-index: var(--z-index-table-row-outline);
|
||||
}
|
||||
table.items td.handle {
|
||||
cursor: move;
|
||||
.items-table .handle {
|
||||
cursor: grab;
|
||||
}
|
||||
table.items tr.form td {
|
||||
.items-table .form td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* TODO: replace :hover:focus-visible combos with proper LOVE stye order */
|
||||
/* TODO: Update table styling: simplify selectors, deduplicate, remove non-font rem. */
|
||||
table.items td.link a:hover,
|
||||
table.items td.link a:focus-visible,
|
||||
table.items td.link a:hover:focus-visible {
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 0.05rem;
|
||||
text-underline-offset: 0.2rem;
|
||||
}
|
||||
table.items td.link a:hover {
|
||||
color: var(--color-blue);
|
||||
}
|
||||
table.items td.link a:focus-visible {
|
||||
text-decoration-color: var(--color-gray);
|
||||
}
|
||||
table.items td.link a:hover:focus-visible {
|
||||
color: var(--color-dark-blue);
|
||||
}
|
||||
|
||||
table.items td:not(:first-child),
|
||||
.items-table td:not(:first-child),
|
||||
.grayed {
|
||||
color: var(--color-table-gray);
|
||||
fill: var(--color-table-gray);
|
||||
fill: var(--color-gray);
|
||||
}
|
||||
table.items svg {
|
||||
height: 1rem;
|
||||
vertical-align: middle;
|
||||
width: 1rem;
|
||||
}
|
||||
table.items svg:last-child {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
}
|
||||
table.items td.svg {
|
||||
.items-table td:has(> svg:only-child) {
|
||||
text-align: center;
|
||||
}
|
||||
table.items td.number {
|
||||
text-align: right;
|
||||
}
|
||||
table.items .button,
|
||||
table.items button,
|
||||
table.items input[type=submit] {
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
padding: 0.4em;
|
||||
}
|
||||
table.items input:not([type=submit]):not([type=checkbox]),
|
||||
table.items select,
|
||||
table.items textarea {
|
||||
padding-block: 0.375em;
|
||||
}
|
||||
/* TODO: find a way (layers?) to style inputs differently while making sure
|
||||
* hover works properly without using :not(:hover) selectors here. */
|
||||
table.items .button:not(:hover),
|
||||
table.items button:not(:hover),
|
||||
table.items input:not(:hover),
|
||||
table.items select:not(:hover),
|
||||
table.items textarea:not(:hover) {
|
||||
border-color: var(--color-border-gray);
|
||||
}
|
||||
table.items .button:not(:hover),
|
||||
table.items button:not(:hover),
|
||||
table.items input[type=submit]:not(:hover),
|
||||
table.items select:not(:hover) {
|
||||
color: var(--color-table-gray);
|
||||
}
|
||||
table.items select:focus-within,
|
||||
table.items select:focus-visible {
|
||||
color: black;
|
||||
}
|
||||
form table.items {
|
||||
border: none;
|
||||
}
|
||||
form table.items td {
|
||||
border: none;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
form table.items td:first-child {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.centered {
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.extendedright {
|
||||
margin-right: auto;
|
||||
}
|
||||
.hexpand {
|
||||
width: 100%;
|
||||
}
|
||||
.hflex {
|
||||
.flex {
|
||||
display: flex;
|
||||
gap: 0.8em;
|
||||
}
|
||||
.hflex.reverse {
|
||||
.flex.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.hflex.centered {
|
||||
justify-content: center;
|
||||
.flex.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
.hint {
|
||||
color: var(--color-table-gray);
|
||||
@@ -586,21 +547,18 @@ form table.items td:first-child {
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
.vflex {
|
||||
display: flex;
|
||||
gap: 0.8em;
|
||||
flex-direction: column;
|
||||
.hmin50 {
|
||||
min-width: 50%;
|
||||
}
|
||||
[disabled] {
|
||||
/* label:has(input[disabled]) {
|
||||
* TODO: disabled checkbox blue square focus removal; disabled label styling;
|
||||
* focused label styling (currently only checkbox has focus)
|
||||
* */
|
||||
border-color: var(--color-border-gray) !important;
|
||||
color: var(--color-border-gray) !important;
|
||||
cursor: not-allowed;
|
||||
fill: var(--color-border-gray) !important;
|
||||
pointer-events: none;
|
||||
.italic {
|
||||
color: var(--color-gray);
|
||||
font-style: italic;
|
||||
}
|
||||
.ralign {
|
||||
text-align: right;
|
||||
}
|
||||
.rextend {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -612,12 +570,12 @@ summary {
|
||||
align-items: center;
|
||||
color: var(--color-gray);
|
||||
display: flex;
|
||||
gap: 0.2em;
|
||||
gap: 0.4em;
|
||||
height: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
summary::before {
|
||||
background-color: #000;
|
||||
background-color: currentColor;
|
||||
content: "";
|
||||
height: 1em;
|
||||
mask-image: url('pictograms/chevron-down.svg');
|
||||
@@ -629,7 +587,7 @@ summary:has(.button) {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
summary .button {
|
||||
border: solid 1px var(--color-border-gray);
|
||||
border: 1px solid var(--color-border-gray);
|
||||
border-radius: inherit;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
@@ -640,15 +598,15 @@ summary span {
|
||||
width: 100%;
|
||||
}
|
||||
details[open] summary::before {
|
||||
transform: rotate(180deg);
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
summary::marker {
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
/* NOTE: use details[open]::details-content once widely available */
|
||||
/* NOTE: use `details[open]::details-content` once widely available. */
|
||||
details[open] ul {
|
||||
background: white;
|
||||
border: solid 1px var(--color-border-gray);
|
||||
background-color: white;
|
||||
border: 1px solid var(--color-border-gray);
|
||||
border-radius: 0.25em;
|
||||
box-shadow: 1px 1px 3px var(--color-border-gray);
|
||||
margin: -1px 0 0 0;
|
||||
@@ -670,3 +628,15 @@ li input[type=checkbox] {
|
||||
li::marker {
|
||||
content: '';
|
||||
}
|
||||
/*
|
||||
* TODO:
|
||||
* * disable <label> containing disabled checkbox: `label:has(input[disabled])`,
|
||||
* * disabled label styling,
|
||||
* * focused label styling (currently only checkbox has focus),
|
||||
* * disabled checkbox blue square focus removal.
|
||||
* */
|
||||
|
||||
#measurement_form {
|
||||
min-width: 66%;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,7 @@
|
||||
class MeasurementsController < ApplicationController
|
||||
before_action except: :index do
|
||||
raise AccessForbidden unless current_user.at_least(:active)
|
||||
end
|
||||
|
||||
def index
|
||||
readouts = current_user.readouts.includes(:quantity, :unit).order(created_at: :desc)
|
||||
@measurements = readouts.group_by(&:created_at).map do |created_at, grouped|
|
||||
Measurement.new(created_at: created_at, readouts: grouped)
|
||||
end
|
||||
@measurements = []
|
||||
#@measurements = current_user.units.ordered.includes(:base, :subunits)
|
||||
end
|
||||
|
||||
def new
|
||||
@@ -15,33 +9,8 @@ class MeasurementsController < ApplicationController
|
||||
end
|
||||
|
||||
def create
|
||||
timestamp = Time.current
|
||||
@readouts = readout_params.map do |rp|
|
||||
r = current_user.readouts.new(rp)
|
||||
r.created_at = timestamp
|
||||
r
|
||||
end
|
||||
|
||||
if @readouts.all?(&:valid?)
|
||||
Readout.transaction { @readouts.each(&:save!) }
|
||||
@measurement = Measurement.new(readouts: @readouts, created_at: timestamp)
|
||||
flash.now[:notice] = t('.success')
|
||||
else
|
||||
render :new, status: :unprocessable_entity
|
||||
end
|
||||
end
|
||||
|
||||
def destroy
|
||||
@measurement = Measurement.new(id: params[:id].to_i,
|
||||
created_at: Time.at(params[:id].to_i))
|
||||
current_user.readouts.where(created_at: @measurement.created_at).delete_all
|
||||
@measurements_empty = current_user.readouts.empty?
|
||||
flash.now[:notice] = t('.success')
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def readout_params
|
||||
params.require(:readouts).map { |r| r.permit(:quantity_id, :value, :unit_id) }
|
||||
end
|
||||
end
|
||||
|
||||
@@ -12,6 +12,12 @@ module ApplicationHelper
|
||||
labeled_field_for(method, options) { super }
|
||||
end
|
||||
|
||||
def submit(value = nil, options = {})
|
||||
value, options = nil, value if value.is_a?(Hash)
|
||||
options[:class] = @template.class_names('button', options[:class])
|
||||
super
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def labeled_field_for(method, options)
|
||||
@@ -96,20 +102,28 @@ module ApplicationHelper
|
||||
|
||||
def number_field(method, options = {})
|
||||
attr_type = object.type_for_attribute(method)
|
||||
if attr_type.type == :decimal
|
||||
case attr_type.type
|
||||
when :decimal
|
||||
options[:value] = object.public_send(method)&.to_scientific
|
||||
options[:step] ||= BigDecimal(10).power(-attr_type.scale)
|
||||
options[:max] ||= BigDecimal(10).power(attr_type.precision - attr_type.scale) -
|
||||
options[:step]
|
||||
options[:min] = options[:min] == :step ? options[:step] : options[:min]
|
||||
options[:min] ||= -options[:max]
|
||||
options[:size] ||= attr_type.precision / 2
|
||||
when :float
|
||||
options[:size] ||= 6
|
||||
end
|
||||
super
|
||||
end
|
||||
|
||||
def button(value = nil, options = {}, &block)
|
||||
# button does not use #objectify_options
|
||||
options.merge!(@options.slice(:form))
|
||||
# #button does not use #objectify_options/@default_options
|
||||
value, options = nil, value if value.is_a?(Hash)
|
||||
options = options.merge(
|
||||
@default_options.slice(:form),
|
||||
class: @template.class_names('button', options[:class])
|
||||
)
|
||||
super
|
||||
end
|
||||
|
||||
@@ -138,12 +152,14 @@ module ApplicationHelper
|
||||
end
|
||||
|
||||
def tabular_form_with(**options, &block)
|
||||
extra_options = {builder: TabularFormBuilder, html: {autocomplete: 'off'}}
|
||||
extra_options = {builder: TabularFormBuilder, class: 'tabular-form',
|
||||
html: {autocomplete: 'off'}}
|
||||
form_with(**merge_attributes(options, extra_options), &block)
|
||||
end
|
||||
|
||||
def svg_tag(source, label = nil, options = {})
|
||||
svg_tag = tag.svg(options) do
|
||||
label, options = nil, label if label.is_a? Hash
|
||||
svg_tag = tag.svg(**options) do
|
||||
tag.use(href: "#{image_path(source + ".svg")}#icon")
|
||||
end
|
||||
label.blank? ? svg_tag : svg_tag + tag.span(label)
|
||||
@@ -212,9 +228,8 @@ module ApplicationHelper
|
||||
# Conversion of flash to Array only required because of Devise
|
||||
Array(messages).map do |message|
|
||||
tag.div class: "flash #{entry}" do
|
||||
# TODO: change button text to svg to make it aligned vertically
|
||||
tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1,
|
||||
onclick: "this.parentElement.remove();")
|
||||
tag.span(sanitize(message)) +
|
||||
svg_tag('pictograms/close-outline', {onclick: "this.parentElement.remove()"})
|
||||
end
|
||||
end
|
||||
end.join.html_safe
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
module QuantitiesHelper
|
||||
def quantities_check_boxes
|
||||
def quantities_check_boxes(quantities)
|
||||
# Closing <details> on focusout event depends on relatedTarget for internal
|
||||
# actions being non-null. To ensure this, all top-layer elements of
|
||||
# ::details-content must accept focus, e.g. <label> needs tabindex="-1" */
|
||||
collection_check_boxes(nil, :quantity, @quantities, :id, :to_s_with_depth,
|
||||
collection_check_boxes(nil, :quantity, quantities, :id, :to_s_with_depth,
|
||||
include_hidden: false) do |b|
|
||||
content_tag :li, b.label(tabindex: -1) { b.check_box + b.text }
|
||||
end
|
||||
|
||||
@@ -1,17 +1,3 @@
|
||||
class Measurement
|
||||
include ActiveModel::Model
|
||||
|
||||
attr_accessor :readouts, :created_at
|
||||
|
||||
def id
|
||||
created_at.to_i
|
||||
end
|
||||
|
||||
def to_param
|
||||
id.to_s
|
||||
end
|
||||
|
||||
def persisted?
|
||||
true
|
||||
end
|
||||
end
|
||||
|
||||
@@ -15,8 +15,8 @@ class Quantity < ApplicationRecord
|
||||
errors.add(:parent, :descendant_reference) if ancestor_of?(parent)
|
||||
end
|
||||
validates :name, presence: true, uniqueness: {scope: [:user_id, :parent_id]},
|
||||
length: {maximum: type_for_attribute(:name).limit || Float::INFINITY}
|
||||
validates :description, length: {maximum: type_for_attribute(:description).limit || Float::INFINITY}
|
||||
length: {maximum: type_for_attribute(:name).limit}
|
||||
validates :description, length: {maximum: type_for_attribute(:description).limit}
|
||||
|
||||
# Update :depths of progenies after parent change
|
||||
before_save if: :parent_changed? do
|
||||
@@ -61,26 +61,18 @@ class Quantity < ApplicationRecord
|
||||
|
||||
# Return: ordered [sub]hierarchy
|
||||
scope :ordered, ->(root: nil, include_root: true) {
|
||||
if connection.adapter_name =~ /mysql/i
|
||||
numbered = Arel::Table.new('numbered')
|
||||
self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
|
||||
numbered.project(
|
||||
numbered[Arel.star],
|
||||
numbered.cast(numbered[:child_number], 'BINARY').as('path')
|
||||
).where(numbered[root && include_root ? :id : :parent_id].eq(root)),
|
||||
numbered.project(
|
||||
numbered[Arel.star],
|
||||
arel_table[:path].concat(numbered[:child_number])
|
||||
).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
|
||||
]).order(arel_table[:path])
|
||||
elsif root.nil?
|
||||
# SQLite: pathname column already stores the full hierarchical path
|
||||
order(:pathname)
|
||||
else
|
||||
root_pathname = unscoped.where(id: root).pick(:pathname)
|
||||
scope = order(:pathname).where("pathname LIKE ?", "#{root_pathname}#{PATHNAME_DELIMITER}%")
|
||||
include_root ? scope.or(where(id: root)) : scope
|
||||
end
|
||||
numbered = Arel::Table.new('numbered')
|
||||
|
||||
self.model.with(numbered: numbered(:parent_id, :name)).with_recursive(arel_table.name => [
|
||||
numbered.project(
|
||||
numbered[Arel.star],
|
||||
numbered.cast(numbered[:child_number], 'BINARY').as('path')
|
||||
).where(numbered[root && include_root ? :id : :parent_id].eq(root)),
|
||||
numbered.project(
|
||||
numbered[Arel.star],
|
||||
arel_table[:path].concat(numbered[:child_number])
|
||||
).join(arel_table).on(numbered[:parent_id].eq(arel_table[:id]))
|
||||
]).order(arel_table[:path])
|
||||
}
|
||||
|
||||
# TODO: extract named functions to custom Arel extension
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</td>
|
||||
|
||||
<% if current_user.at_least(:active) %>
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<% unless unit.portable.nil? %>
|
||||
<% if unit.default? %>
|
||||
<%= image_button_to_if unit.portable?, t('.import'), 'download-outline',
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
class: 'tools-area' %>
|
||||
</div>
|
||||
|
||||
<table class="main-area items">
|
||||
<table class="main-area items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= Unit.human_attribute_name(:symbol) %></th>
|
||||
|
||||
@@ -23,10 +23,10 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="hflex">
|
||||
<header class="flex">
|
||||
<%= image_link_to t(".source_code"), "code-braces", source_code_url %>
|
||||
<%= image_link_to t(".issue_tracker"), "bug-outline", issue_tracker_url,
|
||||
class: "extendedright" %>
|
||||
class: "rextend" %>
|
||||
<% if user_signed_in? %>
|
||||
<%= image_link_to_unless_current(current_user, "account-wrench-outline",
|
||||
edit_user_registration_path) %>
|
||||
|
||||
@@ -1,28 +1,37 @@
|
||||
<%= tabular_form_with model: Measurement.new, id: :measurement_form,
|
||||
class: 'topside-area vflex', html: {onkeydown: 'formProcessKey(event)'} do |form| %>
|
||||
<table class="items centered">
|
||||
<tbody id="readouts"></tbody>
|
||||
class: 'topside-area flex vertical center',
|
||||
html: {onkeydown: 'formProcessKey(event)'} do |form| %>
|
||||
|
||||
<table class="items-table center">
|
||||
<tbody id="readouts">
|
||||
<%= tabular_fields_for @measurement do |form| %>
|
||||
<tr class="italic">
|
||||
<td class="hexpand hmin50"><%= t '.taken_at_html' %></td>
|
||||
<td colspan="3" class="ralign">
|
||||
<%= form.datetime_field :taken_at, required: true %>
|
||||
</td>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="hflex">
|
||||
<%# TODO: right-click selection %>
|
||||
<details id="quantity_select" class="hexpand" open
|
||||
onkeydown="detailsProcessKey(event)">
|
||||
<summary autofocus>
|
||||
<!-- TODO: Set content with CSS when span empty to avoid duplication -->
|
||||
<span data-prompt="<%= t('.select_quantity') %>">
|
||||
<%= t('.select_quantity') %>
|
||||
</span>
|
||||
<%= image_button_tag t(:apply), "update", name: nil, disabled: true,
|
||||
formaction: new_readout_path, formmethod: :get, formnovalidate: true,
|
||||
data: {turbo_stream: true} %>
|
||||
</summary>
|
||||
<ul><%= quantities_check_boxes %></ul>
|
||||
</details>
|
||||
<%= form.button id: :create_measurement_button, disabled: true -%>
|
||||
</div>
|
||||
<%# TODO: right-click selection; unnecessary with hierarchical tags? %>
|
||||
<details id="quantity_select" class="center hexpand" open
|
||||
onkeydown="detailsProcessKey(event)">
|
||||
<summary autofocus>
|
||||
<!-- TODO: Set content with CSS when span empty to avoid duplication -->
|
||||
<span data-prompt="<%= t('.select_quantity') %>">
|
||||
<%= t('.select_quantity') %>
|
||||
</span>
|
||||
<%= image_button_tag t(:apply), "update", name: nil, disabled: true,
|
||||
formaction: new_readout_path, formmethod: :get, formnovalidate: true,
|
||||
data: {turbo_stream: true} %>
|
||||
</summary>
|
||||
<ul><%= quantities_check_boxes(@quantities) %></ul>
|
||||
</details>
|
||||
|
||||
<div class="hflex reverse">
|
||||
<div class="flex reverse">
|
||||
<%= form.button id: :create_measurement_button, disabled: true -%>
|
||||
<%= image_link_to t(:cancel), "close-outline", measurements_path, name: :cancel,
|
||||
class: 'dangerous', onclick: render_turbo_stream('form_close') %>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
<%= tag.tr id: dom_id(measurement) do %>
|
||||
<td><%= l measurement.created_at, format: :short %></td>
|
||||
<td>
|
||||
<% measurement.readouts.each do |readout| %>
|
||||
<span><%= readout.quantity.name %>: <%= readout.value %> <%= readout.unit %></span>
|
||||
<% end %>
|
||||
</td>
|
||||
<% if current_user.at_least(:active) %>
|
||||
<td class="actions">
|
||||
<%= image_button_to t('.destroy'), 'delete-outline', measurement_path(measurement),
|
||||
method: :delete %>
|
||||
</td>
|
||||
<% end %>
|
||||
<% end %>
|
||||
@@ -1,5 +0,0 @@
|
||||
<%= turbo_stream.update :flashes %>
|
||||
<%= turbo_stream.remove :measurement_form %>
|
||||
<%= turbo_stream.remove :no_items %>
|
||||
<%= turbo_stream.enable :new_measurement_link %>
|
||||
<%= turbo_stream.prepend :measurements, @measurement %>
|
||||
@@ -1,3 +0,0 @@
|
||||
<%= turbo_stream.update :flashes %>
|
||||
<%= turbo_stream.remove @measurement %>
|
||||
<%= turbo_stream.append(:measurements, render_no_items) if @measurements_empty %>
|
||||
@@ -9,7 +9,7 @@
|
||||
<%= form.text_area :description, cols: 30, rows: 1, escape: false %>
|
||||
</td>
|
||||
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<%= form.button %>
|
||||
<%= image_link_to t(:cancel), "close-outline", quantities_path, class: 'dangerous',
|
||||
name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
|
||||
|
||||
@@ -5,14 +5,14 @@
|
||||
data: {drag_path: reparent_quantity_path(quantity), drop_id: dom_id(quantity),
|
||||
drop_id_param: "quantity[parent_id]"} do %>
|
||||
|
||||
<td class="link" style="--depth:<%= quantity.depth %>">
|
||||
<%= link_to quantity, edit_quantity_path(quantity), onclick: 'this.blur();',
|
||||
data: {turbo_stream: true} %>
|
||||
<td style="--depth:<%= quantity.depth %>">
|
||||
<%= link_to quantity, edit_quantity_path(quantity), class: 'link',
|
||||
onclick: 'this.blur();', data: {turbo_stream: true} %>
|
||||
</td>
|
||||
<td><%= quantity.description %></td>
|
||||
|
||||
<% if current_user.at_least(:active) %>
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<%= image_link_to t('.new_subquantity'), 'plus-outline', new_quantity_path(quantity),
|
||||
id: dom_id(quantity, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
|
||||
|
||||
|
||||
@@ -8,13 +8,14 @@
|
||||
class: 'tools-area' %>
|
||||
</div>
|
||||
|
||||
<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
|
||||
<%= tag.div class: 'main-area', id: :quantity_form %>
|
||||
|
||||
<table class="main-area items">
|
||||
<table class="main-area items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= Quantity.human_attribute_name(:name) %></th>
|
||||
<th><%= Quantity.human_attribute_name(:description) %></th>
|
||||
<th class="hexpand"><%= Quantity.human_attribute_name(:description) %></th>
|
||||
<% if current_user.at_least(:active) %>
|
||||
<th><%= t :actions %></th>
|
||||
<th></th>
|
||||
|
||||
@@ -1,25 +1,24 @@
|
||||
<%# TODO: add readout reordering by dragging %>
|
||||
<%= tabular_fields_for 'readouts[]', readout do |form| %>
|
||||
<%- tag.tr id: dom_id(readout.quantity, :new, :readout) do %>
|
||||
<td class="actions">
|
||||
<td>
|
||||
<%# TODO: add grayed readout index (in separate column?) %>
|
||||
<%= readout.quantity.relative_pathname(@superquantity) %>
|
||||
<%= form.hidden_field :quantity_id %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.number_field :value, required: true, autofocus: readout_counter == 0 %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.collection_select :unit_id, @user_units, :id,
|
||||
->(u){ sanitize(' ' * (u.base_id ? 1 : 0) + u.symbol) },
|
||||
{prompt: '', disabled: '', selected: ''}, required: true %>
|
||||
</td>
|
||||
<td class="flex">
|
||||
<%# TODO: change to _link_ after giving up displaying relative paths %>
|
||||
<%= image_button_tag '', 'delete-outline', class: 'dangerous', name: nil,
|
||||
formaction: discard_readouts_path(readout.quantity),
|
||||
formmethod: :get, formnovalidate: true, data: {turbo_stream: true} %>
|
||||
</td>
|
||||
<td>
|
||||
<%= readout.quantity.relative_pathname(@superquantity) %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.number_field :value, required: true,
|
||||
size: readout.type_for_attribute(:value).precision / 2,
|
||||
autofocus: readout_counter == 0 %>
|
||||
</td>
|
||||
<td>
|
||||
<%= form.hidden_field :quantity_id %>
|
||||
<%= form.collection_select :unit_id, @user_units, :id,
|
||||
->(u){ sanitize(' ' * (u.base_id ? 1 : 0) + u.symbol) },
|
||||
{prompt: t('.select_unit'), disabled: '', selected: ''}, required: true %>
|
||||
</td>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
<td>
|
||||
<%= form.text_area :description, cols: 30, rows: 1, escape: false %>
|
||||
</td>
|
||||
<td class="number">
|
||||
<td>
|
||||
<%= form.number_field :multiplier, required: true, size: 10, min: :step if @unit.base_id? %>
|
||||
</td>
|
||||
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<%= form.button %>
|
||||
<%= image_link_to t(:cancel), "close-outline", units_path, class: 'dangerous',
|
||||
name: :cancel, onclick: render_turbo_stream('form_close', {row: row}) %>
|
||||
|
||||
@@ -6,14 +6,15 @@
|
||||
drop_id: dom_id(unit.base || unit),
|
||||
drop_id_param: "unit[base_id]"} do %>
|
||||
|
||||
<td class="link" style="--depth:<%= unit.base_id? ? 1 : 0 %>">
|
||||
<%= link_to unit, edit_unit_path(unit), onclick: 'this.blur();', data: {turbo_stream: true} %>
|
||||
<td style="--depth:<%= unit.base_id? ? 1 : 0 %>">
|
||||
<%= link_to unit, edit_unit_path(unit), class: 'link', onclick: 'this.blur();',
|
||||
data: {turbo_stream: true} %>
|
||||
</td>
|
||||
<td><%= unit.description %></td>
|
||||
<td class="number"><%= unit.multiplier.to_html %></td>
|
||||
<td class="ralign"><%= unit.multiplier.to_html %></td>
|
||||
|
||||
<% if current_user.at_least(:active) %>
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<% unless unit.base_id? %>
|
||||
<%= image_link_to t('.new_subunit'), 'plus-outline', new_unit_path(unit),
|
||||
id: dom_id(unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
|
||||
|
||||
@@ -7,13 +7,14 @@
|
||||
class: 'tools-area' %>
|
||||
</div>
|
||||
|
||||
<%# TODO: remove? form can be inserted directly, e.g. at the end of index %>
|
||||
<%= tag.div id: :unit_form %>
|
||||
|
||||
<table class="main-area items">
|
||||
<table class="main-area items-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= Unit.human_attribute_name(:symbol) %></th>
|
||||
<th><%= Unit.human_attribute_name(:description) %></th>
|
||||
<th class="hexpand"><%= Unit.human_attribute_name(:description) %></th>
|
||||
<th><%= Unit.human_attribute_name(:multiplier) %></th>
|
||||
<% if current_user.at_least(:active) %>
|
||||
<th><%= t :actions %></th>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<table class="main-area items" id="users">
|
||||
<table class="main-area items-table" id="users">
|
||||
<thead>
|
||||
<tr>
|
||||
<th><%= User.human_attribute_name(:email) %></th>
|
||||
@@ -11,7 +11,7 @@
|
||||
<tbody>
|
||||
<% @users.each do |user| %>
|
||||
<tr>
|
||||
<td class="link"><%= link_to user, user_path(user) %></td>
|
||||
<td><%= link_to user, user_path(user), class: 'link' %></td>
|
||||
<td>
|
||||
<% if user == current_user %>
|
||||
<%= user.status %>
|
||||
@@ -22,11 +22,11 @@
|
||||
<% end %>
|
||||
<% end %>
|
||||
</td>
|
||||
<td class="svg">
|
||||
<td>
|
||||
<%= svg_tag 'pictograms/checkbox-marked-outline' if user.confirmed_at.present? %>
|
||||
</td>
|
||||
<td><%= l user.created_at, format: :without_tz %></td>
|
||||
<td class="actions">
|
||||
<td class="flex">
|
||||
<% if allow_disguise?(user) %>
|
||||
<%= image_link_to t('.disguise'), 'incognito', disguise_user_path(user) %>
|
||||
<% end %>
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
|
||||
<%= f.submit t(:register), data: {turbo: false} %>
|
||||
|
||||
<%# TODO: fix button text color after change link -> button %>
|
||||
<%= image_button_tag t(:resend_confirmation), 'email-sync-outline',
|
||||
class: 'auxiliary', formaction: user_confirmation_path, formnovalidate: true,
|
||||
data: {validate: f.field_id(:email)} %>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<div class="flex">
|
||||
<%= f.submit "Resend unlock instructions" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
@@ -20,6 +20,10 @@ Bundler.require(*Rails.groups)
|
||||
|
||||
module FixinMe
|
||||
class Application < Rails::Application
|
||||
# Allow RAILS_DATABASE_YML to override the database config file path.
|
||||
# Used by the multi-database test runner (lib/tasks/test_databases.rake).
|
||||
config.paths['config/database'] = [ENV['RAILS_DATABASE_YML']] if ENV['RAILS_DATABASE_YML']
|
||||
|
||||
# Initialize configuration defaults for originally generated Rails version.
|
||||
config.load_defaults 7.0
|
||||
|
||||
|
||||
@@ -48,3 +48,24 @@ production:
|
||||
#test:
|
||||
# <<: *default
|
||||
# database: fixinme_test
|
||||
|
||||
# Multi-database testing
|
||||
# ----------------------
|
||||
# Any key starting with "test" is treated as a test database.
|
||||
# When more than one is present, EVERY test task (rails test, rails test:models,
|
||||
# rails test:system, …) automatically runs against all of them.
|
||||
#
|
||||
# The adapter gem must be available:
|
||||
# bundle config --local with "mysql sqlite" # mysql + sqlite
|
||||
# bundle config --local with "mysql pg" # mysql + postgresql
|
||||
#
|
||||
#test_sqlite:
|
||||
# adapter: sqlite3
|
||||
# database: db/fixinme_test.sqlite3
|
||||
#
|
||||
#test_pg:
|
||||
# adapter: postgresql
|
||||
# database: fixinme_test
|
||||
# username: fixinme
|
||||
# password: Some-password1%
|
||||
# host: localhost
|
||||
|
||||
@@ -85,18 +85,10 @@ en:
|
||||
navigation: Measurements
|
||||
no_items: There are no measurements taken. You can Add some now.
|
||||
form:
|
||||
select_quantity: select the measured quantities...
|
||||
select_quantity: select quantities...
|
||||
taken_at_html: Measurement taken at 
|
||||
index:
|
||||
new_measurement: Add measurement
|
||||
create:
|
||||
success: Measurement saved.
|
||||
destroy:
|
||||
success: Measurement deleted.
|
||||
measurement:
|
||||
destroy: Delete
|
||||
readouts:
|
||||
form:
|
||||
select_unit: ...
|
||||
quantities:
|
||||
navigation: Quantities
|
||||
no_items: There are no configured quantities. You can Add some or Import from defaults.
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
class CreateReadouts < ActiveRecord::Migration[7.2]
|
||||
def change
|
||||
create_table :readouts do |t|
|
||||
t.references :user, null: false, foreign_key: true
|
||||
# Reference :user through :quantity (:measurement may be NULL).
|
||||
t.references :measurement, foreign_key: true
|
||||
t.references :quantity, null: false, foreign_key: true
|
||||
# :category + :value + :unit as a separate table? (NumericValue, TextValue)
|
||||
t.integer :category, null: false, default: 0
|
||||
t.float :value, null: false, limit: Float::MANT_DIG
|
||||
t.references :unit, foreign_key: true
|
||||
t.decimal :value, null: false, precision: 30, scale: 15
|
||||
# Move to Measurement?
|
||||
#t.references :collector, foreign_key: true
|
||||
#t.references :device, foreign_key: true
|
||||
|
||||
|
||||
158
lib/tasks/test_databases.rake
Normal file
158
lib/tasks/test_databases.rake
Normal file
@@ -0,0 +1,158 @@
|
||||
require 'yaml'
|
||||
require 'erb'
|
||||
require 'tmpdir'
|
||||
|
||||
# Multi-database test runner
|
||||
# ==========================
|
||||
# When database.yml contains more than one `test*` configuration, every
|
||||
# standard test task (test, test:models, test:system, …) is automatically
|
||||
# rewritten to run the full suite against EACH configured database in turn.
|
||||
#
|
||||
# Convention — any top-level key that starts with "test" and holds a Hash:
|
||||
#
|
||||
# test: ← required primary database
|
||||
# adapter: mysql2
|
||||
# database: fixinme_test
|
||||
# ...
|
||||
#
|
||||
# test_sqlite: ← optional additional databases
|
||||
# adapter: sqlite3
|
||||
# database: db/fixinme_test.sqlite3
|
||||
#
|
||||
# test_pg:
|
||||
# adapter: postgresql
|
||||
# ...
|
||||
#
|
||||
# A single-database setup is unchanged: every task behaves exactly as before.
|
||||
#
|
||||
# The mechanism uses RAILS_DATABASE_YML — an env var read by
|
||||
# config/application.rb(.dist) to override Rails' database config path before
|
||||
# initialisation, giving each subprocess a clean, isolated database config.
|
||||
|
||||
module MultiDbTests
|
||||
ADAPTER_GEMS = {
|
||||
'mysql2' => 'mysql2',
|
||||
'sqlite3' => 'sqlite3',
|
||||
'postgresql' => 'pg',
|
||||
'pg' => 'pg',
|
||||
}.freeze
|
||||
|
||||
ADAPTER_BUNDLE_GROUPS = {
|
||||
'mysql2' => 'mysql',
|
||||
'sqlite3' => 'sqlite',
|
||||
'postgresql' => 'postgresql',
|
||||
'pg' => 'postgresql',
|
||||
}.freeze
|
||||
|
||||
# Rake task names generated by railties/lib/rails/test_unit/testing.rake
|
||||
# that use run_from_rake — these are the ones we rewrite.
|
||||
WRAPPED_TASKS = (
|
||||
['test'] +
|
||||
Rails::TestUnit::Runner::TEST_FOLDERS.map { |f| "test:#{f}" } +
|
||||
%w[test:all test:system test:generators test:units test:functionals]
|
||||
).freeze
|
||||
|
||||
class << self
|
||||
# Returns {name => config_hash} for every key starting with "test".
|
||||
def test_configs
|
||||
@test_configs ||= begin
|
||||
db_file = Rails.root.join('config', 'database.yml')
|
||||
all = YAML.safe_load(ERB.new(db_file.read).result, aliases: true) || {}
|
||||
all.select { |k, v| k.to_s.start_with?('test') && v.is_a?(Hash) }
|
||||
end
|
||||
end
|
||||
|
||||
def non_test_configs
|
||||
@non_test_configs ||= begin
|
||||
db_file = Rails.root.join('config', 'database.yml')
|
||||
all = YAML.safe_load(ERB.new(db_file.read).result, aliases: true) || {}
|
||||
all.reject { |k, _| k.to_s.start_with?('test') }
|
||||
end
|
||||
end
|
||||
|
||||
# Run rails +task_name+ for every configured test database.
|
||||
# Called from the rewritten rake task actions.
|
||||
def run(task_name)
|
||||
cfgs = test_configs
|
||||
results = {}
|
||||
|
||||
cfgs.each do |db_name, config|
|
||||
adapter = config['adapter'].to_s
|
||||
puts "\n#{'─' * 64}"
|
||||
puts " #{task_name} · #{db_name} (#{adapter})"
|
||||
puts '─' * 64
|
||||
|
||||
unless adapter_available?(adapter)
|
||||
warn " SKIPPED — '#{adapter}' gem not in bundle.\n" \
|
||||
" Run: bundle config --local with \"#{current_with} #{adapter_group(adapter)}\""
|
||||
results[db_name] = :skipped
|
||||
next
|
||||
end
|
||||
|
||||
Dir.mktmpdir('rails_test_') do |tmpdir|
|
||||
tmp_yml = File.join(tmpdir, 'database.yml')
|
||||
File.write(tmp_yml, non_test_configs.merge('test' => config).to_yaml)
|
||||
env = { 'RAILS_DATABASE_YML' => tmp_yml }
|
||||
|
||||
if system(env, 'bundle exec rails db:test:prepare')
|
||||
results[db_name] = system(env, 'rails', task_name) ? :pass : :fail
|
||||
else
|
||||
results[db_name] = :prepare_failed
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
print_summary(cfgs, results)
|
||||
|
||||
failed = results.count { |_, s| [:fail, :prepare_failed].include?(s) }
|
||||
exit(false) if failed > 0
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def adapter_available?(adapter)
|
||||
require ADAPTER_GEMS.fetch(adapter, adapter)
|
||||
true
|
||||
rescue LoadError
|
||||
false
|
||||
end
|
||||
|
||||
def adapter_group(adapter)
|
||||
ADAPTER_BUNDLE_GROUPS.fetch(adapter, adapter)
|
||||
end
|
||||
|
||||
def current_with
|
||||
(Bundler.settings[:with] || '').split(':').join(' ')
|
||||
end
|
||||
|
||||
def print_summary(cfgs, results)
|
||||
return if results.size <= 1 # no summary for single-DB runs
|
||||
|
||||
puts "\n#{'═' * 64}"
|
||||
puts ' SUMMARY'
|
||||
puts '═' * 64
|
||||
results.each do |db_name, status|
|
||||
adapter = cfgs.dig(db_name, 'adapter') || '?'
|
||||
icon = status == :pass ? '✓' : (status == :skipped ? '–' : '✗')
|
||||
label = { pass: 'PASS', fail: 'FAIL',
|
||||
prepare_failed: 'PREPARE FAILED', skipped: 'SKIPPED' }[status]
|
||||
puts " #{icon} #{db_name.ljust(26)} (#{adapter.ljust(12)}) #{label}"
|
||||
end
|
||||
puts '═' * 64
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
# Rewrite every standard test task to run against all configured databases.
|
||||
# This file loads after railties/testing.rake, so all tasks already exist.
|
||||
# Single-database setups are completely unaffected.
|
||||
if MultiDbTests.test_configs.size > 1
|
||||
MultiDbTests::WRAPPED_TASKS.each do |task_name|
|
||||
next unless Rake::Task.task_defined?(task_name)
|
||||
|
||||
Rake::Task[task_name].clear_actions
|
||||
Rake::Task[task_name].enhance do
|
||||
MultiDbTests.run(task_name)
|
||||
end
|
||||
end
|
||||
end
|
||||
Reference in New Issue
Block a user