diff --git a/project.xml b/project.xml index d18b75a..1d9f0db 100644 --- a/project.xml +++ b/project.xml @@ -36,4 +36,9 @@ + + + + + \ No newline at end of file diff --git a/src/LPTCManager2026.hx b/src/LPTCManager2026.hx index f8cdf72..3d4ba45 100644 --- a/src/LPTCManager2026.hx +++ b/src/LPTCManager2026.hx @@ -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 { diff --git a/src/components/RoundAvatar.hx b/src/components/RoundAvatar.hx index 9cd4950..c57b0c3 100644 --- a/src/components/RoundAvatar.hx +++ b/src/components/RoundAvatar.hx @@ -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); diff --git a/src/model/AppModelLocator.hx b/src/model/AppModelLocator.hx index 6abe66d..7d04412 100644 --- a/src/model/AppModelLocator.hx +++ b/src/model/AppModelLocator.hx @@ -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 diff --git a/src/model/Constants.hx b/src/model/Constants.hx index e7ab196..630c713 100644 --- a/src/model/Constants.hx +++ b/src/model/Constants.hx @@ -1,5 +1,7 @@ package model; +import openfl.system.Capabilities; + class Constants { // Colors @@ -28,7 +30,14 @@ class Constants { public static final MONTSERRAT_REGULAR_400:String = "MontserratRegular400"; 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() { - - } } \ No newline at end of file diff --git a/src/view/RiderCardDrawer.hx b/src/view/RiderCardDrawer.hx index 81eb470..ec95f19 100644 --- a/src/view/RiderCardDrawer.hx +++ b/src/view/RiderCardDrawer.hx @@ -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(); + + }*/ } diff --git a/src/view/RidersList.hx b/src/view/RidersList.hx index c6acd1a..bbe102b 100644 --- a/src/view/RidersList.hx +++ b/src/view/RidersList.hx @@ -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 diff --git a/src/vo/RiderVO.hx b/src/vo/RiderVO.hx index f8228af..21c80c5 100644 --- a/src/vo/RiderVO.hx +++ b/src/vo/RiderVO.hx @@ -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;