Implement the async ajax method #4
Description
I'm trying to implement the methods open but doesn't work. I used the demo https://github.com/interfaced/zombiebox-demo and trying to customize and understanding how zombie works!
I created:
/**
* list-home.js
* Created : Allan Nava
* Date : 30/10/2019
* Update : 30/10/2019
*/
import {Value} from 'zb/geometry/direction';
import {text, updateClassName} from 'zb/html';
import {Out, render} from 'generated/cutejs/demo/scenes/list-matrix/list-matrix.jst';
import Keys from 'zb/device/input/keys';
import BaseList from 'ui/widgets/base-list/base-list';
import {red, green, yellow, blue, back} from '../../widgets/help-bar-item-factory/help-bar-item-factory';
import {DataSourceGenerator, DataType} from '../../widgets/data-source-generator/data-source-generator';
import {AbstractBase} from '../abstract-base/abstract-base';
import BaseListItem from '../../widgets/base-list-item/base-list-item';
//
//
/**
*/
export default class ListHome extends AbstractBase {
/**
*/
constructor() {
super();
this._addContainerClass('s-list-home');
/**
* @type {Out}
* @protected
*/
this._exported;
/**
* @type {number}
* @private
*/
this._columnsCount = 5;
/**
* @type {number}
* @private
*/
this._rowsCount = 8;
/**
* @type {DataSourceGenerator}
* @private
*/
this._sourceGenerator = new DataSourceGenerator({
dataType: DataType.IMMEDIATELY,
timeout: 3000
});
/**
* @type {BaseList}
* @private
*/
this._baseList = this._createBaseList(this._columnsCount, this._rowsCount, 0);
/**
* @const {number}
*/
this.ITEM_WIDTH = 161;
/**
* @const {number}
*/
this.MAX_COLUMNS_COUNT = 5;
/**
* @const {number}
*/
this.MAX_ROWS_COUNT = 8;
text(this._exported.title, 'Home static base-list');
// 1. Create a new XMLHttpRequest object
/*let xhr = new XMLHttpRequest();
xhr.responseType = 'json';
// 2. Configure it: GET-request for the URL /article/.../load
xhr.open('GET', 'https://api.elevensports.it/apitv/general/get_videos.json?id=36');
// 3. Send the request over the network
xhr.send();
// 4. This will be called after the response is received
xhr.onload = function() {
if (xhr.status != 200) { // analyze HTTP status of the response
alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
} else { // show the result
console.log(xhr.response);
var jsonData = xhr.response;
alert(JSON.stringify(jsonData));
alert(`Done, got ${xhr.response.length} bytes`); // responseText is the server
}
};
xhr.onprogress = function(event) {
if (event.lengthComputable) {
alert(`Received ${event.loaded} of ${event.total} bytes`);
} else {
alert(`Received ${event.loaded} bytes`); // no Content-Length
}
};
xhr.onerror = function() {
alert("Request failed");
};*/
}
/**
* @override
*/
load() {
console.log("load method list-home.js");
const SOME_ENDPOINT="https://api.example.it/apitv/general/get_videos.json?id=36";
return send(SOME_ENDPOINT).then(
);
//return send(SOME_ENDPOINT).then(/* process it how you want */);
}
/**
* @override
*/
_renderTemplate() {
return render(this._getTemplateData(), this._getTemplateOptions());
}
/**
* @override
*/
_processKey(zbKey, e) {
switch (zbKey) {
case Keys.RED:
this._removeRow();
return true;
case Keys.GREEN:
this._addRow();
return true;
case Keys.YELLOW:
this._removeColumn();
return true;
case Keys.BLUE:
this._addColumn();
return true;
}
return super._processKey(zbKey, e);
}
/**
* @override
*/
_getHelpBarItems() {
const redButton = red('');
const greenButton = green('Remove/add row');
const yellowButton = yellow('');
const blueButton = blue('Remove/add column');
redButton.disable();
greenButton.disable();
yellowButton.disable();
blueButton.disable();
updateClassName(redButton.getContainer(), '_remove', true);
updateClassName(greenButton.getContainer(), '_add', true);
updateClassName(yellowButton.getContainer(), '_remove', true);
updateClassName(blueButton.getContainer(), '_add', true);
return [
redButton,
greenButton,
yellowButton,
blueButton,
back()
];
}
/**
* @private
*/
_addRow() {
const rowsCount = Math.min(this._rowsCount + 1, this.MAX_ROWS_COUNT);
if (rowsCount !== this._rowsCount) {
this._rowsCount = rowsCount;
this._baseList = this._updateBaseList(this._baseList, this._columnsCount, this._rowsCount);
}
}
/**
* @private
*/
_removeRow() {
const rowsCount = Math.max(this._rowsCount - 1, 1);
if (rowsCount !== this._rowsCount) {
this._rowsCount = rowsCount;
this._baseList = this._updateBaseList(this._baseList, this._columnsCount, this._rowsCount);
}
}
/**
* @private
*/
_addColumn() {
const columnsCount = Math.min(this._columnsCount + 1, this.MAX_COLUMNS_COUNT);
if (columnsCount !== this._columnsCount) {
this._columnsCount = columnsCount;
this._baseList = this._updateBaseList(this._baseList, this._columnsCount, this._rowsCount);
}
}
/**
* @private
*/
_removeColumn() {
const columnsCount = Math.max(this._columnsCount - 1, 1);
if (columnsCount !== this._columnsCount) {
this._columnsCount = columnsCount;
this._baseList = this._updateBaseList(this._baseList, this._columnsCount, this._rowsCount);
}
}
/**
* @param {BaseList} oldBaseList
* @param {number} columnsCount
* @param {number} rowsCount
* @return {BaseList}
* @private
*/
_updateBaseList(oldBaseList, columnsCount, rowsCount) {
const isBaseListInFocus = this.getActiveWidget() instanceof BaseList;
const source = oldBaseList.getSource();
const index = source ? source.currentIndex() : 0;
this._removeBaseList(oldBaseList);
const newBaseList = this._createBaseList(columnsCount, rowsCount, index);
if (isBaseListInFocus) {
this.activateWidget(newBaseList);
}
return newBaseList;
}
/**
* @param {number} columnsCount
* @param {number} rowsCount
* @param {number} index
* @return {BaseList}
* @private
*/
_createBaseList(columnsCount, rowsCount, index) {
const itemsCount = columnsCount * rowsCount;
const baseList = new BaseList({
itemClass: BaseListItem,
options: {
lineSize: columnsCount,
padding: itemsCount
},
isVertical: true
});
this._exported.sliderWrapper.appendChild(baseList.getContainer());
this._exported.sliderWrapper.style.width = columnsCount * this.ITEM_WIDTH + 'px';
this.appendWidget(baseList);
this.setNavigationRule(baseList, Value.RIGHT, null);
this.setNavigationRule(baseList, Value.LEFT, this._menu);
const source = this._sourceGenerator.getStaticSource(1, itemsCount);
source.selectAt(index);
baseList.setSource(source);
text(this._exported.rows, String(rowsCount));
text(this._exported.columns, String(columnsCount));
return baseList;
}
/**
* @param {BaseList} baseList
* @private
*/
_removeBaseList(baseList) {
this.removeNavigationRule(baseList, Value.RIGHT);
this.removeNavigationRule(baseList, Value.LEFT);
this._exported.sliderWrapper.removeChild(baseList.getContainer());
this.removeWidget(baseList);
}
}applications.js
/**
* application.js
* Created : Allan Nava
* Date : 30/10/2019
* Update : 30/10/2019
*/
import {hide, show, div} from 'zb/html';
import {setLevel, Level} from 'zb/console/console';
import {Resolution, ResolutionInfo} from 'zb/device/resolutions';
import BaseApplication from 'generated/base-application';
import About from 'about/about';
import BaseServiceContainer from 'generated/dependency-injection/base-service-container';
import Throbber from './widgets/throbber/throbber';
/**
*/
export default class Application extends BaseApplication {
/**
*/
constructor() {
setLevel(Level.ALL);
super();
/**
* @type {BaseServiceContainer}
*/
this.sc;
/**
* @type {?Throbber}
* @private
*/
this._throbber = null;
/**
* Fired with: {{
* id: number,
* status: boolean
* }}
* @const {string}
*/
this.EVENT_MENU_TOGGLE = 'menu-toggle';
}
/**
* @override
*/
processKey(zbKey, e) {
About.processKey(zbKey);
return super.processKey(zbKey, e);
}
/**
* @override
*/
onReady() {
super.onReady();
this.sc = new BaseServiceContainer(this);
this.sc.bootstrap();
if (this.isDevicePc()) {
this._body.appendChild(div('zb-body__pc-help'));
}
}
/**
* @override
*/
onStart() {
// login, splashscreen, timeout, etc.
this.home();
}
/**
* @override
*/
home() {
return this.getSceneOpener()
.open(this.sc.scenesVideoPlayer, () => {
this.sc.scenesVideoPlayer.setActiveSceneId({
id: 0,
subItem: null
});
});
}
/**
* @param {Promise} job
*/
addTrobberJob(job) {
if (this._throbber) {
this._throbber.wait(job);
}
}
/**
* @override
*/
_backOnEmptyHistory() {
this.device.exit();
}
/**
* @override
*/
_onDeviceReady(eventName, device) {
super._onDeviceReady(eventName, device);
this._createThrobber();
}
/**
* @override
*/
_appendScreenSizeClass() {
// No super necessary
const resolutionInfo = ResolutionInfo[Resolution.HD];
this._appendViewportSize(resolutionInfo);
this._body.classList.add('zb-hd');
}
/**
* @private
*/
_createThrobber() {
const throbberWrap = div('a-throbber zb-fullscreen');
this._throbber = new Throbber();
throbberWrap.appendChild(this._throbber.getContainer());
this._body.appendChild(throbberWrap);
this._throbber.on(this._throbber.EVENT_START, () => {
show(throbberWrap);
});
this._throbber.on(this._throbber.EVENT_STOP, () => {
hide(throbberWrap);
});
}
/**
*
*/
open(name) {
const scene = this._layerManager.getLayer(name);
const sceneLoadingPromise = scene.load()
.then(() => {
this._layerManager.hide();
this._layerManager.open(scene);
});
this._throbberService.add(sceneLoadingPromise); // Or other async logic handling
}
}