scss + makefile
This commit is contained in:
parent
d7bdf27e10
commit
083c09f6a5
17
Makefile
17
Makefile
@ -44,14 +44,23 @@ WHITE='\033[1;37m'
|
|||||||
.title:
|
.title:
|
||||||
$(info $(APP_NAME) v$(VERSION))
|
$(info $(APP_NAME) v$(VERSION))
|
||||||
|
|
||||||
.PHONY: fbuild
|
.PHONY: install
|
||||||
fbuild: ## Build frontend
|
install: ## Install all deps
|
||||||
npm install
|
npm install
|
||||||
|
$(info Building Browser MQTT library)
|
||||||
cd node_modules/mqtt
|
cd node_modules/mqtt
|
||||||
npm install
|
npm install
|
||||||
webpack ./mqtt.js --output-library mqtt
|
webpack ./mqtt.js --output-library mqtt
|
||||||
cd ../..
|
|
||||||
npm run build-dev
|
.PHONY: build
|
||||||
|
build: ## Build frontend (default: env=dev)
|
||||||
|
ifeq ($(env), prod)
|
||||||
|
$(info Building frontend for production)
|
||||||
|
npm run build:prod
|
||||||
|
else
|
||||||
|
$(info Building frontend for development)
|
||||||
|
npm run build:dev
|
||||||
|
endif
|
||||||
|
|
||||||
# Public targets
|
# Public targets
|
||||||
.PHONY: test
|
.PHONY: test
|
||||||
|
|||||||
@ -12,7 +12,8 @@ Flightcondroller for PX4 from browser via mqtt-mavlink bridge
|
|||||||
|
|
||||||
### Build frontend (dev)
|
### Build frontend (dev)
|
||||||
```bash
|
```bash
|
||||||
make fbuild
|
make install
|
||||||
|
make build env=dev
|
||||||
```
|
```
|
||||||
### Up frontend (dev)
|
### Up frontend (dev)
|
||||||
```bash
|
```bash
|
||||||
|
|||||||
86
index.html
86
index.html
@ -1,86 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>UDrone</title>
|
|
||||||
<meta name="theme-color" content="#7952b3">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
|
||||||
<style>
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-top: 40px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 330px;
|
|
||||||
padding: 15px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin .checkbox {
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin .form-floating:focus-within {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin input[type="email"] {
|
|
||||||
margin-bottom: -1px;
|
|
||||||
border-bottom-right-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-signin input[type="password"] {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
}
|
|
||||||
.bd-placeholder-img {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
text-anchor: middle;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.bd-placeholder-img-lg {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="text-center">
|
|
||||||
|
|
||||||
<main class="form-signin">
|
|
||||||
<form>
|
|
||||||
<img class="mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
|
|
||||||
<h1 class="h3 mb-3 fw-normal">Ввійдіть будьласка</h1>
|
|
||||||
|
|
||||||
<div class="form-floating">
|
|
||||||
<input type="text" class="form-control" id="floatingInput" placeholder="name@example.com">
|
|
||||||
<label for="floatingInput">Логін</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-floating">
|
|
||||||
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
|
||||||
<label for="floatingPassword">Пароль</label>
|
|
||||||
</div>
|
|
||||||
<a href="dashboard.html" class="w-100 btn btn-lg btn-primary" type="submit">Вхід</a>
|
|
||||||
<p class="mt-5 mb-3 text-muted">© 2022</p>
|
|
||||||
</form>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
95
map.html
95
map.html
@ -4,102 +4,9 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>UDrone</title>
|
<title>UDrone</title>
|
||||||
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||||
<link rel="stylesheet" type="text/css" href="./node_modules/flight-indicators-js/css/flight-indicators.css" />
|
|
||||||
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet">
|
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css" rel="stylesheet">
|
||||||
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>
|
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"></script>
|
||||||
<style>
|
<link rel="stylesheet" href="/dist/style.css">
|
||||||
body { margin: 0; padding: 0; font-family: sans-serif;}
|
|
||||||
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
|
||||||
#ui {
|
|
||||||
z-index: 99999;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.instrument .hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.context-menu {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 10000;
|
|
||||||
}
|
|
||||||
.menu {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #edece1;
|
|
||||||
padding: 10px 0;
|
|
||||||
margin: 0;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
|
|
||||||
background-color: #232323;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mapboxgl-ctrl-group button {
|
|
||||||
background-color: #232323;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu > li > a {
|
|
||||||
|
|
||||||
font: inherit;
|
|
||||||
border: 0;
|
|
||||||
padding: 10px 30px 10px 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
text-decoration: unset;
|
|
||||||
color: #000;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.menu > li > a:hover {
|
|
||||||
background:#f1f3f7;
|
|
||||||
color: #013b01;
|
|
||||||
}
|
|
||||||
.menu > li {
|
|
||||||
text-decoration: none;
|
|
||||||
list-style-type: none; /* Remove bullets */
|
|
||||||
padding: 0; /* Remove padding */
|
|
||||||
margin: 0; /* Remove margins */
|
|
||||||
}
|
|
||||||
.menu > li > a > i {
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
.menu > li.trash > a:hover {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mapboxgl-popup {
|
|
||||||
max-width: 400px;
|
|
||||||
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#data {
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
width: 50%;
|
|
||||||
border-radius: 25px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
padding: 10px 25px;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
margin: 10px;
|
|
||||||
background-color: #232323;
|
|
||||||
color: #fff;
|
|
||||||
border: #838383 solid 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#data > .data_el {
|
|
||||||
padding-right: 10%;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- <iframe width="300" style="position: absolute; z-index: 99999; right: 0;" height="230" src="http://www.youtube.com/embed/yotbnhfRgMY?autoplay=1" frameborder="0" allowfullscreen></iframe> -->
|
<!-- <iframe width="300" style="position: absolute; z-index: 99999; right: 0;" height="230" src="http://www.youtube.com/embed/yotbnhfRgMY?autoplay=1" frameborder="0" allowfullscreen></iframe> -->
|
||||||
|
|||||||
5499
package-lock.json
generated
5499
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -5,8 +5,8 @@
|
|||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"build-dev": "webpack --mode=development",
|
"build:dev": "webpack --mode=development",
|
||||||
"build-prod": "webpack --mode=production"
|
"build:prod": "webpack --mode=production"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
@ -21,6 +21,11 @@
|
|||||||
"@babel/preset-env": "^7.18.10",
|
"@babel/preset-env": "^7.18.10",
|
||||||
"babel-loader": "^8.2.5",
|
"babel-loader": "^8.2.5",
|
||||||
"compression-webpack-plugin": "^10.0.0",
|
"compression-webpack-plugin": "^10.0.0",
|
||||||
|
"css-loader": "^6.7.1",
|
||||||
|
"css-minimizer-webpack-plugin": "^4.1.0",
|
||||||
|
"mini-css-extract-plugin": "^2.6.1",
|
||||||
|
"node-sass": "^7.0.3",
|
||||||
|
"sass-loader": "^13.0.2",
|
||||||
"terser-webpack-plugin": "^5.3.6",
|
"terser-webpack-plugin": "^5.3.6",
|
||||||
"webpack": "^5.74.0",
|
"webpack": "^5.74.0",
|
||||||
"webpack-build-notifier": "^2.3.0",
|
"webpack-build-notifier": "^2.3.0",
|
||||||
|
|||||||
@ -6,6 +6,8 @@ import RJSON from 'relaxed-json';
|
|||||||
import { RulerControl, StylesControl } from 'mapbox-gl-controls';
|
import { RulerControl, StylesControl } from 'mapbox-gl-controls';
|
||||||
import MiniMap from "./mapbox/mapbox-minimap"
|
import MiniMap from "./mapbox/mapbox-minimap"
|
||||||
|
|
||||||
|
import './scss/app.scss';
|
||||||
|
|
||||||
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNzYWRhIiwiYSI6ImNrbTkzd2RlOTBrMmwyb3BoZGZ5bXpyZXIifQ.qPyi1nxJHcc4Z1xL1EKuuA';
|
mapboxgl.accessToken = 'pk.eyJ1IjoiYXNzYWRhIiwiYSI6ImNrbTkzd2RlOTBrMmwyb3BoZGZ5bXpyZXIifQ.qPyi1nxJHcc4Z1xL1EKuuA';
|
||||||
const map = new mapboxgl.Map({
|
const map = new mapboxgl.Map({
|
||||||
container: 'map', // container ID
|
container: 'map', // container ID
|
||||||
|
|||||||
93
src/scss/app.scss
Normal file
93
src/scss/app.scss
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
@import '/node_modules/flight-indicators-js/css/flight-indicators.css';
|
||||||
|
|
||||||
|
body { margin: 0; padding: 0; font-family: sans-serif;}
|
||||||
|
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
||||||
|
#ui {
|
||||||
|
z-index: 99999;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instrument .hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.context-menu {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10000;
|
||||||
|
}
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #edece1;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin: 0;
|
||||||
|
border-bottom-left-radius: 5px;
|
||||||
|
border-bottom-right-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
|
||||||
|
background-color: #232323;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapboxgl-ctrl-group button {
|
||||||
|
background-color: #232323;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu > li > a {
|
||||||
|
|
||||||
|
font: inherit;
|
||||||
|
border: 0;
|
||||||
|
padding: 10px 30px 10px 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
text-decoration: unset;
|
||||||
|
color: #000;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.menu > li > a:hover {
|
||||||
|
background:#f1f3f7;
|
||||||
|
color: #013b01;
|
||||||
|
}
|
||||||
|
.menu > li {
|
||||||
|
text-decoration: none;
|
||||||
|
list-style-type: none; /* Remove bullets */
|
||||||
|
padding: 0; /* Remove padding */
|
||||||
|
margin: 0; /* Remove margins */
|
||||||
|
}
|
||||||
|
.menu > li > a > i {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
.menu > li.trash > a:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapboxgl-popup {
|
||||||
|
max-width: 400px;
|
||||||
|
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 25px;
|
||||||
|
height: 25px;
|
||||||
|
line-height: 25px;
|
||||||
|
padding: 10px 25px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 10px;
|
||||||
|
background-color: #232323;
|
||||||
|
color: #fff;
|
||||||
|
border: #838383 solid 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data > .data_el {
|
||||||
|
padding-right: 10%;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
@ -1,6 +1,8 @@
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
|
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
|
||||||
const CompressionPlugin = require("compression-webpack-plugin");
|
const CompressionPlugin = require("compression-webpack-plugin");
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
|
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
|
||||||
|
|
||||||
|
|
||||||
module.exports = (env, argv) => {
|
module.exports = (env, argv) => {
|
||||||
@ -18,7 +20,15 @@ module.exports = (env, argv) => {
|
|||||||
test: /\.(js)$/,
|
test: /\.(js)$/,
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
use: ['babel-loader']
|
use: ['babel-loader']
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
test:/\.(s*)css$/,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader',
|
||||||
|
]
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
@ -26,6 +36,9 @@ module.exports = (env, argv) => {
|
|||||||
title: "UDrone",
|
title: "UDrone",
|
||||||
suppressSuccess: false, // don't spam success notifications
|
suppressSuccess: false, // don't spam success notifications
|
||||||
}),
|
}),
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: 'style.css',
|
||||||
|
})
|
||||||
],
|
],
|
||||||
optimization: {
|
optimization: {
|
||||||
minimize: isProduction,
|
minimize: isProduction,
|
||||||
@ -40,7 +53,8 @@ module.exports = (env, argv) => {
|
|||||||
},
|
},
|
||||||
new CompressionPlugin({
|
new CompressionPlugin({
|
||||||
test: /\.js(\?.*)?$/i,
|
test: /\.js(\?.*)?$/i,
|
||||||
})
|
}),
|
||||||
|
new CssMinimizerPlugin(),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user