I have such a code. I’m developing weather app using JS and Python eel. There are two problems:
First one:
Uncaught (in promise) TypeError: eel.get_city is not a function
Second one:
Uncaught SyntaxError: missing ] after element list note: [ opened at line 1, column 0
Also I have problems with translating of page in browsers no-Mozilla families.
html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="eel.js"></script>
<title>
IWeather
</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src='eel.js'></script>
</head>
<body>
<div id='header'>
<img src="source/logo_file2.png">
<script type="text/javascript">
function getLang() {
lang = document.getElementById('lang');
lang = lang.value;
if (lang == null) {
return 'RU'
}
return lang;
}
function translate(arg) {
let strings_ru = {
getWeather : 'Узнать погоду',
placeholder : 'Введите город',
};
let strings_eng = {
getWeather : 'Show me weather',
placeholder : 'Type a city',
};
let current_lang = getLang();
switch(arg) {
case "RU":
button = document.getElementById('getWeather');
placeholder = document.getElementById('city');
button.innerHTML = strings_ru.getWeather;
placeholder.placeholder = strings_ru.placeholder;
break;
case "EN":
button = document.getElementById('getWeather');
placeholder = document.getElementById('city');
button.innerHTML = strings_eng.getWeather;
placeholder.placeholder = strings_eng.placeholder;
break;
};
}
</script>
<select id='lang' onchange=" getLang(); current_lang = getLang(); translate(current_lang);">
<option value='RU' selected>RU</option>
<option value='EN'>EN</option>
</select>
</div>
</br>
<input type="" name="" placeholder="Введите город" id="city">
<button id='getWeather'>Узнать погоду</button>
<script type="text/javascript">
let user_browser = navigator.userAgent;
if (user_browser.includes('Mozilla')) {
//alert(1);
}else{
alert('Your browser is not supported. Try Firefox, please...');
}
async function send_data(id) {
let data = document.getElementById(id);
data = data.value;
let result = await eel.get_city(data);
document.getElementById('output').innerHTML = result;
}
button = document.getElementById('getWeather');
button.setAttribute('onclick', send_data('city'));
</script>
<div id="stk"></div>
<img src="source/Cloud2.png" id="cloud1">
<img src="source/Cloud1.png" id="cloud2">
<img src="source/sun3.png" id="sun">
<div id='output'>
</br>
</br>
</div>
</body>
</html>
Python
import eel
from pyowm.owm import OWM
from pyowm.utils.config import get_default_config
config_dict = get_default_config()
config_dict['language'] = 'ru'
eel.init("WEB")
config_dict = get_default_config()
config_dict['language'] = 'ru'
owm = OWM('4a8dd7de2f8871115d7fd34ff9785ab1', config_dict)
# Connected and initialized. Doesn't work in browser, on another level
def get_weather(arg):
mgr = owm.weather_manager()
observation = mgr.weather_at_place(str(arg))
weather = observation.weather
det_st = weather.detailed_status
wind = weather.wind()
wind = str(wind['speed']) + ' m/s'
temp_current = weather.temperature('celsius')
temp_max = int(temp_current['temp_max'])
temp_min = int(temp_current['temp_min'])
temp_current = int(temp_current['temp'])
temp_list = [temp_current, temp_min, temp_max]
sunrise = weather.sunrise_time('iso')
sunrise = sunrise[11:-9]
sunset = weather.sunset_time('iso')
sunset = sunset[11:-9]
sun_data = [sunrise, sunset]
return [det_st, wind, temp_list, sun_data]
eel.start("main.html", size=(700, 400), mode='default')
@eel.expose
def get_city(city_js):
city = city_js
return get_weather(city)
# print(get_weather())
# default "FireFox" recommended
I tried to change position of strings in Python code, especially “eel.start()” string, but there are no results at all… Also I grouped JS code intu script tags staight above DOM elements, that will be used in a script. Mistakes and problems haven’t gone…