- RiderCardDrawer update
- updateSelectedRiderProp in AppModellocator
This commit is contained in:
@@ -36,4 +36,9 @@
|
||||
<assets path="assets/bitmaps" rename="bitmaps" embed="true"/>
|
||||
<assets path="assets/vector" rename="vector" embed="true"/>
|
||||
|
||||
<!-- <config:android target-sdk-version="30"/>-->
|
||||
<!-- <config:android build-tools-version="30" />-->
|
||||
|
||||
|
||||
|
||||
</project>
|
||||
@@ -60,8 +60,8 @@ class LPTCManager2026 extends Application {
|
||||
}
|
||||
|
||||
private function onRiderSelectChange(event:Event):Void {
|
||||
trace(model.selectedRider.name);
|
||||
rcd.openDrawer();
|
||||
trace(this + " --> onRiderSelectChange()");
|
||||
rcd.populateAndShow();
|
||||
}
|
||||
|
||||
private function onDrawerStateChange(e:Event):Void {
|
||||
|
||||
@@ -56,9 +56,6 @@ class RoundAvatar extends LayoutGroup {
|
||||
mask = m;
|
||||
|
||||
var l:Loader = new Loader();
|
||||
//var lc:LoaderContext = new LoaderContext(true, null);
|
||||
// l.load(new URLRequest("https://ui-avatars.com/api/?background=random&size=64"));
|
||||
//l.load(new URLRequest("https://api.dicebear.com/9.x/pixel-art/png?size=32"));
|
||||
l.load(new URLRequest("https://lepetittrot.com/lptcm/assets/profile-pictures/pp256/pp_test_256.jpg"));
|
||||
l.contentLoaderInfo.addEventListener (Event.COMPLETE, onLoadComplete);
|
||||
addChild(l);
|
||||
|
||||
@@ -54,6 +54,12 @@ class AppModelLocator extends EventDispatcher implements IModelLocator {
|
||||
return selectedRider;
|
||||
}
|
||||
|
||||
// update one property of the selectedRider VO
|
||||
public function updateSelectedRiderProp(pProperty:String, pValue:Dynamic) {
|
||||
Reflect.setField(selectedRider, pProperty, pValue);
|
||||
traceYellow(Reflect.field(selectedRider, pProperty));
|
||||
}
|
||||
|
||||
// contains the main riders list which is populated on startup
|
||||
// mx:application's creationComplete event is mutated into a cairngorm event
|
||||
// that calls the httpservice for the data
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
package model;
|
||||
|
||||
import openfl.system.Capabilities;
|
||||
|
||||
class Constants {
|
||||
|
||||
// Colors
|
||||
@@ -29,6 +31,13 @@ class Constants {
|
||||
public static final MONTSERRAT_MEDIUM_500:String = "MontserratMedium500";
|
||||
public static final MONTSERRAT_BOLD_700:String = "MontserratBold700";
|
||||
|
||||
// Fonts sizes
|
||||
public static final FONT_SIZE_1:Int = Std.int(Capabilities.screenDPI * .15);
|
||||
public static final FONT_SIZE_2:Int = Std.int(Capabilities.screenDPI * .2);
|
||||
public static final FONT_SIZE_3:Int = Std.int(Capabilities.screenDPI * .25);
|
||||
public static final FONT_SIZE_4:Int = Std.int(Capabilities.screenDPI * .3);
|
||||
public static final FONT_SIZE_5:Int = Std.int(Capabilities.screenDPI * .5);
|
||||
|
||||
// UI Proportions against stage dimmensions
|
||||
public static final MAIN_HEADER_WIDTH_RATIO:Float = 1;
|
||||
public static final MAIN_HEADER_HEIGHT_RATIO:Float = 0.1;
|
||||
@@ -47,7 +56,4 @@ class Constants {
|
||||
// number of rows in RidersList
|
||||
public static final RIDERS_LIST_ROWS_COUNT:Int = 8;
|
||||
|
||||
private function new() {
|
||||
|
||||
}
|
||||
}
|
||||
+94
-57
@@ -1,37 +1,38 @@
|
||||
package view;
|
||||
|
||||
import openfl.text.TextFormat;
|
||||
import model.AppModelLocator;
|
||||
import feathers.controls.Label;
|
||||
import openfl.Assets;
|
||||
import openfl.text.Font;
|
||||
import openfl.display.Bitmap;
|
||||
import openfl.display.LoaderInfo;
|
||||
import lime.app.Event;
|
||||
import openfl.net.URLRequest;
|
||||
import openfl.display.Loader;
|
||||
import feathers.controls.TextInput;
|
||||
import openfl.system.Capabilities;
|
||||
import feathers.controls.AssetLoader;
|
||||
import feathers.controls.Button;
|
||||
import feathers.controls.Drawer;
|
||||
import feathers.controls.Label;
|
||||
import feathers.controls.LayoutGroup;
|
||||
import feathers.events.FeathersEvent;
|
||||
import feathers.events.TriggerEvent;
|
||||
import feathers.layout.VerticalLayout;
|
||||
import feathers.skins.RectangleSkin;
|
||||
import model.AppModelLocator;
|
||||
import model.Constants;
|
||||
import t9.util.ColorTraces.*;
|
||||
import openfl.Assets;
|
||||
import openfl.events.Event;
|
||||
import openfl.text.Font;
|
||||
import openfl.text.TextFormat;
|
||||
import t9.util.ColorTraces.*;
|
||||
import vo.RiderVO;
|
||||
|
||||
class RiderCardDrawer extends Drawer {
|
||||
|
||||
public static final CLOSE:String = "close";
|
||||
public static final OPEN:String = "open";
|
||||
|
||||
private var model:AppModelLocator;
|
||||
private final borderPadding:Int = 10;
|
||||
private var tf1:TextFormat;
|
||||
private var tf2:TextFormat;
|
||||
private final spacing:Int = 10;
|
||||
|
||||
private var closeDrawerButton:Button;
|
||||
// components
|
||||
private var ppal:AssetLoader;
|
||||
private var firstNameTextInput:TextInput;
|
||||
private var nameTextInput:TextInput;
|
||||
|
||||
private var closeDrawerButton:Button;
|
||||
|
||||
public function new() {
|
||||
super();
|
||||
@@ -41,65 +42,101 @@ class RiderCardDrawer extends Drawer {
|
||||
override private function initialize():Void {
|
||||
super.initialize();
|
||||
|
||||
// Text Styling
|
||||
//var fnt:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
|
||||
//tf1 = new TextFormat(fnt.fontName, 12, Constants.MAIN_COLOR1);
|
||||
//tf2 = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, 14, Constants.MAIN_COLOR1);
|
||||
|
||||
model = AppModelLocator.getInstance();
|
||||
|
||||
overlaySkin = new RectangleSkin(SolidColor( Constants.MAIN_COLOR3, 1));
|
||||
overlaySkin = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1));
|
||||
pullableEdge = TOP;
|
||||
clickOverlayToClose = false;
|
||||
animateOpenedProperty = false; // Doesn't seems to work
|
||||
|
||||
var d1 = new LayoutGroup();
|
||||
var vl = new VerticalLayout();
|
||||
vl.setPadding(borderPadding);
|
||||
vl.horizontalAlign = LEFT;
|
||||
vl.verticalAlign = TOP;
|
||||
d1.layout = vl;
|
||||
// Main Layout
|
||||
var mainLaytoutGroup = new LayoutGroup();
|
||||
var mainVerticalLayout = new VerticalLayout();
|
||||
mainVerticalLayout.setPadding(spacing);
|
||||
mainVerticalLayout.gap = spacing;
|
||||
mainVerticalLayout.horizontalAlign = JUSTIFY;
|
||||
mainVerticalLayout.verticalAlign = TOP;
|
||||
mainLaytoutGroup.layout = mainVerticalLayout;
|
||||
|
||||
// close button
|
||||
closeDrawerButton = new Button();
|
||||
closeDrawerButton.text = "Close Drawer";
|
||||
closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (event) -> {
|
||||
//opened = false;
|
||||
closeDrawerButton.addEventListener(TriggerEvent.TRIGGER, (e) -> {
|
||||
closeDrawer();
|
||||
});
|
||||
|
||||
d1.addChild(closeDrawerButton);
|
||||
mainLaytoutGroup.addChild(closeDrawerButton);
|
||||
|
||||
// profile picture
|
||||
var l:Loader = new Loader();
|
||||
l.contentLoaderInfo.addEventListener (Event.COMPLETE, onPPLoadComplete);
|
||||
l.load(new URLRequest("https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/pp_test_512.jpg"));
|
||||
d1.addChild(l);
|
||||
ppal = new AssetLoader();
|
||||
ppal.source = "https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/pp_test_512.jpg";
|
||||
// ppal.addEventListener(Event.COMPLETE, onPPLoaded);
|
||||
mainLaytoutGroup.addChild(ppal);
|
||||
|
||||
// Name label
|
||||
var nl:Label = new Label();
|
||||
nl.text = "zozo 3000";
|
||||
// TODO trouver un moyen pour mettre à jour tous les champs de ce composant (binding ?)
|
||||
//nl.text = model.selectedRider.name;
|
||||
//nl.embedFonts = true;
|
||||
//nl.textFormat = tf1;
|
||||
d1.addChild(nl);
|
||||
// ############################################################################################################## FIRSTNAME & NAME TEXT INPUTS
|
||||
|
||||
var lg1:LayoutGroup = new LayoutGroup();
|
||||
lg1.backgroundSkin = new RectangleSkin(SolidColor(Constants.ACCENT_COLOR2, 0.2));
|
||||
var vl1:VerticalLayout = new VerticalLayout();
|
||||
vl1.setPadding(spacing);
|
||||
vl1.horizontalAlign = JUSTIFY;
|
||||
lg1.layout = vl1;
|
||||
mainLaytoutGroup.addChild(lg1);
|
||||
|
||||
// first name textInput
|
||||
firstNameTextInput = new TextInput();
|
||||
firstNameTextInput.backgroundSkin = null;
|
||||
firstNameTextInput.embedFonts = true;
|
||||
firstNameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_5, Constants.MAIN_COLOR1);
|
||||
lg1.addChild(firstNameTextInput);
|
||||
|
||||
drawer = d1;
|
||||
// name label
|
||||
nameTextInput = new TextInput();
|
||||
nameTextInput.backgroundSkin = null;
|
||||
nameTextInput.embedFonts = true;
|
||||
nameTextInput.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_4, Constants.MAIN_COLOR2);
|
||||
lg1.addChild(nameTextInput);
|
||||
|
||||
drawer = mainLaytoutGroup;
|
||||
}
|
||||
|
||||
private function onPPLoadComplete(e:Event) {
|
||||
|
||||
var l:Loader = cast(e.currentTarget, LoaderInfo).loader;
|
||||
var bmp:Bitmap = e.currentTarget.content;
|
||||
bmp.smoothing = true;
|
||||
l.content.width = l.content.height = width - (borderPadding * 2);
|
||||
|
||||
}
|
||||
|
||||
private function onCreationComplete(event:FeathersEvent):Void {
|
||||
traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height );
|
||||
private function onCreationComplete(e:FeathersEvent):Void {
|
||||
traceBlue(this + " --> onCreationComplete() - w: " + width + " h: " + height);
|
||||
}
|
||||
|
||||
public function populateAndShow() {
|
||||
// profile picture
|
||||
// ppal.source = "https://lepetittrot.com/lptcm/assets/profile-pictures/pp512/pp_test_512.jpg";
|
||||
|
||||
var rvo:RiderVO = model.selectedRider;
|
||||
|
||||
// first name label
|
||||
firstNameTextInput.text = rvo.firstName;
|
||||
if (!firstNameTextInput.hasEventListener(Event.CHANGE)) {
|
||||
firstNameTextInput.addEventListener(Event.CHANGE, (e) -> {
|
||||
if (firstNameTextInput.text != model.selectedRider.firstName) {
|
||||
model.updateSelectedRiderProp(RiderVO.FIRST_NAME, firstNameTextInput.text);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// name label
|
||||
nameTextInput.text = rvo.name;
|
||||
if (!nameTextInput.hasEventListener(Event.CHANGE)) {
|
||||
nameTextInput.addEventListener(Event.CHANGE, (e) -> {
|
||||
if (nameTextInput.text != model.selectedRider.name) {
|
||||
model.updateSelectedRiderProp(RiderVO.NAME, nameTextInput.text);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
openDrawer();
|
||||
}
|
||||
/*private function onPPLoaded(e:Event):Void {
|
||||
var rvo:RiderVO = model.selectedRider;
|
||||
|
||||
// first name label
|
||||
fnl.text = rvo.firstName;
|
||||
|
||||
openDrawer();
|
||||
|
||||
}*/
|
||||
}
|
||||
|
||||
@@ -39,16 +39,14 @@ class RidersList extends ListView {
|
||||
|
||||
// set common properties for all renderers in the same container here
|
||||
var recycler = DisplayObjectRecycler.withFunction(() -> {
|
||||
final fnt1:Font = Assets.getFont(Constants.MONTSERRAT_MEDIUM_500);
|
||||
final fnt2:Font = Assets.getFont(Constants.MONTSERRAT_BOLD_700);
|
||||
|
||||
rowHeight = Std.int(height / Constants.RIDERS_LIST_ROWS_COUNT);
|
||||
|
||||
var itemRenderer = new ItemRenderer();
|
||||
itemRenderer.height = rowHeight;
|
||||
itemRenderer.icon = new RoundAvatar(Std.int(rowHeight * 0.9));
|
||||
itemRenderer.textFormat = new TextFormat(fnt1.fontName, Std.int(rowHeight * 0.27), Constants.MAIN_COLOR1);
|
||||
itemRenderer.secondaryTextFormat = new TextFormat(fnt2.fontName, Std.int(rowHeight * 0.2), Constants.MAIN_COLOR2);
|
||||
itemRenderer.textFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_BOLD_700).fontName, Constants.FONT_SIZE_3, Constants.MAIN_COLOR1);
|
||||
itemRenderer.secondaryTextFormat = new TextFormat(Assets.getFont(Constants.MONTSERRAT_MEDIUM_500).fontName, Constants.FONT_SIZE_2, Constants.MAIN_COLOR2);
|
||||
|
||||
var rs1 = new RectangleSkin(SolidColor(Constants.MAIN_COLOR3, 1), SolidColor(1, Constants.LIST_SEPARATOR_COLOR));
|
||||
var rs2 = new RectangleSkin(SolidColor(Constants.LIST_SEPARATOR_COLOR, 1), SolidColor(1, Constants.LIST_SEPARATOR_COLOR));
|
||||
@@ -58,7 +56,6 @@ class RidersList extends ListView {
|
||||
itemRenderer.setSkinForState(ToggleButtonState.HOVER(false), rs2);
|
||||
itemRenderer.setSkinForState(ToggleButtonState.DOWN(false), rs2);
|
||||
|
||||
|
||||
return itemRenderer;
|
||||
|
||||
});
|
||||
@@ -73,7 +70,7 @@ class RidersList extends ListView {
|
||||
var rlra:RidersListRendererAccessory = new RidersListRendererAccessory(Std.int(rowHeight * 0.8), rider.credit);
|
||||
itemRenderer.accessoryView = rlra;
|
||||
|
||||
// TODO change this to real iamge path
|
||||
// TODO change this to real image path
|
||||
// loader.source = "https://lepetittrot.com/path/to/pp_pictures" + state.data.id + ".jpg";
|
||||
// loader.source = "https://testingbot.com/free-online-tools/random-avatar/50?u=" + Uuid.nanoId();
|
||||
};
|
||||
@@ -108,8 +105,7 @@ class RidersList extends ListView {
|
||||
var riderVO:RiderVO = cast(e.state.data, RiderVO);
|
||||
var rse:RiderSelectEvent = new RiderSelectEvent(riderVO);
|
||||
CairngormEventDispatcher.getInstance().dispatchEvent(rse);
|
||||
//trace(riderVO.firstName);
|
||||
//clearSelectedRider();
|
||||
clearSelectedRider();
|
||||
}
|
||||
|
||||
// de-select any selected List items
|
||||
|
||||
@@ -3,6 +3,25 @@ package vo;
|
||||
class RiderVO {
|
||||
private static var currentIndex:Int = 0;
|
||||
|
||||
// constants for use with Reflect api when updating SelectedRider VO
|
||||
public static final ID:String = "id";
|
||||
public static final NAME:String = "name";
|
||||
public static final FIRST_NAME:String = "firstName";
|
||||
public static final AGE:String = "age";
|
||||
public static final LAST_LESSON_DATE:String = "lastLessonDate";
|
||||
public static final LEVEL:String = "level";
|
||||
public static final CREDIT:String = "credit";
|
||||
public static final ADDRESS:String = "address";
|
||||
public static final NOTES:String = "notes";
|
||||
public static final FFE_LICENCE:String = "ffeLicence";
|
||||
public static final FFE_LICENCE_VALIDITY_YEAR:String = "ffeLicenceValidityYear";
|
||||
public static final FFE_LICENCE_NUMBER:String = "ffeLicenceNumber";
|
||||
public static final LEGAL_GUARDIAN_NAME:String = "legalGuardianName";
|
||||
public static final LEGAL_GUARDIAN_FIRSTNAME:String = "legalGuardianFirstName";
|
||||
public static final LEGAL_GUARDIAN_ROLE:String = "legalGuardianRole";
|
||||
public static final LEGAL_GUARDIAN_PHONE_NUMBER:String = "legalGuardianPhoneNumber";
|
||||
public static final LEGAL_GUARDIAN_EMAIL:String = "legalGuardianEmail";
|
||||
|
||||
public var id:Int;
|
||||
public var name:String;
|
||||
public var firstName:String;
|
||||
|
||||
Reference in New Issue
Block a user