wip
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
soraefir 2025-02-28 01:43:32 +01:00
parent 1960036980
commit 7af6d04dd1
Signed by: sora
GPG Key ID: A362EA0491E2EEA0
6 changed files with 128 additions and 114 deletions

View File

@ -1,3 +1,30 @@
:root {
--black: #030B12;
--darkdark: #0C1D2E;
--dark: #203A53;
--lightdark: #425F7C;
--light: #93A9BE;
--lightlight: #B6C5D5;
--white: #F0F3F7;
--orange: ##F5B97D;
--yellow: #F5F57D;
--green: #B9F57D;
--turquoise: #7DF5B9;
--blue: #7DB9F5;
--purple: #B97DF5;
--pink: #F57DB9;
--red: #F57D7D;
--pri: var(--blue);
--alt: var(--pink);
--valid: var(--green);
--error: var(--red);
--warn: var(--orange);
--info: var(--yellow);
--bg: var(--darkdark);
--fg: var(--white);
}
/** /**
* SETTINGS * SETTINGS
*/ */
@ -8,66 +35,66 @@
* BACKGROUND * BACKGROUND
*/ */
.bg-primary { .bg-primary {
background-color: #03a9f4; background-color: var(--blue);
} }
.bg-dark { .bg-dark {
background-color: #18232f; background-color: var(--darkdark);
} }
.bg-secondary { .bg-secondary {
background-color: #e91e63; background-color: var(--pink);
} }
.bg-white { .bg-white {
background-color: #fff; background-color: var(--white);
} }
.bg-success { .bg-success {
background-color: #4caf50; background-color: var(--green);
} }
.bg-info { .bg-info {
background-color: #5bc0de; background-color: var(--yellow);
} }
.bg-warning { .bg-warning {
background-color: #f0ad4e; background-color: var(--orange);
} }
.bg-error { .bg-error {
background-color: #e74c3c; background-color: var(--red);
} }
.bg-gray { .bg-gray {
background-color: #969da6; background-color: var(--lightdark);
} }
.bg-gray-light { .bg-gray-light {
background-color: #eceff1; background-color: var(--lightlight);
} }
/** /**
* BORDER * BORDER
*/ */
.border { .border {
border: 1px solid #d5d9db; border: 1px solid var(--white);
} }
.border-bottom { .border-bottom {
border-bottom: 1px solid #d5d9db; border-bottom: 1px solid var(--white);
} }
.border-left { .border-left {
border-left: 1px solid #d5d9db; border-left: 1px solid var(--white);
} }
.border-right { .border-right {
border-right: 1px solid #d5d9db; border-right: 1px solid var(--white);
} }
.border-top { .border-top {
border-top: 1px solid #d5d9db; border-top: 1px solid var(--white);
} }
/** /**
@ -313,16 +340,16 @@ body {
} }
a { a {
color: #03a9f4; color: var(--blue);
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: rgba(3, 169, 244, 0.8); color: color-mix(in srgb, var(--color-primary), #FFF 15%);
} }
a:focus { a:focus {
color: #03a9f4; color: var(--blue);
} }
.text-huge, .text-huge,
@ -647,7 +674,7 @@ button {
.button--outlined { .button--outlined {
background-color: transparent; background-color: transparent;
border: 1px solid #d5d9db; border: 1px solid var(--white);
color: #03a9f4; color: #03a9f4;
} }
@ -708,7 +735,7 @@ input:-webkit-autofill {
.textarea, .textarea,
.input, .input,
.select { .select {
border: 1px solid #d5d9db; border: 1px solid var(--white);
border-radius: 3px; border-radius: 3px;
box-shadow: none; box-shadow: none;
display: inline-block; display: inline-block;
@ -876,7 +903,7 @@ input:-webkit-autofill {
.checkbox input[type="checkbox"]+label::before { .checkbox input[type="checkbox"]+label::before {
background-color: #eceff1; background-color: #eceff1;
border: 1px solid #d5d9db; border: 1px solid var(--white);
border-radius: 3px; border-radius: 3px;
content: ""; content: "";
display: inline-block; display: inline-block;
@ -929,7 +956,7 @@ input:-webkit-autofill {
.radio input[type="radio"]+label::before { .radio input[type="radio"]+label::before {
background-color: #eceff1; background-color: #eceff1;
border: 1px solid #d5d9db; border: 1px solid var(--white);
border-radius: 20px; border-radius: 20px;
content: ""; content: "";
display: inline-block; display: inline-block;
@ -1580,7 +1607,7 @@ input:-webkit-autofill {
*/ */
.table { .table {
background-color: #eceff1; background-color: #eceff1;
border: 1px solid #d5d9db; border: 1px solid var(--white);
border-collapse: collapse; border-collapse: collapse;
color: #272727; color: #272727;
max-width: 100%; max-width: 100%;
@ -1589,13 +1616,13 @@ input:-webkit-autofill {
.table th, .table th,
.table td { .table td {
border-bottom: 1px solid #d5d9db; border-bottom: 1px solid var(--white);
padding: 8px; padding: 8px;
position: relative; position: relative;
} }
.table thead { .table thead {
border-bottom: 1px solid #d5d9db; border-bottom: 1px solid var(--white);
} }
.table th { .table th {
@ -1670,7 +1697,7 @@ input:-webkit-autofill {
} }
.table--responsive td:first-child { .table--responsive td:first-child {
border-top: 1px solid #d5d9db; border-top: 1px solid var(--white);
} }
.table--responsive th, .table--responsive th,
@ -1682,7 +1709,7 @@ input:-webkit-autofill {
.table--responsive th, .table--responsive th,
.table--responsive td { .table--responsive td {
border-top: 1px solid #d5d9db; border-top: 1px solid var(--white);
display: table-cell; display: table-cell;
} }
} }
@ -1700,7 +1727,7 @@ input:-webkit-autofill {
* *
*/ */
.tabs { .tabs {
border-bottom: 1px solid #d5d9db; border-bottom: 1px solid var(--white);
text-align: center; text-align: center;
} }
@ -3178,7 +3205,7 @@ li {
} }
.map-menu-item { .map-menu-item {
background-color: darkslategrey; background-color: var(--darkdark);
padding: 5px; padding: 5px;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
@ -3195,11 +3222,10 @@ li {
.spinner { .spinner {
position: absolute; position: absolute;
right: 1px; right: 0;
top: 1px; top: 0;
width: 40px; width: 40px;
height: 38px; height: 40px;
background: #fff;
display: block display: block
} }
@ -3209,14 +3235,12 @@ li {
content: ""; content: "";
top: 50%; top: 50%;
left: 50%; left: 50%;
margin: -8px 0 0 -8px; margin: -12px 0 0 -12px;
width: 16px; width: 24px;
height: 16px; height: 24px;
border-radius: 100%; border-radius: 100%;
border: 2px solid transparent; border: 3px solid transparent;
border-top-color: #41b883; border-top-color: var(--blue);
-webkit-box-shadow: 0 0 0 1px transparent;
box-shadow: 0 0 0 1px transparent
} }
.spinner:before { .spinner:before {

View File

@ -12,7 +12,7 @@ Vue.component("l-popup", window.Vue2Leaflet.LPopup);
Vue.component("l-tooltip", window.Vue2Leaflet.LTooltip); Vue.component("l-tooltip", window.Vue2Leaflet.LTooltip);
Vue.component("l-polyline", window.Vue2Leaflet.LPolyline); Vue.component("l-polyline", window.Vue2Leaflet.LPolyline);
Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale); Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale);
Vue.component("multiselect", window.VueMultiselect.default); // Vue.component("multiselect", window.VueMultiselect.default);
Vue.use(window.VueTextareaAutosize); Vue.use(window.VueTextareaAutosize);
const app = new Vue({ const app = new Vue({
@ -23,7 +23,7 @@ const app = new Vue({
map_override: { active: false, center: [0, 0] }, map_override: { active: false, center: [0, 0] },
query: { query: {
type: "", res: [], type: "", res: [], load: false,
}, },
impexp: "", impexp: "",
lang: { lang: {
@ -113,32 +113,28 @@ const app = new Vue({
}, },
search_nominatim: function (f) { search_nominatim: function (f) {
return (q) => { return (q) => api.query_nominatim(q, this.compute_bb(), this.get_filter(f)).catch((_err) => []).then((r) => {
this.query.type = f; r.forEach((rr) => {
return api.query_nominatim(q, this.compute_bb(), this.get_filter(f)).catch((_err) => []).then((r) => { rr.latlon = [parseFloat(rr.lat), parseFloat(rr.lon)];
r.forEach((rr) => { rr.sname = rr.display_name.split(",")[0];
rr.latlon = [parseFloat(rr.lat), parseFloat(rr.lon)];
rr.sname = rr.display_name.split(",")[0];
});
this.query.res = r;
return r
}); });
} this.query.load = false;
this.query.res = r;
return r
});
}, },
search_travel: function (f) { search_travel: function (f) {
return (q) => { return (q) => api.query_flight(q).then((r) => {
this.query.type = f; r.forEach(el => {
return api.query_flight(q).then((r) => { el.path = getGeoLine(
r.forEach(el => { { lat: el.from_geo.lat, lng: el.from_geo.lon },
el.path = getGeoLine( { lat: el.to_geo.lat, lng: el.to_geo.lon }, { dist: 5_000_000 }).map(v => [v.lat, v.lng])
{ lat: el.from_geo.lat, lng: el.from_geo.lon }, el.type = "flight";
{ lat: el.to_geo.lat, lng: el.to_geo.lon }, { dist: 5_000_000 }).map(v => [v.lat, v.lng])
el.type = "flight";
});
this.query.res = r;
return r;
}); });
} this.query.load = false;
this.query.res = r;
return r;
});
}, },
drawer_hover_item: function (item) { drawer_hover_item: function (item) {
@ -166,6 +162,7 @@ const app = new Vue({
search_active: function (q) { search_active: function (q) {
const txt = q.target.value const txt = q.target.value
this.query.load = true;
switch (this.query.type) { switch (this.query.type) {
case 'hotel': return this.search_hotel(txt); case 'hotel': return this.search_hotel(txt);
case 'restaurant': return this.search_restaurant(txt); case 'restaurant': return this.search_restaurant(txt);

View File

@ -3,7 +3,6 @@ script(src="https://unpkg.com/leaflet")
script(src="https://unpkg.com/vue@2") script(src="https://unpkg.com/vue@2")
script(src="https://unpkg.com/vue2-datepicker") script(src="https://unpkg.com/vue2-datepicker")
script(src="https://unpkg.com/vue-textarea-autosize") script(src="https://unpkg.com/vue-textarea-autosize")
script(src="https://unpkg.com/vue-multiselect@2")
script(src="https://unpkg.com/vue2-leaflet") script(src="https://unpkg.com/vue2-leaflet")
script(src="https://unpkg.com/sortablejs") script(src="https://unpkg.com/sortablejs")
script(src="https://unpkg.com/vuedraggable") script(src="https://unpkg.com/vuedraggable")

View File

@ -11,15 +11,7 @@ head
link(rel="stylesheet", href="/public/css/index.css") link(rel="stylesheet", href="/public/css/index.css")
link(rel="stylesheet", href="https://unpkg.com/vue2-datepicker/index.css") link(rel="stylesheet", href="https://unpkg.com/vue2-datepicker/index.css")
link(
rel="stylesheet",
href="https://unpkg.com/vue-multiselect@2/dist/vue-multiselect.min.css"
)
link(rel="stylesheet", href="https://unpkg.com/leaflet/dist/leaflet.css") link(rel="stylesheet", href="https://unpkg.com/leaflet/dist/leaflet.css")
link(
rel="stylesheet",
href="https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.css"
)
link( link(
rel="stylesheet", rel="stylesheet",
href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css" href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css"

View File

@ -1,10 +1,12 @@
.row.text-center .row
.input.text-dark(style="width: 100%") .input.text-dark(style="width: 100%")
input( input(
type="search" type="search"
@input="search_active" @input="search_active"
placeholder="Search ... " placeholder="Search ... "
style="width:85%;"
) )
.spinner(v-if="query.load")
ul ul
li( li(
v-for="item in query.res" v-for="item in query.res"

View File

@ -1,45 +1,45 @@
div div
div div
.row.text-center //- .row.text-center
div //- div
label Hotel //- label Hotel
multiselect#ajax( //- multiselect#ajax(
v-model="journey.leg_get().hotel", //- v-model="journey.leg_get().hotel",
label="sname", //- label="sname",
track-by="place_id", //- track-by="place_id",
placeholder="Type to search", //- placeholder="Type to search",
open-direction="bottom", //- open-direction="bottom",
:options="query.res", //- :options="query.res",
:searchable="true", //- :searchable="true",
:loading="query.type=='hotel'", //- :loading="query.type=='hotel'",
:internal-search="false", //- :internal-search="false",
:clear-on-select="false", //- :clear-on-select="false",
:options-limit="50", //- :options-limit="50",
:limit="1", //- :limit="1",
:max-height="600", //- :max-height="600",
@search-change="search_hotel" //- @search-change="search_hotel"
) //- )
.row.text-center //- .row.text-center
div //- div
label Restoration //- label Restoration
multiselect#ajax( //- multiselect#ajax(
v-model="journey.leg_get().places.restaurants", //- v-model="journey.leg_get().places.restaurants",
label="sname", //- label="sname",
track-by="place_id", //- track-by="place_id",
placeholder="Type to search", //- placeholder="Type to search",
open-direction="bottom", //- open-direction="bottom",
:multiple="true", //- :multiple="true",
:options="query.res", //- :options="query.res",
:searchable="true", //- :searchable="true",
:loading="query.type == 'restaurant'", //- :loading="query.type == 'restaurant'",
:internal-search="false", //- :internal-search="false",
:clear-on-select="false", //- :clear-on-select="false",
:options-limit="50", //- :options-limit="50",
:limit="10", //- :limit="10",
:max-height="600", //- :max-height="600",
@search-change="search_restaurant" //- @search-change="search_restaurant"
) //- )
.row.text-center //- .row.text-center
div div
label Activities label Activities
multiselect#ajax( multiselect#ajax(