recently I want to make applet that fetch and show this as notification
I checked linux mint documentation and some searches and built the applet code in JS metadata.json and applet.js
I tried to make something simple that fetch data when I click on applet icon but it doesn’t return anything
on_applet_clicked() {
let url = "https://api.alquran.cloud/v1/ayah/262/ar.alafasy";
Main.notify('Holy Quran', 'اختبار');
fetch(url)
.then((response) => response.json())
.then((json) => view(json));
function view(data){
var txt = data.data.text;
Main.notify('Holy Quran', txt);
}
}
I tested the same code in the browser and it return the data as I want but here is doesn’t
when I click on the icon no action happened and checking logs, reload the applet and nothing changes or see anything
tried Main.notify('Holy Quran', 'اختبار'); I thought it can’t render Arabic or something but this line works fine!
but the API respond not shown
my full code
const Applet = imports.ui.applet;
const Main = imports.ui.main;
function MyApplet(orientation, panel_height, instance_id) {
this._init(orientation, panel_height, instance_id);
}
MyApplet.prototype = {
__proto__: Applet.IconApplet.prototype,
_init(orientation, panel_height, instance_id) {
Applet.IconApplet.prototype._init.call(this, orientation, panel_height, instance_id);
this.set_applet_icon_name("force-exit");
this.set_applet_tooltip(_("Fetch & show Ayat al-Kursi"));
},
on_applet_clicked() {
let url = "https://api.alquran.cloud/v1/ayah/262/ar.alafasy";
Main.notify('Holy Quran', 'اختبار');
fetch(url)
.then((response) => response.json())
.then((json) => view(json));
function view(data){
var txt = data.data.text;
Main.notify('Holy Quran', txt);
}
}
};
function main(metadata, orientation, panel_height, instance_id) {
return new MyApplet(orientation, panel_height, instance_id);
}
I expect a notification with the data I fetched from the API
I tested the same code in the browser
let url = "https://api.alquran.cloud/v1/ayah/262/ar.alafasy";
var txt
fetch(url)
.then((response) => response.json())
.then((json) => view(json));
function view(data){
var txt = data.data.text;
console.log(txt);
}
and it return the data as I want but here is doesn’t
when I click on the icon no action happened and checking logs (no logs), reload the applet and nothing changes or see anything
tried Main.notify('Holy Quran', 'اختبار'); I thought it can’t render Arabic or something but this line works fine!
but the API respond not shown
my full code
const Applet = imports.ui.applet;
const Main = imports.ui.main;
function MyApplet(orientation, panel_height, instance_id) {
this._init(orientation, panel_height, instance_id);
}
MyApplet.prototype = {
__proto__: Applet.IconApplet.prototype,
_init(orientation, panel_height, instance_id) {
Applet.IconApplet.prototype._init.call(this, orientation, panel_height, instance_id);
this.set_applet_icon_name("force-exit");
this.set_applet_tooltip(_("Fetch & show Ayat al-Kursi"));
},
on_applet_clicked() {
let url = "https://api.alquran.cloud/v1/ayah/262/ar.alafasy";
Main.notify('Holy Quran', 'اختبار');
fetch(url)
.then((response) => response.json())
.then((json) => view(json));
function view(data){
var txt = data.data.text;
Main.notify('Holy Quran', txt);
}
}
};
function main(metadata, orientation, panel_height, instance_id) {
return new MyApplet(orientation, panel_height, instance_id);
}
