Skip to content

Commit 16650d8

Browse files
odeimaizodeimaiz
committed
refactor and 4 tabs
1 parent cda64e2 commit 16650d8

File tree

2 files changed

+116
-52
lines changed

2 files changed

+116
-52
lines changed

‎services/static-webserver/client/source/class/osparc/vipMarket/Market.js‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,47 @@ qx.Class.define("osparc.vipMarket.Market", {
2626
});
2727
this.addWidgetOnTopOfTheTabs(miniWallet);
2828

29-
this.__vipMarketPage = this.__getVipMarketPage();
29+
[{
30+
category: "humanWhole",
31+
label: "Humans",
32+
url: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/HumanWholeBody",
33+
}, {
34+
category: "humanRegion",
35+
label: "Humans (Region)",
36+
url: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/HumanBodyRegion",
37+
}, {
38+
category: "animalWhole",
39+
label: "Animals",
40+
url: "https://itis.swiss/PD_DirectDownload/getDownloadableItems/AnimalWholeBody",
41+
}, {
42+
category: "compPhantom",
43+
label: "Phantoms",
44+
url: "https://speag.swiss/PD_DirectDownload/getDownloadableItems/ComputationalPhantom",
45+
}].forEach(marketInfo => {
46+
this.__buildViPMarketPage(marketInfo);
47+
})
48+
49+
// this.__vipMarketPage = this.__getVipMarketPage();
3050
},
3151

3252
members: {
3353
__vipMarketPage: null,
3454

3555
__getVipMarketPage: function() {
3656
const title = this.tr("ViP Models");
37-
const iconSrc = "@FontAwesome5Solid/users/22";
57+
const iconSrc = "@FontAwesome5Solid/users/20";
58+
const vipMarketView = new osparc.vipMarket.VipMarket();
59+
const page = this.addTab(title, iconSrc, vipMarketView);
60+
return page;
61+
},
62+
63+
__buildViPMarketPage: function(marketInfo) {
64+
const title = marketInfo["label"];
65+
const iconSrc = "@FontAwesome5Solid/users/20";
3866
const vipMarketView = new osparc.vipMarket.VipMarket();
67+
vipMarketView.set({
68+
metadataUrl: marketInfo["url"],
69+
});
3970
const page = this.addTab(title, iconSrc, vipMarketView);
4071
return page;
4172
},

‎services/static-webserver/client/source/class/osparc/vipMarket/VipMarket.js‎

Lines changed: 83 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,15 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
2626
this.__buildLayout();
2727
},
2828

29+
properties: {
30+
metadataUrl: {
31+
check: "String",
32+
init: null,
33+
nullable: false,
34+
apply: "__fetchModels",
35+
}
36+
},
37+
2938
statics: {
3039
curateAnatomicalModels: function(anatomicalModelsRaw) {
3140
const anatomicalModels = [];
@@ -60,51 +69,77 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
6069
__anatomicalModels: null,
6170
__licensedItems: null,
6271
__anatomicalModelsModel: null,
63-
__sortByButton: null,
64-
65-
__buildLayout: function() {
66-
const leftSide = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
67-
alignY: "middle",
68-
});
69-
this._add(leftSide);
7072

71-
const toolbarLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
72-
alignY: "middle",
73-
});
74-
leftSide.add(toolbarLayout)
75-
76-
const sortModelsButtons = this.__sortByButton = new osparc.vipMarket.SortModelsButtons().set({
77-
alignY: "bottom",
78-
maxHeight: 27,
79-
});
80-
toolbarLayout.add(sortModelsButtons);
81-
82-
const filter = new osparc.filter.TextFilter("text", "vipModels").set({
83-
alignY: "middle",
84-
allowGrowY: false,
85-
minWidth: 165,
86-
});
87-
this.addListener("appear", () => filter.getChildControl("textfield").focus());
88-
toolbarLayout.add(filter, {
89-
flex: 1
90-
});
73+
_createChildControlImpl: function(id) {
74+
let control;
75+
switch (id) {
76+
case "left-side":
77+
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
78+
alignY: "middle",
79+
});
80+
this._add(control);
81+
break;
82+
case "right-side":
83+
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
84+
alignY: "middle",
85+
});
86+
this._add(control, {
87+
flex: 1
88+
});
89+
break;
90+
case "toolbar-layout":
91+
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
92+
alignY: "middle",
93+
});
94+
this.getChildControl("left-side").add(control);
95+
break;
96+
case "sort-button":
97+
control = new osparc.vipMarket.SortModelsButtons().set({
98+
alignY: "bottom",
99+
maxHeight: 27,
100+
});
101+
this.getChildControl("toolbar-layout").add(control);
102+
break;
103+
case "filter-text":
104+
control = new osparc.filter.TextFilter("text", "vipModels").set({
105+
alignY: "middle",
106+
allowGrowY: false,
107+
minWidth: 160,
108+
backgroundColor: "transparent",
109+
});
110+
this.addListener("appear", () => control.getChildControl("textfield").focus());
111+
this.getChildControl("toolbar-layout").add(control, {
112+
flex: 1
113+
});
114+
break;
115+
case "models-list":
116+
control = new qx.ui.form.List().set({
117+
decorator: "no-border",
118+
spacing: 5,
119+
minWidth: 250,
120+
maxWidth: 250
121+
});
122+
this.getChildControl("left-side").add(control, {
123+
flex: 1
124+
});
125+
break;
126+
case "models-details":
127+
control = new osparc.vipMarket.AnatomicalModelDetails().set({
128+
padding: 10,
129+
});
130+
this.getChildControl("right-side").add(control, {
131+
flex: 1
132+
});
133+
break;
134+
}
135+
return control || this.base(arguments, id);
136+
},
91137

92-
const modelsUIList = new qx.ui.form.List().set({
93-
decorator: "no-border",
94-
spacing: 5,
95-
minWidth: 250,
96-
maxWidth: 250
97-
});
98-
leftSide.add(modelsUIList, {
99-
flex: 1
100-
});
138+
__buildLayout: function() {
139+
this.getChildControl("sort-button");
140+
this.getChildControl("filter-text");
141+
const modelsUIList = this.getChildControl("models-list");
101142

102-
const rightSide = new qx.ui.container.Composite(new qx.ui.layout.VBox(10)).set({
103-
alignY: "middle",
104-
});
105-
this._add(rightSide, {
106-
flex: 1
107-
});
108143
const anatomicalModelsModel = this.__anatomicalModelsModel = new qx.data.Array();
109144
const membersCtrl = new qx.data.controller.List(anatomicalModelsModel, modelsUIList, "name");
110145
membersCtrl.setDelegate({
@@ -130,12 +165,7 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
130165
};
131166
this.__anatomicalModelsModel.append(qx.data.marshal.Json.createModel(loadingModel));
132167

133-
const anatomicModelDetails = new osparc.vipMarket.AnatomicalModelDetails().set({
134-
padding: 20,
135-
});
136-
rightSide.add(anatomicModelDetails, {
137-
flex: 1
138-
});
168+
const anatomicModelDetails = this.getChildControl("models-details");
139169

140170
modelsUIList.addListener("changeSelection", e => {
141171
const selection = e.getData();
@@ -149,8 +179,10 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
149179
}
150180
anatomicModelDetails.setAnatomicalModelsData(null);
151181
}, this);
182+
},
152183

153-
fetch("https://itis.swiss/PD_DirectDownload/getDownloadableItems/AnatomicalModels", {
184+
__fetchModels: function(url) {
185+
fetch(url, {
154186
method:"POST"
155187
})
156188
.then(resp => resp.json())
@@ -185,6 +217,7 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
185217

186218
this.__populateModels();
187219

220+
const anatomicModelDetails = this.getChildControl("models-details");
188221
anatomicModelDetails.addListener("modelPurchaseRequested", e => {
189222
const {
190223
modelId,
@@ -246,7 +279,7 @@ qx.Class.define("osparc.vipMarket.VipMarket", {
246279
sortModel();
247280
models.forEach(model => this.__anatomicalModelsModel.append(qx.data.marshal.Json.createModel(model)));
248281

249-
this.__sortByButton.addListener("sortBy", e => {
282+
this.getChildControl("sort-button").addListener("sortBy", e => {
250283
this.__anatomicalModelsModel.removeAll();
251284
const sortBy = e.getData();
252285
sortModel(sortBy);

0 commit comments

Comments
 (0)