Develop Reference

Python - SocketIO Project - Msgs returned in HTML does not jump to end of DIV

I have a problem to solve with the scrollbar in html. I made a chat using socketio and the messages are being presented in a DIV inside an ASIDE. The problem is that when the scrollbar is mounted it leaves the thumb at the beginning. This impairs the navigability and reading of the chat. I would like it to stay in the end of messages.
I'm looking for routines or commands that after assembly, would scroll the bar to the end. Could ScrollTo() help me? If so, where to put it? On CSS? OnJavaScriptCode? On Server Side?
I would like your help. Thanks.
Below is the simplified routine to optimize the understanding of the problem.
app in python
from flask.app import Flask
from flask.templating import render_template
from flask_socketio import SocketIO, emit, send
app = Flask(_name_)
io = SocketIO(app)
messages = []
#app.route("/")
def home():
return render_template("chat.html")
#io.on('sendMessage')
def send_message_handler(msg):
print(msg)
messages.append(msg)
emit('getMessage', msg, broadcast=True)
#io.on('message')
def message_handler(msg):
send(messages)
if _name_ == "_main_":
io.run(app, debug=False, allow_unsafe_werkzeug=True)
Html code part
<aside>
<div class="chat"></div>
</aside>
CSS
main { display:flex;}
.chat {
display: flex;
flex-direction: column;
height:100%
margin-top: 2em;
float: left; /* Make this div as wide as its contents */
min-height: 96vh;
padding-left: 1em;
padding-top: 3em;
padding-right:1em;
border-right: 0.5px solid #898c91;
}
}
.chat span {
margin-bottom: 10px;
}
form {
margin-top: 10px;
}
aside {
overflow:hidden;
overflow-y:scroll;
height:300px;
width:45vh;
background: red;
scroll-snap-align: end;
}
Javascript code
window.onload = function() {
const socket = io('http://127.0.0.1:5000');
function addToChat(msg) {
const span = document.createElement("span");
const chat = document.querySelector(".chat");
span.innerHTML = `<strong>${msg.name}:</strong> ${msg.message}`;
chat.append(span);
}
socket.on('connect', () => {
socket.send('Usuário conectado ao socket!')
});
document.querySelector("form").addEventListener("submit", function(event) {
event.preventDefault();
socket.emit('sendMessage', {name: event.target[0].value, message: event.target[1].value})
event.target[0].value = "";
event.target[1].value = "";
})
socket.on('getMessage', (msg) => {
addToChat(msg)
})
socket.on('message', (msgs) => {
for(msg of msgs) {
addToChat(msg)
}
})
}

I found a solution.
socket.on('getMessage', (msg) => {
addToChat(msg)
const chatWindow = document.querySelector("#idchat");
chatWindow.scrollTop = chatWindow.scrollHeight;
})
That´s works fine! :)

Add loading view during process of the next view in Django

I want to add a loading page during the process, I tried all the solutions here in stackoverflow and different articales, but I'm really surprised that the solutions did not work for me, It's been 2 days and I still didn't find a solution.
I have two pages Home and datatable I want to add a loading page when i redirect from the home page to the datatable one. Please any help is highly appreciated.
this is my view.py :
def home_view(request):
context = {}
context ['form'] = Scraping()
return render(request,'home.html', context)
def datatable_view(request):
if request.method =='POST':
if form.is_valid():
return render(request,'datatable.html')

as i told you ajax calls should work i tried and its working. here's code
in local i had to set TimeOut fuction because response is quick so cant see loading effect.
Html:
<style>
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class="loader" style="display: none;" id="id_loader"></div>
Js click event:
function saveProfile() {
var postData = new FormData();
let token = localStorage.getItem("token");
postData.append('profile_id', $("#id_profile_id").val().trim());
postData.append('user_id', $("#id_user_id").val().trim());
postData.append('username', $("#id_username").val().trim());
postData.append('password', $("#id_password").val().trim());
postData.append('first_name', $("#id_first_name").val().trim());
postData.append('last_name', $("#id_last_name").val().trim());
postData.append('phone', $("#id_phone").val().trim());
postData.append('email', $("#id_email").val().trim());
postData.append('address', $("#id_address").val().trim());
$("#id_loader").show()
setTimeout(function () {
axios({
method: "post",
url: "http://192.168.1.249:7001/profile_save/",
data: postData,
headers: { "Content-Type": "application/json", 'X-CSRFToken': '{{ csrf_token }}', Authorization: `Bearer ${token}`, },
}).then(function (response) {
if (response.data && response.data.code == 1) {
$("#id_loader").hide();
swal("Successful!", response.data.msg, "success")
}
else if (response.data.code == 0) {
$("#id_loader").hide();
swal("Oops!", response.data.msg, "error")
}
})
}, 2000);
}

Need suggestions : Django UserProfile geographic address to connect with others users

I hope you're well,
I'm looking for a plugin or a tutorial for :
a- allow my users to fill in their address on their profile. The best would be to have a map on which they can identify their address or like on the UberEats site.
b- to be able to find the closest users according to their address.
If you have any ideas, I'm interested,
I have already made the profile on Django, all I need is the address field.

The below code will do. You will need Javascript to play around a bit and set your form fields with the returned address.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
.controls {
margin-top: 10px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 300px;
}
#pac-input:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
</style>
<title>Places Searchbox</title>
<style>
#target {
width: 345px;
}
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: -33.8688, lng: 151.2195 },
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
});
map.addListener('click', function (locationdata) {
console.log(locationdata.latLng.lat());
console.log(locationdata.latLng.lng());
var myLatlng = new google.maps.LatLng(locationdata.latLng.lat(), locationdata.latLng.lng());
var myOptions = {
zoom: 13,
center: myLatlng
}
});
var geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function (event) {
geocoder.geocode({
'latLng': event.latLng
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
alert(results[0].formatted_address);
}
}
});
});
var markers = [];
// [START region_getplaces]
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function (marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function (place) {
console.log("lat: " + place.geometry.location.lat() + " lng: " + place.geometry.location.lng())
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// [END region_getplaces]
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkwr5rmzY9btU08sQlU9N0qfmo8YmE91Y&libraries=places&callback=initAutocomplete"
async defer></script>
</body>
</html>
You will need to add markers on map for each select. The code will console log the long and lat also, and return an alert with the address once you click it.
Credit goes to these two threads Link1 and Link2.
I managed to combine both codes and give results as you have mentioned.

Interacting with ChartJS from Flask

I am getting really confused on what to do here. I have a python script that does some cool things and then should display those cool things via some charts.
The way I've seen it's done is via Flask and ChartJS, but every website that I've seen uses it to display static content, which, of course, is not what I need.
I've tried doing this with this template:
<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="/static/chartjs/Chart.min.js"></script>
<script src="/static/chartjs/utils.js"></script>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<br>
<br>
<button id="randomizeData">Randomize Data</button>
<button id="addDataset">Add Dataset</button>
<button id="removeDataset">Remove Dataset</button>
<button id="addData">Add Data</button>
<button id="removeData">Remove Data</button>
<script>
var MONTHS = [];
var config = {
type: 'line',
data: {
labels: ['1/05/19\n00:57', '1/05/19\n00:58', '1/05/19\n00:59', '1/05/19\n01:00', '1/05/19\n01:01', '1/05/19\n01:02', '1/05/19\n01:03'],
{{ dataset }}
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myLine = new Chart(ctx, config);
};
document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
});
});
window.myLine.update();
});
var colorNames = Object.keys(window.chartColors);
document.getElementById('addDataset').addEventListener('click', function() {
var colorName = colorNames[config.data.datasets.length % colorNames.length];
var newColor = window.chartColors[colorName];
var newDataset = {
label: 'Dataset ' + config.data.datasets.length,
backgroundColor: newColor,
borderColor: newColor,
data: [],
fill: false
};
for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
}
config.data.datasets.push(newDataset);
window.myLine.update();
});
document.getElementById('addData').addEventListener('click', function() {
if (config.data.datasets.length > 0) {
var month = MONTHS[1];
config.data.labels.push(month);
config.data.datasets.forEach(function(dataset) {
dataset.data.push(randomScalingFactor());
});
window.myLine.update();
}
});
document.getElementById('removeDataset').addEventListener('click', function() {
config.data.datasets.splice(0, 1);
window.myLine.update();
});
document.getElementById('removeData').addEventListener('click', function() {
config.data.labels.splice(-1, 1); // remove the label first
config.data.datasets.forEach(function(dataset) {
dataset.data.pop();
});
window.myLine.update();
});
</script>
</body>
</html>
This contains a lot of unused stuff (it was downloaded directly from the chart.js samples) and slightly altered by me (see {{ dataset }})
And this is the python code I use to generate the dataset part:
def generate_dataset(self):
data = 'datasets: ['
for post_list_index, post in enumerate(self.post_list):
data = data + "{label: '" + post + "', backgroundColor: window.chartColors.red, borderColor: window.chartColors.red, data: ["
for index, history in enumerate(self.submissions_score_history):
score = history[post_list_index]
if index < len(self.submissions_score_history) - 1:
data = data + str(score) + ','
else:
data = data + str(score)
data = data + '],fill: false,}'
if post_list_index < len(self.post_list) - 1:
data = data + ','
else:
pass
data = data + ']'
return data
Now, unfortunately, this doesnt render anything. I'm pretty sure that this is due to the label: 'label'; being escaped to &#39label'.
I've searched about this issue and apparently this javascript injection thing I'm attempting to do has been removed because it represents a security vulnerability.
This project is quite literally just a dashboard for another small python project that will be used by me only, so I was trying to build something quickly and easily, but this is turning out to be quite troublesome :/

Google Maps API to show highway exit/mile market in xml/json output?

I've developed a script for work that measures the distance traveled in a route by a vehicle, what's the longest distance traveled, and whether the route was from point A to B, a loop, or the vehicle was simply in idle.
I'm using GoogleMaps API to determine all of this, and search through the XML data to determine the current location of the vehicle. There's a 'Vicinity' tag that tells what the current city is at that long/lat coordinate.
I don't see anything describing the current highway exit or mile marker, does anyone know how to get this information through Google?
I apologize if this was asked before. I found a similar post but it was from 7 years ago and stated that GoogleMaps currently did not offer that sort of service.

I think it works pretty well.
It makes double markers sometimes (like two merge markers a few yards apart).
There is some extra code that's probably not used, and some things commented out.
I copy/pasted most of this from another project I was working on.
<style>
body {
width: 100%;
}
#right-panel, #map {
height: 400px;
width: 50%;
float: left;
overflow: auto;
}
hr {
clear: both;
}
</style>
<input id="from" placeholder="from" value="Tulsa"/>
<input id="to" placeholder="to" value="Chicago"/>
<select onchange="routeType(this)">
<option value="DRIVING">DRIVING</option>
<option value="WALKING">WALKING</option>
<option value="BICYCLING">BICYCLING</option>
<option value="TRANSIT">TRANSIT</option>
</select>
<input value="plot" onclick="calculateRoute()" type="button"/>
<hr/>
<div id="map"></div>
<div id="right-panel"></div>
<hr/>
<input onclick="calculateRoute()" value="GO" type="button"/>
<div id="maplog"></div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry"></script>
<script>
var map;
var here = {};
var dest = {};
var directionsService;
var directionsDisplay;
var travelMode = 'DRIVING'; //'WALKING';
var sourcePosition;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35, lng: -100},
zoom: 5,
mapTypeId: 'terrain'
});
var marker = new google.maps.Marker({
position: {lat: 50.8735506, lng: 4.3238525},
map: map,
title: 'Fermenthings winkel'
});
dest.marker = marker;
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
suppressMarkers: true,
panel: document.getElementById('right-panel'),
map: map
});
}
function trackLocation() {
getLocation();
}
google.maps.event.addDomListener(window, 'load', initMap);
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
//x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
// x.innerHTML = "Latitude: " + position.coords.latitude +
// "<br>Longitude: " + position.coords.longitude;
if(map) {
sourcePosition = {lat: position.coords.latitude, lng: position.coords.longitude};
//map.setCenter(sourcePosition);
if(here.marker) {
here.marker.setMap(null);
}
here.marker = new google.maps.Marker({
position: sourcePosition,
draggable: true,
icon: {url: 'thumbnails/here.png'},
map: map
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(sourcePosition);
bounds.extend(dest.marker.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(here.marker, 'position_changed', function() {
sourcePosition = {lat: this.getPosition().lat(), lng: this.getPosition().lng()};
});
google.maps.event.addListener(here.marker, 'dragend', function() {
sourcePosition = {lat: this.getPosition().lat(), lng: this.getPosition().lng()};
calculateRoute();
});
//return;
}
// route
calculateRoute();
}
function createMarker(lat, lng, title) {
return new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
title: title
});
}
function displayRoute(origin, destination, service, display, waypoints, callback) {
if(waypoints) {
var options = {
origin: origin,
destination: destination,
waypoints: waypoints,
travelMode: travelMode //'DRIVING',
};
}
else {
var options = {
origin: origin,
destination: destination,
travelMode: travelMode //'DRIVING',
};
}
service.route(options, function(response, status) {
if (status === 'OK') {
//
//createMarkers(response, callback);
display.setDirections(response);
if(callback) {
callback(response);
}
} else {
// alert('Could not display directions due to: ' + status);
}
});
}
function routeType(elm) {
travelMode = elm.value;
if(sourcePosition) {
calculateRoute();
}
}
function calculateRoute() {
var from = document.getElementById('from').value;
var to = document.getElementById('to').value;
displayRoute(
from,
to,
directionsService,
directionsDisplay,
null, //waypoints,
function(response) {
// loop steps
var steps = response.routes[0].legs[0].steps;
for(var i = 0; i<steps.length; i++) {
var step = response.routes[0].legs[0].steps[i];
// search for keywords in the instructions
if( (step.instructions.indexOf('Take') > -1 || step.instructions.indexOf('take') > -1) && step.instructions.indexOf('exit') > -1) {
//here we enter a highway
document.getElementById('maplog').innerHTML += 'exit: ' + step.start_location.lat() +','+ step.start_location.lng() +'<br/>';
createMarker(step.start_location.lat(), step.start_location.lng(), 'exit');
}
if( (step.instructions.indexOf('Merge') > -1 || step.instructions.indexOf('merge') > -1) && step.instructions.indexOf('onto') > -1) {
//here we exit a highway
document.getElementById('maplog').innerHTML += 'merge: ' + step.start_location.lat() +','+ step.start_location.lng() +'<br/>';
createMarker(step.start_location.lat(), step.start_location.lng(), 'merge');
}
}
//document.getElementById('maplog').innerHTML = JSON.stringify(response);
}
);
}
</script>