dev #160
@ -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
|
||||
*/
|
||||
@ -8,66 +35,66 @@
|
||||
* BACKGROUND
|
||||
*/
|
||||
.bg-primary {
|
||||
background-color: #03a9f4;
|
||||
background-color: var(--blue);
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: #18232f;
|
||||
background-color: var(--darkdark);
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: #e91e63;
|
||||
background-color: var(--pink);
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #fff;
|
||||
background-color: var(--white);
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: #4caf50;
|
||||
background-color: var(--green);
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
background-color: #5bc0de;
|
||||
background-color: var(--yellow);
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
background-color: #f0ad4e;
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
.bg-error {
|
||||
background-color: #e74c3c;
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.bg-gray {
|
||||
background-color: #969da6;
|
||||
background-color: var(--lightdark);
|
||||
}
|
||||
|
||||
.bg-gray-light {
|
||||
background-color: #eceff1;
|
||||
background-color: var(--lightlight);
|
||||
}
|
||||
|
||||
/**
|
||||
* BORDER
|
||||
*/
|
||||
.border {
|
||||
border: 1px solid #d5d9db;
|
||||
border: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #d5d9db;
|
||||
border-bottom: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.border-left {
|
||||
border-left: 1px solid #d5d9db;
|
||||
border-left: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.border-right {
|
||||
border-right: 1px solid #d5d9db;
|
||||
border-right: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #d5d9db;
|
||||
border-top: 1px solid var(--white);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -313,16 +340,16 @@ body {
|
||||
}
|
||||
|
||||
a {
|
||||
color: #03a9f4;
|
||||
color: var(--blue);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: rgba(3, 169, 244, 0.8);
|
||||
color: color-mix(in srgb, var(--color-primary), #FFF 15%);
|
||||
}
|
||||
|
||||
a:focus {
|
||||
color: #03a9f4;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.text-huge,
|
||||
@ -647,7 +674,7 @@ button {
|
||||
|
||||
.button--outlined {
|
||||
background-color: transparent;
|
||||
border: 1px solid #d5d9db;
|
||||
border: 1px solid var(--white);
|
||||
color: #03a9f4;
|
||||
}
|
||||
|
||||
@ -708,7 +735,7 @@ input:-webkit-autofill {
|
||||
.textarea,
|
||||
.input,
|
||||
.select {
|
||||
border: 1px solid #d5d9db;
|
||||
border: 1px solid var(--white);
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
@ -876,7 +903,7 @@ input:-webkit-autofill {
|
||||
|
||||
.checkbox input[type="checkbox"]+label::before {
|
||||
background-color: #eceff1;
|
||||
border: 1px solid #d5d9db;
|
||||
border: 1px solid var(--white);
|
||||
border-radius: 3px;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
@ -929,7 +956,7 @@ input:-webkit-autofill {
|
||||
|
||||
.radio input[type="radio"]+label::before {
|
||||
background-color: #eceff1;
|
||||
border: 1px solid #d5d9db;
|
||||
border: 1px solid var(--white);
|
||||
border-radius: 20px;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
@ -1580,7 +1607,7 @@ input:-webkit-autofill {
|
||||
*/
|
||||
.table {
|
||||
background-color: #eceff1;
|
||||
border: 1px solid #d5d9db;
|
||||
border: 1px solid var(--white);
|
||||
border-collapse: collapse;
|
||||
color: #272727;
|
||||
max-width: 100%;
|
||||
@ -1589,13 +1616,13 @@ input:-webkit-autofill {
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
border-bottom: 1px solid #d5d9db;
|
||||
border-bottom: 1px solid var(--white);
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table thead {
|
||||
border-bottom: 1px solid #d5d9db;
|
||||
border-bottom: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.table th {
|
||||
@ -1670,7 +1697,7 @@ input:-webkit-autofill {
|
||||
}
|
||||
|
||||
.table--responsive td:first-child {
|
||||
border-top: 1px solid #d5d9db;
|
||||
border-top: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.table--responsive th,
|
||||
@ -1682,7 +1709,7 @@ input:-webkit-autofill {
|
||||
|
||||
.table--responsive th,
|
||||
.table--responsive td {
|
||||
border-top: 1px solid #d5d9db;
|
||||
border-top: 1px solid var(--white);
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
@ -1700,7 +1727,7 @@ input:-webkit-autofill {
|
||||
*
|
||||
*/
|
||||
.tabs {
|
||||
border-bottom: 1px solid #d5d9db;
|
||||
border-bottom: 1px solid var(--white);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -3178,7 +3205,7 @@ li {
|
||||
}
|
||||
|
||||
.map-menu-item {
|
||||
background-color: darkslategrey;
|
||||
background-color: var(--darkdark);
|
||||
padding: 5px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
@ -3195,11 +3222,10 @@ li {
|
||||
|
||||
.spinner {
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
background: #fff;
|
||||
height: 40px;
|
||||
display: block
|
||||
}
|
||||
|
||||
@ -3209,14 +3235,12 @@ li {
|
||||
content: "";
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -8px 0 0 -8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: -12px 0 0 -12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid transparent;
|
||||
border-top-color: #41b883;
|
||||
-webkit-box-shadow: 0 0 0 1px transparent;
|
||||
box-shadow: 0 0 0 1px transparent
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--blue);
|
||||
}
|
||||
|
||||
.spinner:before {
|
||||
|
@ -12,7 +12,7 @@ Vue.component("l-popup", window.Vue2Leaflet.LPopup);
|
||||
Vue.component("l-tooltip", window.Vue2Leaflet.LTooltip);
|
||||
Vue.component("l-polyline", window.Vue2Leaflet.LPolyline);
|
||||
Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale);
|
||||
Vue.component("multiselect", window.VueMultiselect.default);
|
||||
// Vue.component("multiselect", window.VueMultiselect.default);
|
||||
Vue.use(window.VueTextareaAutosize);
|
||||
|
||||
const app = new Vue({
|
||||
@ -23,7 +23,7 @@ const app = new Vue({
|
||||
map_override: { active: false, center: [0, 0] },
|
||||
|
||||
query: {
|
||||
type: "", res: [],
|
||||
type: "", res: [], load: false,
|
||||
},
|
||||
impexp: "",
|
||||
lang: {
|
||||
@ -113,32 +113,28 @@ const app = new Vue({
|
||||
},
|
||||
|
||||
search_nominatim: function (f) {
|
||||
return (q) => {
|
||||
this.query.type = f;
|
||||
return api.query_nominatim(q, this.compute_bb(), this.get_filter(f)).catch((_err) => []).then((r) => {
|
||||
r.forEach((rr) => {
|
||||
rr.latlon = [parseFloat(rr.lat), parseFloat(rr.lon)];
|
||||
rr.sname = rr.display_name.split(",")[0];
|
||||
});
|
||||
this.query.res = r;
|
||||
return r
|
||||
return (q) => api.query_nominatim(q, this.compute_bb(), this.get_filter(f)).catch((_err) => []).then((r) => {
|
||||
r.forEach((rr) => {
|
||||
rr.latlon = [parseFloat(rr.lat), parseFloat(rr.lon)];
|
||||
rr.sname = rr.display_name.split(",")[0];
|
||||
});
|
||||
}
|
||||
this.query.load = false;
|
||||
this.query.res = r;
|
||||
return r
|
||||
});
|
||||
},
|
||||
search_travel: function (f) {
|
||||
return (q) => {
|
||||
this.query.type = f;
|
||||
return api.query_flight(q).then((r) => {
|
||||
r.forEach(el => {
|
||||
el.path = getGeoLine(
|
||||
{ lat: el.from_geo.lat, lng: el.from_geo.lon },
|
||||
{ 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;
|
||||
return (q) => api.query_flight(q).then((r) => {
|
||||
r.forEach(el => {
|
||||
el.path = getGeoLine(
|
||||
{ lat: el.from_geo.lat, lng: el.from_geo.lon },
|
||||
{ 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.load = false;
|
||||
this.query.res = r;
|
||||
return r;
|
||||
});
|
||||
},
|
||||
|
||||
drawer_hover_item: function (item) {
|
||||
@ -166,6 +162,7 @@ const app = new Vue({
|
||||
|
||||
search_active: function (q) {
|
||||
const txt = q.target.value
|
||||
this.query.load = true;
|
||||
switch (this.query.type) {
|
||||
case 'hotel': return this.search_hotel(txt);
|
||||
case 'restaurant': return this.search_restaurant(txt);
|
||||
|
@ -3,7 +3,6 @@ script(src="https://unpkg.com/leaflet")
|
||||
script(src="https://unpkg.com/vue@2")
|
||||
script(src="https://unpkg.com/vue2-datepicker")
|
||||
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/sortablejs")
|
||||
script(src="https://unpkg.com/vuedraggable")
|
||||
|
@ -11,15 +11,7 @@ head
|
||||
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/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.awesome-markers/dist/leaflet.awesome-markers.css"
|
||||
)
|
||||
link(
|
||||
rel="stylesheet",
|
||||
href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css"
|
||||
|
@ -1,10 +1,12 @@
|
||||
.row.text-center
|
||||
.row
|
||||
.input.text-dark(style="width: 100%")
|
||||
input(
|
||||
type="search"
|
||||
@input="search_active"
|
||||
placeholder="Search ... "
|
||||
style="width:85%;"
|
||||
)
|
||||
.spinner(v-if="query.load")
|
||||
ul
|
||||
li(
|
||||
v-for="item in query.res"
|
||||
|
@ -1,45 +1,45 @@
|
||||
div
|
||||
div
|
||||
.row.text-center
|
||||
div
|
||||
label Hotel
|
||||
multiselect#ajax(
|
||||
v-model="journey.leg_get().hotel",
|
||||
label="sname",
|
||||
track-by="place_id",
|
||||
placeholder="Type to search",
|
||||
open-direction="bottom",
|
||||
:options="query.res",
|
||||
:searchable="true",
|
||||
:loading="query.type=='hotel'",
|
||||
:internal-search="false",
|
||||
:clear-on-select="false",
|
||||
:options-limit="50",
|
||||
:limit="1",
|
||||
:max-height="600",
|
||||
@search-change="search_hotel"
|
||||
)
|
||||
.row.text-center
|
||||
div
|
||||
label Restoration
|
||||
multiselect#ajax(
|
||||
v-model="journey.leg_get().places.restaurants",
|
||||
label="sname",
|
||||
track-by="place_id",
|
||||
placeholder="Type to search",
|
||||
open-direction="bottom",
|
||||
:multiple="true",
|
||||
:options="query.res",
|
||||
:searchable="true",
|
||||
:loading="query.type == 'restaurant'",
|
||||
:internal-search="false",
|
||||
:clear-on-select="false",
|
||||
:options-limit="50",
|
||||
:limit="10",
|
||||
:max-height="600",
|
||||
@search-change="search_restaurant"
|
||||
)
|
||||
.row.text-center
|
||||
//- .row.text-center
|
||||
//- div
|
||||
//- label Hotel
|
||||
//- multiselect#ajax(
|
||||
//- v-model="journey.leg_get().hotel",
|
||||
//- label="sname",
|
||||
//- track-by="place_id",
|
||||
//- placeholder="Type to search",
|
||||
//- open-direction="bottom",
|
||||
//- :options="query.res",
|
||||
//- :searchable="true",
|
||||
//- :loading="query.type=='hotel'",
|
||||
//- :internal-search="false",
|
||||
//- :clear-on-select="false",
|
||||
//- :options-limit="50",
|
||||
//- :limit="1",
|
||||
//- :max-height="600",
|
||||
//- @search-change="search_hotel"
|
||||
//- )
|
||||
//- .row.text-center
|
||||
//- div
|
||||
//- label Restoration
|
||||
//- multiselect#ajax(
|
||||
//- v-model="journey.leg_get().places.restaurants",
|
||||
//- label="sname",
|
||||
//- track-by="place_id",
|
||||
//- placeholder="Type to search",
|
||||
//- open-direction="bottom",
|
||||
//- :multiple="true",
|
||||
//- :options="query.res",
|
||||
//- :searchable="true",
|
||||
//- :loading="query.type == 'restaurant'",
|
||||
//- :internal-search="false",
|
||||
//- :clear-on-select="false",
|
||||
//- :options-limit="50",
|
||||
//- :limit="10",
|
||||
//- :max-height="600",
|
||||
//- @search-change="search_restaurant"
|
||||
//- )
|
||||
//- .row.text-center
|
||||
div
|
||||
label Activities
|
||||
multiselect#ajax(
|
||||
|
Loading…
x
Reference in New Issue
Block a user