Merge branch 'styling' into 'staging'

Styling

See merge request PhilippHofer/rot!15
This commit is contained in:
PhilippHofer 2023-07-30 19:18:11 +00:00
commit e3105ca8d7
11 changed files with 182 additions and 42 deletions

View File

@ -8,3 +8,4 @@
@import 'components/links';
@import 'components/input';
@import 'components/alert';
@import 'components/status';

View File

@ -1,3 +1,13 @@
.input {
@apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
background-color: white;
-webkit-appearance: none;
appearance: none;
}

View File

@ -0,0 +1,15 @@
.status-damage {
@apply inline-block w-[12px] h-[12px] rounded-full mr-2 bg-gray-200;
&-none {
@apply bg-[#15803d];
}
&-light {
@apply bg-[#ffae42];
}
&-locked {
@apply bg-[#f43f5e];
}
}

View File

@ -3,7 +3,6 @@ style.setAttribute("id","multiselect_dropdown_styles");
style.innerHTML = `
.multiselect-dropdown{
display: inline-block;
padding: 2px 5px 0px 5px;
border-radius: 4px;
border: solid 1px #ced4da;
background-color: white;
@ -12,6 +11,8 @@ style.innerHTML = `
background-repeat: no-repeat;
background-position: right .75rem center;
background-size: 16px 12px;
padding: 0.375rem 0.5rem;
line-height: 1.5rem;
}
.multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder{
margin-right:0.5em;
@ -27,20 +28,18 @@ style.innerHTML = `
.multiselect-dropdown span.optext .optdel {
float: right;
margin: 0 -6px 1px 5px;
font-size: 0.7em;
margin-top: 2px;
font-size: 1em;
cursor: pointer;
color: #666;
}
.multiselect-dropdown span.optext .optdel:hover { color: #c66;}
.multiselect-dropdown span.optext .optdel:hover { color:#f43f5e;}
.multiselect-dropdown span.placeholder{
color:#ced4da;
}
.multiselect-dropdown-list-wrapper{
box-shadow: gray 0 3px 8px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
z-index: 100;
padding:2px;
border-radius: 4px;
border-radius: .375rem;
border: solid 1px #ced4da;
display: none;
margin: -1px;
@ -52,6 +51,8 @@ style.innerHTML = `
}
.multiselect-dropdown-list-wrapper .multiselect-dropdown-search{
margin-bottom:5px;
padding: 0.375rem 0.5rem;
line-height: 1.5rem;
}
.multiselect-dropdown-list{
padding:2px;
@ -63,8 +64,8 @@ style.innerHTML = `
width: 6px;
}
.multiselect-dropdown-list::-webkit-scrollbar-thumb {
background-color: #bec4ca;
border-radius:3px;
background-color: rgba(226, 232, 240, 0.8);
border-radius: .375rem;
}
.multiselect-dropdown-list div{
@ -78,7 +79,7 @@ style.innerHTML = `
.multiselect-dropdown-list div.checked{
}
.multiselect-dropdown-list div:hover{
background-color: #ced4da;
background-color: rgba(226, 232, 240, 0.8);
}
.multiselect-dropdown span.maxselected {width:100%;}
.multiselect-dropdown-all-selector {border-bottom:solid 1px #999;}
@ -91,8 +92,8 @@ function MultiselectDropdown(options){
height:'15rem',
placeholder:'Auswählen',
txtSelected:'ausgewählt',
txtAll:'All',
txtRemove: 'Löschen',
txtAll:'Alle',
txtRemove: 'Entfernen',
txtSearch:'Suchen',
...options
};
@ -186,7 +187,7 @@ function MultiselectDropdown(options){
sels.map(x=>{
var c=newEl('span',{class:'optext',text:x.text, srcOption: x});
if((el.attributes['multiselect-hide-x']?.value !== 'true'))
c.appendChild(newEl('span',{class:'optdel',text:'🗙',title:config.txtRemove, onclick:(ev)=>{c.srcOption.listitemEl.dispatchEvent(new Event('click'));div.refresh();ev.stopPropagation();}}));
c.appendChild(newEl('span',{class:'optdel',text:'x',title:config.txtRemove, onclick:(ev)=>{c.srcOption.listitemEl.dispatchEvent(new Event('click'));div.refresh();ev.stopPropagation();}}));
div.appendChild(c);
});

View File

@ -0,0 +1,41 @@
// vite.config.js
import { defineConfig } from "file:///Users/mariebirner/PrivateDev/rot/frontend/node_modules/vite/dist/node/index.js";
import { viteStaticCopy } from "file:///Users/mariebirner/PrivateDev/rot/frontend/node_modules/vite-plugin-static-copy/dist/index.js";
var vite_config_default = defineConfig({
plugins: [
viteStaticCopy({
targets: [
{
src: "./static/[!.]*",
dest: "./"
}
]
})
],
publicDir: false,
// disable copy `public/` to outDir
build: {
rollupOptions: {
input: {
main: "./main.ts"
// Example for more entry points
// test: './src/test.ts',
},
output: {
entryFileNames: "[name].js",
assetFileNames: "[name].css"
}
},
manifest: true,
// generate manifest.json in outDir
outDir: "../static/"
},
css: {
devSourcemap: true
// disabled by default because of performance reasons
}
});
export {
vite_config_default as default
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbWFyaWViaXJuZXIvUHJpdmF0ZURldi9yb3QvZnJvbnRlbmRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9tYXJpZWJpcm5lci9Qcml2YXRlRGV2L3JvdC9mcm9udGVuZC92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvbWFyaWViaXJuZXIvUHJpdmF0ZURldi9yb3QvZnJvbnRlbmQvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCB7IHZpdGVTdGF0aWNDb3B5IH0gZnJvbSAndml0ZS1wbHVnaW4tc3RhdGljLWNvcHknXG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtcbiAgICB2aXRlU3RhdGljQ29weSh7XG4gICAgICB0YXJnZXRzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBzcmM6ICcuL3N0YXRpYy9bIS5dKicsXG4gICAgICAgICAgZGVzdDogJy4vJyxcbiAgICAgICAgfSxcbiAgICAgIF0sXG4gICAgfSlcbiAgXSxcbiAgcHVibGljRGlyOiBmYWxzZSwgLy8gZGlzYWJsZSBjb3B5IGBwdWJsaWMvYCB0byBvdXREaXJcbiAgYnVpbGQ6IHtcbiAgICByb2xsdXBPcHRpb25zOiB7XG4gICAgICBpbnB1dDoge1xuICAgICAgICBtYWluOiAnLi9tYWluLnRzJyxcbiAgICAgICAgLy8gRXhhbXBsZSBmb3IgbW9yZSBlbnRyeSBwb2ludHNcbiAgICAgICAgLy8gdGVzdDogJy4vc3JjL3Rlc3QudHMnLFxuICAgICAgfSxcbiAgICAgIG91dHB1dDoge1xuICAgICAgICBlbnRyeUZpbGVOYW1lczogJ1tuYW1lXS5qcycsXG4gICAgICAgIGFzc2V0RmlsZU5hbWVzOiAnW25hbWVdLmNzcycsXG4gICAgICB9LFxuICAgIH0sXG4gICAgbWFuaWZlc3Q6IHRydWUsIC8vIGdlbmVyYXRlIG1hbmlmZXN0Lmpzb24gaW4gb3V0RGlyXG4gICAgb3V0RGlyOiAnLi4vc3RhdGljLycsXG4gIH0sXG4gIGNzczoge1xuICAgIGRldlNvdXJjZW1hcDogdHJ1ZSwgLy8gZGlzYWJsZWQgYnkgZGVmYXVsdCBiZWNhdXNlIG9mIHBlcmZvcm1hbmNlIHJlYXNvbnNcbiAgfSxcbn0pIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFnVCxTQUFTLG9CQUFvQjtBQUM3VSxTQUFTLHNCQUFzQjtBQUUvQixJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTO0FBQUEsSUFDUCxlQUFlO0FBQUEsTUFDYixTQUFTO0FBQUEsUUFDUDtBQUFBLFVBQ0UsS0FBSztBQUFBLFVBQ0wsTUFBTTtBQUFBLFFBQ1I7QUFBQSxNQUNGO0FBQUEsSUFDRixDQUFDO0FBQUEsRUFDSDtBQUFBLEVBQ0EsV0FBVztBQUFBO0FBQUEsRUFDWCxPQUFPO0FBQUEsSUFDTCxlQUFlO0FBQUEsTUFDYixPQUFPO0FBQUEsUUFDTCxNQUFNO0FBQUE7QUFBQTtBQUFBLE1BR1I7QUFBQSxNQUNBLFFBQVE7QUFBQSxRQUNOLGdCQUFnQjtBQUFBLFFBQ2hCLGdCQUFnQjtBQUFBLE1BQ2xCO0FBQUEsSUFDRjtBQUFBLElBQ0EsVUFBVTtBQUFBO0FBQUEsSUFDVixRQUFRO0FBQUEsRUFDVjtBQUFBLEVBQ0EsS0FBSztBQUFBLElBQ0gsY0FBYztBQUFBO0FBQUEsRUFDaEI7QUFDRixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=

View File

@ -21,6 +21,7 @@ INSERT INTO "boat" (name, amount_seats, location_id) VALUES ('Haichenbach', 1, 1
INSERT INTO "boat" (name, amount_seats, location_id, owner) VALUES ('private_boat_from_rower', 1, 1, 2);
INSERT INTO "boat" (name, amount_seats, location_id) VALUES ('Joe', 2, 1);
INSERT INTO "boat" (name, amount_seats, location_id) VALUES ('Kaputtes Boot :-(', 7, 1);
INSERT INTO "boat" (name, amount_seats, location_id) VALUES ('Sehr kaputtes Boot :-((', 7, 1);
INSERT INTO "logbook_type" (name) VALUES ('Wanderfahrt');
INSERT INTO "logbook_type" (name) VALUES ('Regatta');
INSERT INTO "logbook" (boat_id, shipmaster, shipmaster_only_steering, departure) VALUES (2, 2, false, '2142-12-24 10:00');
@ -28,3 +29,4 @@ INSERT INTO "logbook" (boat_id, shipmaster, shipmaster_only_steering, departure,
INSERT INTO "logbook" (boat_id, shipmaster, shipmaster_only_steering, departure, arrival, destination, distance_in_km) VALUES (3, 4, false, '2142-12-24 10:00', '2142-12-24 11:30', 'Ottensheim + Regattastrecke', 29);
INSERT INTO "rower" (logbook_id, rower_id) VALUES(3,3);
INSERT INTO "boat_damage" (boat_id, desc, user_id_created, created_at) VALUES(4,'Dolle bei Position 2 fehlt', 5, '2142-12-24 15:02');
INSERT INTO "boat_damage" (boat_id, desc, user_id_created, created_at, lock_boat) VALUES(5, 'TOHT', 5, '2142-12-24 15:02', 1);

View File

@ -1,5 +1,5 @@
use rocket::serde::{Deserialize, Serialize};
use rocket::FromForm;
use serde::{Deserialize, Serialize};
use sqlx::{FromRow, SqlitePool};
#[derive(FromRow, Debug, Serialize, Deserialize)]
@ -19,6 +19,22 @@ pub struct Boat {
external: bool,
}
#[derive(Serialize, Deserialize)]
#[serde(rename_all = "lowercase")]
pub enum BoatDamage {
None,
Light,
Locked,
}
#[derive(Serialize, Deserialize)]
pub struct BoatWithDetails {
#[serde(flatten)]
boat: Boat,
damage: BoatDamage,
on_water: bool,
}
#[derive(FromForm)]
pub struct BoatToAdd<'r> {
pub name: &'r str,
@ -64,6 +80,10 @@ impl Boat {
sqlx::query!("SELECT * FROM boat_damage WHERE boat_id=? AND lock_boat=true AND user_id_verified is null", self.id).fetch_optional(db).await.unwrap().is_some()
}
pub async fn has_minor_damage(&self, db: &SqlitePool) -> bool {
sqlx::query!("SELECT * FROM boat_damage WHERE boat_id=? AND lock_boat=false AND user_id_verified is null", self.id).fetch_optional(db).await.unwrap().is_some()
}
pub async fn on_water(&self, db: &SqlitePool) -> bool {
sqlx::query!(
"SELECT * FROM logbook WHERE boat_id=? AND arrival is null",
@ -75,8 +95,8 @@ impl Boat {
.is_some()
}
pub async fn all(db: &SqlitePool) -> Vec<Self> {
sqlx::query_as!(
pub async fn all(db: &SqlitePool) -> Vec<BoatWithDetails> {
let boats = sqlx::query_as!(
Boat,
"
SELECT id, name, amount_seats, location_id, owner, year_built, boatbuilder, default_shipmaster_only_steering, skull, external
@ -86,7 +106,24 @@ ORDER BY amount_seats DESC
)
.fetch_all(db)
.await
.unwrap() //TODO: fixme
.unwrap(); //TODO: fixme
let mut res = Vec::new();
for boat in boats {
let mut damage = BoatDamage::None;
if boat.has_minor_damage(db).await {
damage = BoatDamage::Light;
}
if boat.is_locked(db).await {
damage = BoatDamage::Locked;
}
res.push(BoatWithDetails {
damage,
on_water: boat.on_water(db).await,
boat,
})
}
res
}
pub async fn create(db: &SqlitePool, boat: BoatToAdd<'_>) -> bool {

View File

@ -1,4 +1,4 @@
use chrono::NaiveDateTime;
use chrono::{Local, NaiveDateTime, TimeZone};
use rocket::FromForm;
use serde::Serialize;
use sqlx::{FromRow, Sqlite, SqlitePool, Transaction};
@ -50,6 +50,8 @@ pub struct LogbookWithBoatAndRowers {
pub boat: Boat,
pub shipmaster_user: User,
pub rowers: Vec<User>,
pub departure_timestamp: i64,
pub arrival_timestamp: Option<i64>,
}
pub enum LogbookUpdateError {
@ -98,11 +100,20 @@ impl Logbook {
let mut ret = Vec::new();
for log in logs {
let date_time_naive =
NaiveDateTime::parse_from_str(&log.departure, "%Y-%m-%d %H:%M").unwrap();
let date_time = Local
.from_local_datetime(&date_time_naive)
.single()
.unwrap();
ret.push(LogbookWithBoatAndRowers {
rowers: Rower::for_log(db, &log).await,
boat: Boat::find_by_id(db, log.boat_id as i32).await.unwrap(),
shipmaster_user: User::find_by_id(db, log.shipmaster as i32).await.unwrap(),
logbook: log,
arrival_timestamp: None, //TODO: send arrival timestmap
departure_timestamp: date_time.timestamp(),
});
}
ret
@ -129,6 +140,8 @@ impl Logbook {
boat: Boat::find_by_id(db, log.boat_id as i32).await.unwrap(),
shipmaster_user: User::find_by_id(db, log.shipmaster as i32).await.unwrap(),
logbook: log,
arrival_timestamp: None,
departure_timestamp: 0,
});
}
ret
@ -146,7 +159,10 @@ impl Logbook {
if boat.on_water(db).await {
return Err(LogbookCreateError::BoatAlreadyOnWater);
}
if (User::find_by_id(db, log.shipmaster as i32).await.unwrap()).on_water(db).await {
if (User::find_by_id(db, log.shipmaster as i32).await.unwrap())
.on_water(db)
.await
{
return Err(LogbookCreateError::ShipmasterAlreadyOnWater);
}
@ -194,19 +210,23 @@ impl Logbook {
Ok(())
}
pub async fn distances(db: &SqlitePool) -> Vec<(String, i64)>{
pub async fn distances(db: &SqlitePool) -> Vec<(String, i64)> {
let result = sqlx::query!("SELECT destination, distance_in_km FROM logbook WHERE id IN (SELECT MIN(id) FROM logbook GROUP BY destination) AND destination IS NOT NULL AND distance_in_km IS NOT NULL;")
.fetch_all(db)
.await
.unwrap();
result.into_iter().filter_map(|r| {
if let (Some(destination), Some(distance_in_km)) = (r.destination, r.distance_in_km) {
result
.into_iter()
.filter_map(|r| {
if let (Some(destination), Some(distance_in_km)) = (r.destination, r.distance_in_km)
{
Some((destination, distance_in_km))
} else {
None
}
}).collect()
})
.collect()
}
async fn remove_rowers(&self, db: &mut Transaction<'_, Sqlite>) {

View File

@ -91,9 +91,20 @@
{% if only_ones %}
{% set_global boats = boats | filter(attribute="amount_seats", value=1) %}
{% endif %}
{% for boat in boats %}
<div id="boat-{{ boat.id }}" onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()">{{ boat.name }}</div>
{% for amount_seats, grouped_boats in boats | group_by(attribute="amount_seats") %}
<div class="pb-2">
<div class="bg-gray-100 text-primary-950 text-center text-sm mb-2">
<strong>{{ amount_seats }}x</strong>
</div>
{% for boat in grouped_boats %}
<div id="boat-{{ boat.id }}" {% if boat.damage != 'locked' %} onclick="document.getElementById('boat_id').value='{{ boat.id }}';updateElementsBasedOnSelectedOption()"{% endif %} class="px-3">
<span class="status-damage status-damage-{{ boat.damage }}"></span>
<span {% if boat.damage == 'locked' or boat.on_water %} class="opacity-50" {% endif %}>{{ boat.name }}</span>
</div>
{% endfor %}
</div>
{% endfor %}
<script>
function updateElementsBasedOnSelectedOption() {
var selectElement = document.getElementById('boat_id');
@ -140,19 +151,19 @@
<div class="flex justify-between">
<div>
<strong class="text-primary-900">
xx:xx Uhr
{{ log.departure_timestamp | date(format="%H:%M") }} Uhr
</strong>
<small class="text-gray-600">({{ log.boat.name }})</small>
</div>
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#log{{ log.id }}" class="inline-block link-primary mr-3">
Details
</a>
</div>
<div>
{% if allowed_to_close and state == "on_water" %}
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
<a href="#" data-sidebar="true" data-trigger="sidebar" data-header="<strong>{{ log.departure_timestamp | date(format="%H:%M") }} Uhr</strong> ({{ log.boat.name }})" data-body="#close{{ log.id }}" class="btn btn-dark w-full mt-3">
Beenden
</a>
{% endif %}
@ -244,6 +255,8 @@
</div>
<div class="relative">
{{ macros::input(label="Distanz", name="distance_in_km", id="distance_in_km_home", type="number", min=0, value=log.distance_in_km, required=true) }}
<span class="absolute right-0 bottom-0 py-1.5 px-2 bg-white border-0 text-gray-600 ring-1 ring-inset ring-gray-300 rounded-br-md rounded-tr-md">km</span>
</div>
{{ macros::input(label="Kommentar", name="comments", type="text", value=log.comments) }}

View File

@ -13,20 +13,20 @@
{% endif %}
<div class="w-full grid md:grid-cols-5 gap-3 mt-5">
<div class="bg-white rounded-md hidden md:block">
<div class="bg-white rounded-md hidden md:block shadow">
<h2 class="h2">Boote</h2>
<div class="p-3">
<div>
{{ log::show_boats(only_ones=false) }}
</div>
</div>
<div class="md:col-span-3 bg-white rounded-md">
<div class="md:col-span-3 bg-white rounded-md shadow">
<h2 class="h2">Neue Ausfahrt</h2>
<div class="p-3">
{{ log::new(only_ones=false, allow_any_shipmaster=true, shipmaster=-1) }}
</div>
</div>
<div class="bg-white rounded-md">
<div class="bg-white rounded-md shadow">
<h2 class="h2">Am Wasser</h2>
<div>

View File

@ -12,20 +12,20 @@
<h1 class="h1">Logbuch</h1>
<div class="w-full grid md:grid-cols-5 gap-3 mt-5">
<div class="bg-white rounded-md hidden md:block">
<div class="bg-white rounded-md hidden md:block shadow">
<h2 class="h2">Boote</h2>
<div class="p-3">
<div>
{{ log::show_boats(only_ones=false) }}
</div>
</div>
<div class="md:col-span-3 bg-white rounded-md">
<div class="md:col-span-3 bg-white rounded-md shadow">
<h2 class="h2">Neue Ausfahrt</h2>
<div class="p-3">
{{ log::new(only_ones=loggedin_user.is_cox==false, allow_any_shipmaster=loggedin_user.is_cox, shipmaster=loggedin_user.id) }}
</div>
</div>
<div class="bg-white rounded-md">
<div class="bg-white rounded-md shadow">
<h2 class="h2">Am Wasser</h2>
{% for log in on_water %}