kita akan menggunakan object res.company sebagai tempat untuk konfigurasi tampilan display secara umum, seperti :

- Waktu iqomah

- Timer Menjelang Adzan

- Adjustment Tanggal Hijriyah

- Waktu Transisi Background

- Auto Sync Color dengan warna dominasi gambar background

- Warna Dasar

- List Gambar Background

- Informasi Running Text

- Warna Text Header

- Munculkan Alamat

- Full Background Screen

- Kota/Kabupaten

Untuk saat ini, konfigurasinya akan kita tambahkan terlebih dahulu field - fieldnya, dan insyaAllah pada kesempatan yang akan datang akan kita terapkan di tampilan display-nya. 

Disini kita juga membuat 2 object baru yaitu information.line untuk menyimpan informasi running text yang berisi ayat Al-Qur'an, Hadits atau Maklumat/Informasi. Object yang kedua adalah background.list untuk menyimpan gambar background yang bisa kita set gambar tersebut menjadi background dasar, menjadi background saat timer menjelang adzan atau menjadi background saat timer menjelang iqomah.

di dalam object res.company kita tambahkan onchange dari field city_id yang fungsinya sama seperti yang ada di res.partner, serta kita tambahkan method get_settings sebagai 'Penjembatan' antara data konfigurasi yang ada di tampilan backend ke tampilan frontend yang akan kita buat.

di dalam file models/models.py tambahkan code di bawah:

jangan lupa tambahkan hak akses untuk 2 object baru yang kita buat di security/ir.model.access.csv

Kemudian kita inherit tampilannya di xml 

odoo.define('ab_jadwal_sholat.jadwal_sholat', function (require) {

"use strict";

var rpc = require('web.rpc');

var adhan = require('ab_jadwal_sholat.adzan');

var settings = {}

var d = new Date(),

hour = d.getHours(),

minute = d.getMinutes(),

second = d.getSeconds(),

day = d.getDay(),

date = d.getDate(),

month = d.getMonth(),

year = d.getFullYear(),

hari = new Array("Ahad", "Senin", "Selasa", "Rabu", "Kamis", "Jum'at", "Sabtu"),

bulan = new Array("Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus",

"September", "Oktober", "November", "Desember");

$().ready(function () {

        var company = $('#company').text();

var longitude = 0,

latitude = 0,

fajrAngle = 0,

ishaAngle = 0,

adj_fajr = 0,

adj_sunrise = 0,

adj_dhuha = 0,

adj_dzuhur = 0,

adj_ashar = 0,

adj_maghrib = 0,

adj_isya = 0,

ashar_type = 1;

        rpc.query({

model: "res.company",

method: "get_settings",

args: [false, company],

}).then(function (data) {

settings = data;

            var jadwal_sholat = SetPrayerTimes(settings);

});

function SetPrayerTimes(settings){

if (Object.keys(settings).length > 1){

latitude = settings['adjustment']['latitude'];

longitude = settings['adjustment']['longitude'];

ashar_type = settings['adjustment']['ashar_type'];

fajrAngle = settings['adjustment']['angle_fajr'];

ishaAngle = settings['adjustment']['angle_isya'];

adj_fajr = settings['adjustment']['adj_fajr'];

adj_sunrise = settings['adjustment']['adj_sunrise'];

adj_dhuha = settings['adjustment']['dhuha_type'];

adj_dzuhur = settings['adjustment']['adj_dzuhur'];

adj_ashar = settings['adjustment']['adj_ashar'];

adj_maghrib = settings['adjustment']['adj_maghrib'];

adj_isya = settings['adjustment']['adj_isya'];

}

let coordinates = new adhan.Coordinates(longitude, latitude);

var params = adhan.CalculationMethod.Other();

params.madhab = parseInt(ashar_type);

params.fajrAngle = fajrAngle;

params.ishaAngle = ishaAngle;

params.adjustments.fajr = adj_fajr;

params.adjustments.sunrise = adj_sunrise;

params.adjustments.dhuha = adj_dhuha;

params.adjustments.dhuhr = adj_dzuhur;

params.adjustments.asr = adj_ashar;

params.adjustments.maghrib = adj_maghrib;

params.adjustments.isha = adj_isya;

Date.prototype.addDays = function(days) {

this.setDate(this.getDate() + parseInt(days));

return this;

};

var prayerTimes = new adhan.PrayerTimes(coordinates, d, params);

var formattedTime = adhan.Date.formattedTime;

function addDhuha(sunriseFormattedTime, interval) {

function D(J){ return (J<10? '0':'') + J;};

var piece = sunriseFormattedTime.split(':');

var mins = piece[0]*60 + +piece[1] + +interval;

return D(mins%(24*60)/60 | 0) + ':' + D(mins%60);

};

// common adzan time

var _subuh = formattedTime(prayerTimes.fajr, +7, '24h');

var _sunrise = formattedTime(prayerTimes.sunrise, +7, '24h');

var _dhuha = addDhuha(_sunrise, params.adjustments.dhuha);

var _duhur = formattedTime(prayerTimes.dhuhr, +7, '24h');

var _ashar = formattedTime(prayerTimes.asr, +7, '24h');

var _maghrib = formattedTime(prayerTimes.maghrib, +7, '24h');

var _isya = formattedTime(prayerTimes.isha, +7, '24h');

var dzuhur_jumat = hari[day] === "Jum'at" ? "Jum'at" : "Dzuhur";

$('.subuh-text').html(`${_subuh}`);

$('.sunrise-text').html(`${_sunrise}`);

$('.dhuha-text').html(`${_dhuha}`);

$('.dzuhur-jumat').html(`${dzuhur_jumat}`);

$('.duhur-text').html(`${_duhur}`);

$('.ashar-text').html(`${_ashar}`);

$('.maghrib-text').html(`${_maghrib}`);

$('.isya-text').html(`${_isya}`);

$('.day').html(`${hari[day]}`);

$('.date').html(`${date} ${bulan[month]} ${year}`);

setInterval(() => {

var datenow = `${date} ${bulan[month]} ${year}`;

var jDate = $('.date').html();

var $date = $('.date');

$('.day').html(`${hari[day]}`);

$('.date').html(datenow);

}, 5000);

setInterval(() => {

second++;

if (second === 60) { second = 0; minute++; }

if (minute === 60) { minute = 0; hour++; }

if (hour === 24) {

hour = 0; minute = 0; second = 0; setTimeout(() => {

location.reload();

}, 500);

};

var hour_padded = hour.toString().padStart(2,'0');

var minute_padded = minute.toString().padStart(2,'0');

var second_padded = second.toString().padStart(2,'0');

var time = hour_padded + ':' + minute_padded;

$('.hour').html(hour_padded);

$('.minute').html(minute_padded);

$('.second').html(second_padded);

}, 1000);

});

});

<?xml version="1.0" encoding="UTF-8"?>

<template id="jadwal_sholat_view" name="Jadwal Sholat view">

<head>

<t t-call-assets="web.assets_common" t-js="false"/>

<t t-call-assets="web.assets_common" t-css="false"/>

</head>

<body>

<h1 style="font-size:45px">

<div><span class="day"></span></div>

<div><span class="date"></span></div>

<div class="time">

<span class="hour">00</span>:<span class="minute">00</span>:<span class="second">00</span>

</div>

</h1>

<table style="border: 1px solid;font-size:30px;">

<tr>

<th>Subuh</th>

<th>Terbit</th>

<th>Dhuha</th>

<th class="dzuhur-jumat"/>

<th>Ashar</th>

<th>Maghrib</th>

<th>Isya</th>

</tr>

<tr>

<td class="subuh-text"/>

<td class="sunrise-text"/>

<td class="dhuha-text"/>

<td class="duhur-text"/>

<td class="ashar-text"/>

<td class="maghrib-text"/>

<td class="isya-text"/>

</tr>

</table>

<span id="company" t-esc="company.id" style="display: none;"/>

</body>

</template>