iobroker.tronity
Version:
Enables you to get vehicle data from Audi, BMW, Citroen, Cupra, DS, Fiat, Ford, Hyundai, Jaguar, Kia, MINI, Mercedes, Opel, Peugeot, Porsche, Renault, Seat, Skoda, Smart, Tesla, Vauxhall and Volkswagen
197 lines (186 loc) • 6.87 kB
HTML
<html>
<head>
<!-- Load ioBroker scripts and styles-->
<link
rel="stylesheet"
type="text/css"
href="../../lib/css/fancytree/ui.fancytree.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../../css/adapter.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../../lib/css/materialize.css"
/>
<script
type="text/javascript"
src="../../lib/js/jquery-3.2.1.min.js"
></script>
<script
type="text/javascript"
src="../../socket.io/socket.io.js"
></script>
<script
type="text/javascript"
src="../../lib/js/materialize.js"
></script>
<script
type="text/javascript"
src="../../lib/js/jquery-ui.min.js"
></script>
<script
type="text/javascript"
src="../../lib/js/jquery.fancytree-all.min.js"
></script>
<script
type="text/javascript"
src="../../js/translate.js"
></script>
<script
type="text/javascript"
src="../../js/adapter-settings.js"
></script>
<!-- Load our own files -->
<link
rel="stylesheet"
type="text/css"
href="style.css"
/>
<script
type="text/javascript"
src="words.js"
></script>
<script type="text/javascript">
function load(settings, onChange) {
if (!settings) return;
$('.value').each(function () {
var $key = $(this);
$key.val(settings[$key.attr('id')]);
});
onChange(false);
$('#check').on('click', () => {
getIsAdapterAlive(isAlive => {
if (!isAlive) {
showToast(null, _('Please start the Adapter first'));
} else {
$('#check').addClass('disabled');
getAdapterInstances(adapter => {
sendTo(
adapter._id,
'validate',
{
client_id: $('#client_id').val(),
client_secret: $('#client_secret').val(),
},
response => {
$('#check').removeClass('disabled');
if (!response.success) {
showError('Please enter valid client_id and client_secret!');
}
response.vehicles.forEach(vehicle => {
let option = $('<option>', { value: vehicle.id }).text(
vehicle.displayName || vehicle.vin,
);
$('#vehicle_id').append(option);
});
$('#vehicle_id').val($('#vehicle_id option:first').val());
M.FormSelect.init(document.querySelectorAll('#vehicle_id'));
onChange();
},
);
});
}
});
});
if (M) M.updateTextFields();
}
function save(callback) {
const obj = {};
if (
$('#client_id').val().length == 0 ||
$('#client_secret').val().length == 0 ||
$('#vehicle_id').val().length == 0
) {
showMessage(_('Enter client_id, client_secret and select Car!'));
return;
}
obj.client_id = $('#client_id').val();
obj.client_secret = $('#client_secret').val();
obj.vehicle_id = $('#vehicle_id').val();
callback(obj);
}
</script>
</head>
<body>
<div class="m adapter-container">
<div class="row">
<div class="col s12 m4 l2">
<img
src="tronity.png"
class="logo"
/>
</div>
</div>
<div class="row">
<div class="col s12 m6">
<br />
<h5 class="translate">Adapter settings for Tronity:</h5>
<p class="translate">Description</p>
<a
href="https://app.tronity.tech"
target="_blank"
>https://app.tronity.tech</a
>
</div>
</div>
<div class="row">
<div class="col s12 m6 input-field">
<input
type="text"
class="value"
id="client_id"
/>
<label for="client_id">Client Id:</label>
</div>
</div>
<div class="row">
<div class="col s12 m6 input-field">
<input
type="password"
class="value"
id="client_secret"
/>
<label for="client_secret">Client Secret:</label>
</div>
</div>
<div class="row">
<div class="col s2">
<a
id="check"
class="waves-effect waves-light btn"
>
<span class="translate">Check Login Data</span>
</a>
</div>
</div>
<div class="row">
<div class="input-field col s12 m6">
<select
id="vehicle_id"
class="value"
></select>
<label
class="translate"
for="vehicle_id"
>
Select your Car
</label>
</div>
</div>
</div>
</body>
</html>