addons-cm/website_partner_directory/views/directory_template.xml

44 lines
1.8 KiB
XML

<odoo>
<template id="directory_page" name="Company Observatory">
<t t-call="website.layout">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<div class="container mt-4">
<h1>Company Observatory</h1>
<div id="partner_map" t-att-data-partners="json.dumps([
{'lat': p.partner_latitude, 'lon': p.partner_longitude, 'name': p.name}
for p in partners if p.partner_latitude and p.partner_longitude
])" style="height:500px;"></div>
<!-- Listado -->
<div class="mt-4 mb-3">
<h2>Company List</h2>
<p>In this section you will find a list of companies registered in our observatory.</p>
<ul class="list-group mb-5">
<t t-foreach="partners" t-as="partner">
<li class="list-group-item">
<strong><t t-out="partner.name"/></strong>
<t t-if="partner.city"> - <t t-out="partner.city"/></t>
</li>
</t>
</ul>
</div>
<script type="text/javascript">
window.addEventListener("load", function() {
const mapEl = document.getElementById('partner_map');
const partners = mapEl.dataset.partners ? JSON.parse(mapEl.dataset.partners) : [];
const map = L.map(mapEl).setView([40.4168, -3.7038], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(map);
<t t-foreach="partners" t-as="partner">
L.marker([<t t-out="partner.partner_latitude"/>, <t t-out="partner.partner_longitude"/>])
.addTo(map)
.bindPopup("<strong><t t-out='partner.name'/></strong>");
</t>
});
</script>
</div>
</t>
</template>
</odoo>