After attempting to retrieve the current coordinates of a location in Odoo, I successfully obtained longitude and latitude data through an alert generated by the following code:
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
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 +
"Longitude: " + position.coords.longitude;
}
</script>
Now, the challenge lies in populating my Odoo fields `gps_coordinates_latitude` and `gps_coordinates_longitude` with these extracted coordinates. The template file in Odoo looks like this:
<template id="create_case" name="Create Case">
<t t-call="website.layout">
<div class="container">
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var lati = position.coords.latitude; <t t-esc="gps_coordinates_latitude"/>
alert(position.coords.longitude);
x.innerHTML = "Latitude: " + position.coords.latitude +
"Longitude: " + position.coords.longitude;
alert(position.coords.latitude);
}
</script>
<h1 class="text-center mt16 mb16">Create Case</h1>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<form action="/mycase/process" method="POST" class="form-horizontal mt32" enctype="multipart/form-data">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div t-attf-class="form-group #{error and 'case_title' in error and 'has-error' or ''}">
<label class="control-label" for="case_title">Case Title</label>
<input type="text" class="form-control" name="case_title" required="True"
t-attf-value="#{case_title or ''}"/>
</div>
<div t-attf-class="form-group #{error and 'case_description' in error and 'has-error' or ''}">
<label class="control-label" for="case_description">Case Description</label>
<input type="text" class="form-control" name="case_description" required="True"
t-attf-value="#{case_description or ''}"/>
</div>
<div t-attf-class="form-group #{error and 'case_type' in error and 'has-error' or ''}">
<label class="control-label" for="case_type">Case Type</label>
<select class="form-control" id="case_type" name="case_type" required="True">
<t t-foreach="case_type" t-as="case_type">
<option t-attf-value="#{case_type.id}">
<t t-esc="case_type.name"/>
</option>
</t>
</select>
</div>
<div t-attf-class="form-group #{error and 'project' in error and 'has-error' or ''}">
<label class="control-label" for="project_name">Projects</label>
<select class="form-control" name="project_name" required="True">
<t t-foreach="projects" t-as="project">
<option t-attf-value="#{project.id}">
<t t-esc="project.name"/>
</option>
</t>
</select>
</div>
<div>
<label class="control-label" for="gps_coordinates_latitude">Latitude</label>
<input type="text" class="form-control" name="gps_coordinates_latitude"
t-attf-value="#{gps_coordinates_latitude or ''}"/>
</div>
<div t-attf-class="form-group #{error and 'case_description' in error and 'has-error' or ''}">
<label class="control-label" for="gps_coordinates_longitude">Longitude</label>
<input type="text" class="form-control" name="gps_coordinates_longitude" required="True"
t-attf-value="#{gps_coordinates_longitude or ''}"/>
</div>
<div t-attf-class="form-group #{error and 'ratings' in error and 'has-error' or ''}">
<label class="col-form-label" for="ratings">Ratings</label>
<select class="form-control o_website_form_input" name="ratings" required="false"
widget="priority">
<option value="normal">Normal</option>
<option value="good">Good</option>
<option value="very_good">Very Good</option>
<option value="excellent">Excellent</option>
</select>
</div>
<div t-attf-class="form-group #{error and 'attachment' in error and 'has-error' or ''}">
<label class="col-form-label" for="attachment">Attachments</label>
<input id='attachment' type="file" class="form-control o_website_form_input"
name="attachment" multiple="true" data-show-preview="true"/>
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg">Submit Case</button>
</div>
<div class="oe_chatter">
<field name="message_follower_ids" widget="mail_followers"/>
<field name="message_ids" widget="mail_thread"/>
</div>
</form>
</div>
</t>
</template>