Modifiquem l'express per que faci de proxy amb el server fastAPI; Renombrem static com a public again;

develop
orzo 11 months ago
parent 04b464fada
commit 5ba8254848
  1. 2
      .gitignore
  2. 36
      client/index.js
  3. 13
      client/package-lock.json
  4. 2
      client/package.json
  5. 13
      client/public/index.css
  6. 10
      client/public/index.html
  7. 2
      client/public/js/index.js
  8. 4
      client/public/js/map.js
  9. 22
      client/public/style/index.css
  10. 10
      server/main.py
  11. 10
      server/public/index.html
  12. 8
      server/run_server

2
.gitignore vendored

@ -5,4 +5,4 @@ images
node_modules
__pycache__
log/*
server/static/*
server/public/*

@ -1,10 +1,9 @@
const path = require ('path');
const express = require("express"); //carreguem el framework express
const bodyParser = require("body-parser");
const sqlite = require('spatialite');
const axios = require("axios");
const app = express (); //inicialitzem express
const db = new sqlite.Database('parceles.sqlite');
//settings
app.set('port', process.env.PORT || 3000); //etablim quin ha de ser el port. El comando process.env.PORT indica que si hi ha un port preconfigurat a la màquina, agafi aquest iq ue si no sigui el 3000
@ -15,29 +14,16 @@ app.use(express.static(path.join(__dirname,'public'))); //en comptes de posar el
// Instantiate the bodyParser configured to work with json payloads and attach it to the express app
app.use(bodyParser.json());
// parceles endpoint
app.post('/parceles', function(req, res){
var query = `SELECT
ogc_fid,
refcat,
AsGeoJSON(geometry) AS "geometry"
FROM
parceles
WHERE
ST_Intersects(
geometry,
ST_GeomFromText('POLYGON((${req.body.east} ${req.body.north}, ${req.body.east} ${req.body.south},${req.body.west} ${req.body.south}, ${req.body.west} ${req.body.north}, ${req.body.east} ${req.body.north}))', 4326)
);`;
db.spatialite(function(err){
const features = [];
db.each(query, function (err, row) {
features.push(`{"type":"Feature","properties":{"ogc_fid":${row.ogc_fid},"refcat":"${row.refcat}"},"geometry":${row.geometry}}`);
}, function (err, count) {
res.send(`{"type": "FeatureCollection", "features": [${features.join(",")}]}`);
});
});
});
// API proxy
app.get('/rest/*', function (req, res) {
axios.get('http://127.0.0.1:8050/' + req.params['0'])
.then(function (proxy_res) {
res.json(proxy_res.data);
}).catch(function (err) {
console.error(err);
console.warn('Unable to reach the API');
})
})
//start the server
const server = app.listen(app.get('port'), () => { //amb aquest comando començem a utilitzar el port

@ -164,6 +164,14 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
"optional": true
},
"axios": {
"version": "0.24.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
"integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
"requires": {
"follow-redirects": "^1.14.4"
}
},
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@ -728,6 +736,11 @@
"unpipe": "~1.0.0"
}
},
"follow-redirects": {
"version": "1.14.5",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
"integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
},
"forever-agent": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",

@ -11,9 +11,9 @@
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.24.0",
"express": "^4.17.1",
"socket.io": "^4.1.2",
"spatialite": "^0.1.0",
"vue": "^2.6.14"
},
"devDependencies": {

@ -1,13 +0,0 @@
#map {
height: 1000px;
}
#mapInfo {
position: absolute;
z-index: 1000;
background-color: red;
color: white;
top: 10px;
right: 10px;
font-size: 30px;
}

@ -10,10 +10,10 @@
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<link rel="stylesheet" href="/static/index.css" />
<link rel="stylesheet" href="/style/index.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="/static/vendor/vue.min.js"></script>
<script src="/vendor/vue.min.js"></script>
<title>Map</title>
</head>
@ -21,8 +21,8 @@
<body>
<div id="app"></div>
<script src="/static/js/models/geometries.js"></script>
<script src="/static/js/map.js"></script>
<script src="/static/js/index.js"></script>
<script src="/js/models/geometries.js"></script>
<script src="/js/map.js"></script>
<script src="/js/index.js"></script>
</body>
</html>

@ -16,7 +16,7 @@ var myView = new Vue({
},
methods: {
onMapInfo(event) {
this.nomDistricte = event.target.feature.propertie.nom;
this.nomDistricte = event.target.feature.properties.nom;
},
},
});

@ -43,7 +43,7 @@ const MapView = Vue.component("map-view", {
self.layers.clearLayers();
self.layers.addData(data);
});
} else if (self.map.getZoom() > 12 && self.map.getZoom() <= 16) {
} else if (self.map.getZoom() > 12 && self.map.getZoom() <= 15) {
self.model.load("barris", self.boundingBox()).then((data) => {
self.layers.clearLayers();
self.layers.addData(data);
@ -136,6 +136,8 @@ const MapView = Vue.component("map-view", {
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
this.$emit("info", event);
},
resetHighlight: function (event) {
this.layers.resetStyle(event.target);

@ -0,0 +1,22 @@
* {
font-size: 18px;
font-family: 'Courier New', monospace;
line-height: 1.8;
color: #252535;
}
body {margin: 0; padding: 0px;}
#map {
height: 100vh;
}
#mapInfo {
position: absolute;
z-index: 1000;
background-color: red;
color: white;
top: 10px;
right: 10px;
font-size: 30px;
}

@ -9,14 +9,10 @@ import aiofiles
dir = os.path.dirname(__file__)
app = web.Application()
app.router.add_static('/static',
path=os.path.join(dir, 'static'),
name='static')
async def index(request):
if request.method == 'GET':
async with aiofiles.open(os.path.join(dir, 'static', 'index.html')) as conn:
async with aiofiles.open(os.path.join(dir, 'public', 'index.html')) as conn:
return web.Response(text=await conn.read(), content_type='text/html')
return web.HTTPMethodNotAllowed
@ -38,6 +34,10 @@ app.add_routes([
web.get("/rest/{path:.+}", api)
])
app.router.add_static('/',
path=os.path.join(dir, 'public'),
name='public')
if __name__ == "__main__":
web.run_app(app)

@ -10,10 +10,10 @@
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""
/>
<link rel="stylesheet" href="/static/index.css" />
<link rel="stylesheet" href="/style/index.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="/static/vendor/vue.min.js"></script>
<script src="/vendor/vue.min.js"></script>
<title>Map</title>
</head>
@ -21,8 +21,8 @@
<body>
<div id="app"></div>
<script src="/static/js/models/geometries.js"></script>
<script src="/static/js/map.js"></script>
<script src="/static/js/index.js"></script>
<script src="/js/models/geometries.js"></script>
<script src="/js/map.js"></script>
<script src="/js/index.js"></script>
</body>
</html>

@ -0,0 +1,8 @@
#!/usr/bin/env bash
cwd="$(cd $(dirname $0) && pwd)"
cd $cwd
echo "$cwd"
.venv/bin/uvicorn src.api.main:app --reload --port 8050
Loading…
Cancel
Save