Application is receiving data in real time (checked using alert) while to display it on the card, it gives error Internal Server Error
Same Code is running well as an independent html page but not in flask python web app.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Cosmos DB Change Feed</title>
<style>
.fade-enter-active {
transition: all 1.5s ease;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
Welcome new
<div class="container" id="app">
<div class="row">
<div v-for="flight in flights" class="col-md-6 col-lg-4 col-xl-3" style="margin: 16px 0px;">
<div class="card">
<div class="card-body">
<h4 class="card-title">{{ flight.from }} <i class="fas fa-plane"></i> {{ flight.to }}</h4>
<transition name="fade" mode="out-in">
<h4 class="card-subtitle mb-2" :key="flight.price">${{ flight.price }}</h4>
</transition>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/@aspnet/signalr@1.0.2/dist/browser/signalr.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const apiBaseUrl = 'http://localhost:7071'
const axiosConfig = {}
const data = {
flights: []
}
const app = new Vue({
el: '#app',
data: data
})
getFlights().then(function (flights) {
flights.forEach(flightUpdated)
}).then(getConnectionInfo).then(function (info) {
let accessToken = info.accessToken
const options = {
accessTokenFactory: function () {
if (accessToken) {
const _accessToken = accessToken
accessToken = null
return _accessToken
} else {
return getConnectionInfo().then(function (info) {
return info.accessToken
})
}
}
}
const connection = new signalR.HubConnectionBuilder()
.withUrl(info.url, options)
.build()
connection.on('flightUpdated', flightUpdated)
connection.onclose(function () {
console.log('disconnected')
setTimeout(function () { startConnection(connection) }, 2000)
})
startConnection(connection)
}).catch(console.error)
function startConnection(connection) {
console.log('connecting...')
connection.start()
.then(function () { console.log('connected!') })
.catch(function (err) {
console.error(err)
setTimeout(function () { startConnection(connection) }, 2000)
})
}
function getFlights() {
return axios.post(`${apiBaseUrl}/api/GetFlights`, null, axiosConfig)
.then(function (resp) { return resp.data })
.catch(function () { return {} })
}
function getConnectionInfo() {
return axios.post(`${apiBaseUrl}/api/SignalRInfo`, null, axiosConfig)
.then(function (resp) { return resp.data })
.catch(function () { return {} })
}
function flightUpdated(updatedFlight) {
const flight = data.flights.find(f => (f.to === updatedFlight.to && f.from === updatedFlight.from))
//const flight = data.flights.find(f =>f.id === updatedFlight.id)
if (flight) {
// alert(updatedFlight.price);
//Vue.set(flight, 'from', updatedFlight.from)
// Vue.set(flight, 'to', updatedFlight.to)
Vue.set(flight, 'price', updatedFlight.price)
} else {
// alert(updatedFlight.price);
data.flights.push(updatedFlight)
}
}
</script>
</body>
</html>
Expected Result is flight details (from, to , price) in the card format. I believe it is due to {{flight.to}} syntax, I don't know how to replace it.
