- added backup codes for 2 factor authentication
Some checks failed
CI Pipeline / japa-tests (push) Failing after 58s
Some checks failed
CI Pipeline / japa-tests (push) Failing after 58s
- npm updates - coverage validation: elevation ust be positive, depth must be negative - vinejs-provider.js: get enabled extensions from database, not via validOptions.extnames - vue components for backup codes: e.g.: PersonalSettings.vue - validate spaital coverage in leaflet map: draw.component.vue, map.component.vue - add backup code authentication into Login.vue - preset to use no preferred reviewer: Release.vue - 2 new vinejs validation rules: file_scan.ts and file-length.ts
This commit is contained in:
parent
ac473b1e72
commit
005df2e454
32 changed files with 1416 additions and 526 deletions
|
|
@ -7,22 +7,32 @@
|
|||
<DrawControlComponent ref="draw" :mapId="mapId" :southWest="southWest" :northEast="northEast" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="gba-control-validate btn-group-vertical">
|
||||
<button
|
||||
class="min-w-27 inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 text-black text-sm p-1"
|
||||
type="button"
|
||||
@click.stop.prevent="validateBoundingBox"
|
||||
:class="[validBoundingBox ? 'cursor-not-allowed bg-green-500 is-active' : 'bg-red-500 ']"
|
||||
>
|
||||
<!-- <BaseIcon v-if="mdiMapCheckOutline" :path="mdiMapCheckOutline" /> -->
|
||||
{{ label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { EventEmitter } from './EventEmitter';
|
||||
import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
|
||||
// import type { Coverage } from '@/Dataset';
|
||||
// import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer, latLng, latLngBounds, FeatureGroup } from 'leaflet';
|
||||
import { Map } from 'leaflet/src/map/index';
|
||||
import { Control } from 'leaflet/src/control/Control';
|
||||
import { LatLngBoundsExpression, toLatLngBounds } from 'leaflet/src/geo/LatLngBounds';
|
||||
import { toLatLng } from 'leaflet/src/geo/LatLng';
|
||||
import { LatLngBoundsExpression, LatLngBounds } from 'leaflet/src/geo/LatLngBounds';
|
||||
// import { toLatLng } from 'leaflet/src/geo/LatLng';
|
||||
import { LatLng } from 'leaflet'; //'leaflet/src/geo/LatLng';
|
||||
import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
|
||||
import { Attribution } from 'leaflet/src/control/Control.Attribution';
|
||||
// import { Attribution } from 'leaflet';
|
||||
// import { FeatureGroup } from 'leaflet/src/layer/FeatureGroup';
|
||||
import { mdiMapCheckOutline } from '@mdi/js';
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
|
||||
import { MapOptions } from './MapOptions';
|
||||
import { LayerOptions, LayerMap } from './LayerOptions';
|
||||
|
|
@ -32,6 +42,7 @@ import DrawControlComponent from './draw.component.vue';
|
|||
import { Coverage } from '@/Dataset';
|
||||
import { canvas } from 'leaflet/src/layer/vector/Canvas';
|
||||
import { svg } from 'leaflet/src/layer/vector/SVG';
|
||||
import Notification from '@/utils/toast';
|
||||
|
||||
Map.include({
|
||||
// @namespace Map; @method getRenderer(layer: Path): Renderer
|
||||
|
|
@ -84,6 +95,7 @@ const DEFAULT_BASE_LAYER_ATTRIBUTION = '© <a target="_blank" href="http://o
|
|||
components: {
|
||||
ZoomControlComponent,
|
||||
DrawControlComponent,
|
||||
BaseIcon,
|
||||
},
|
||||
})
|
||||
export default class MapComponent extends Vue {
|
||||
|
|
@ -119,14 +131,40 @@ export default class MapComponent extends Vue {
|
|||
@Prop()
|
||||
public baseMaps: LayerMap;
|
||||
|
||||
get label(): string {
|
||||
return this.validBoundingBox ? ' valid' : 'invalid';
|
||||
}
|
||||
|
||||
get validBoundingBox(): boolean {
|
||||
let isValidNumber =
|
||||
(typeof this.coverage.x_min === 'number' || !isNaN(Number(this.coverage.x_min))) &&
|
||||
(typeof this.coverage.y_min === 'number' || !isNaN(Number(this.coverage.y_min))) &&
|
||||
(typeof this.coverage.x_max === 'number' || !isNaN(Number(this.coverage.x_max))) &&
|
||||
(typeof this.coverage.y_max === 'number' || !isNaN(Number(this.coverage.y_max)));
|
||||
|
||||
let isBoundValid = true;
|
||||
if (isValidNumber) {
|
||||
let _southWest: LatLng = new LatLng(this.coverage.y_min, this.coverage.x_min);
|
||||
let _northEast: LatLng = new LatLng(this.coverage.y_max, this.coverage.x_max);
|
||||
const bounds = new LatLngBounds(this.southWest, this.northEast);
|
||||
if (!bounds.isValid() || !(_southWest.lat < _northEast.lat && _southWest.lng < _northEast.lng)) {
|
||||
// this.draw.removeShape();
|
||||
// Notification.showTemporary('Bounds are not valid.');
|
||||
isBoundValid = false;
|
||||
}
|
||||
}
|
||||
return isValidNumber && isBoundValid;
|
||||
}
|
||||
|
||||
@Ref('zoom') private zoom: ZoomControlComponent;
|
||||
@Ref('draw') private draw: DrawControlComponent;
|
||||
|
||||
// services:
|
||||
mapService = MapService();
|
||||
|
||||
southWest;
|
||||
northEast;
|
||||
mdiMapCheckOutline = mdiMapCheckOutline;
|
||||
southWest: LatLng;
|
||||
northEast: LatLng;
|
||||
|
||||
/**
|
||||
* Informs when initialization is done with map id.
|
||||
|
|
@ -136,8 +174,65 @@ export default class MapComponent extends Vue {
|
|||
public map!: Map;
|
||||
// protected drawnItems!: FeatureGroup<any>;
|
||||
|
||||
// @Prop({ type: Object })
|
||||
// geolocation: Coverage;
|
||||
validateBoundingBox() {
|
||||
if (this.validBoundingBox == false) {
|
||||
this.draw.removeShape();
|
||||
Notification.showError('Bounds are not valid.');
|
||||
return;
|
||||
}
|
||||
this.map.control && this.map.control.disable();
|
||||
var _this = this;
|
||||
// // _this.locationErrors.length = 0;
|
||||
// this.drawnItems.clearLayers();
|
||||
// //var xmin = document.getElementById("xmin").value;
|
||||
// var xmin = (<HTMLInputElement>document.getElementById("xmin")).value;
|
||||
// // var ymin = document.getElementById("ymin").value;
|
||||
// var ymin = (<HTMLInputElement>document.getElementById("ymin")).value;
|
||||
// //var xmax = document.getElementById("xmax").value;
|
||||
// var xmax = (<HTMLInputElement>document.getElementById("xmax")).value;
|
||||
// //var ymax = document.getElementById("ymax").value;
|
||||
// var ymax = (<HTMLInputElement>document.getElementById("ymax")).value;
|
||||
// var bounds = [[ymin, xmin], [ymax, xmax]];
|
||||
|
||||
// let _southWest: LatLng;
|
||||
// let _northEast: LatLng;
|
||||
// if (this.coverage.x_min && this.coverage.y_min) {
|
||||
let _southWest: LatLng = new LatLng(this.coverage.y_min, this.coverage.x_min);
|
||||
// }
|
||||
// if (this.coverage.x_max && this.coverage.y_max) {
|
||||
let _northEast: LatLng = new LatLng(this.coverage.y_max, this.coverage.x_max);
|
||||
// }
|
||||
const bounds = new LatLngBounds(this.southWest, this.northEast);
|
||||
if (!bounds.isValid() || !(_southWest.lat < _northEast.lat && _southWest.lng < _northEast.lng)) {
|
||||
this.draw.removeShape();
|
||||
Notification.showTemporary('Bounds are not valid.');
|
||||
} else {
|
||||
// this.draw.drawShape(_southWest, _northEast);
|
||||
try {
|
||||
this.draw.drawShape(_southWest, _northEast);
|
||||
_this.map.fitBounds(bounds);
|
||||
|
||||
// var boundingBox = L.rectangle(bounds, { color: "#005F6A", weight: 1 });
|
||||
// // this.geolocation.xmin = xmin;
|
||||
// // this.geolocation.ymin = ymin;
|
||||
// // this.geolocation.xmax = xmax;
|
||||
// // this.geolocation.ymax = ymax;
|
||||
|
||||
// _this.drawnItems.addLayer(boundingBox);
|
||||
// _this.map.fitBounds(bounds);
|
||||
// this.options.message = "valid bounding box";
|
||||
// this.$toast.success("valid bounding box", this.options);
|
||||
Notification.showSuccess('valid bounding box');
|
||||
} catch (err) {
|
||||
// this.options.message = e.message;
|
||||
// // _this.errors.push(e);
|
||||
// this.$toast.error(e.message, this.options);
|
||||
Notification.showTemporary('An error occurred while drawing bounding box');
|
||||
// generatingCodes.value = false;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mounted(): void {
|
||||
this.initMap();
|
||||
|
|
@ -195,26 +290,26 @@ export default class MapComponent extends Vue {
|
|||
// this.map.fitBounds(this.fitBounds);
|
||||
// }
|
||||
if (this.coverage.x_min && this.coverage.y_min) {
|
||||
this.southWest = toLatLng(this.coverage.y_min, this.coverage.x_min);
|
||||
this.southWest = new LatLng(this.coverage.y_min, this.coverage.x_min);
|
||||
} else {
|
||||
this.southWest = toLatLng(46.5, 9.9);
|
||||
this.southWest = new LatLng(46.5, 9.9);
|
||||
}
|
||||
if (this.coverage.x_max && this.coverage.y_max) {
|
||||
this.northEast = toLatLng(this.coverage.y_max, this.coverage.x_max);
|
||||
this.northEast = new LatLng(this.coverage.y_max, this.coverage.x_max);
|
||||
} else {
|
||||
this.northEast = toLatLng(48.9, 16.9);
|
||||
this.northEast = new LatLng(48.9, 16.9);
|
||||
} // this.northEast = toLatLng(48.9, 16.9);
|
||||
const bounds = toLatLngBounds(this.southWest, this.northEast);
|
||||
const bounds = new LatLngBounds(this.southWest, this.northEast);
|
||||
map.fitBounds(bounds);
|
||||
|
||||
if (this.coverage.x_min && this.coverage.x_max && this.coverage.y_min && this.coverage.y_max) {
|
||||
let _southWest;
|
||||
let _northEast;
|
||||
let _southWest: LatLng;
|
||||
let _northEast: LatLng;
|
||||
if (this.coverage.x_min && this.coverage.y_min) {
|
||||
_southWest = toLatLng(this.coverage.y_min, this.coverage.x_min);
|
||||
_southWest = new LatLng(this.coverage.y_min, this.coverage.x_min);
|
||||
}
|
||||
if (this.coverage.x_max && this.coverage.y_max) {
|
||||
_northEast = toLatLng(this.coverage.y_max, this.coverage.x_max);
|
||||
_northEast = new LatLng(this.coverage.y_max, this.coverage.x_max);
|
||||
}
|
||||
this.draw.drawShape(_southWest, _northEast);
|
||||
}
|
||||
|
|
@ -257,6 +352,26 @@ export default class MapComponent extends Vue {
|
|||
background: none;
|
||||
}
|
||||
|
||||
.gba-control-validate {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 150px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.btn-group-vertical button {
|
||||
display: block;
|
||||
|
||||
margin-left: 0;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* .leaflet-pane {
|
||||
z-index: 30;
|
||||
} */
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue