added filter dynamic

This commit is contained in:
Komek Hayytnazarov 2023-03-28 15:13:08 +05:00
parent eac344a671
commit 4e8ef06b54
12 changed files with 372 additions and 299 deletions

View File

@ -11,6 +11,7 @@
"dili", "dili",
"fluttericon", "fluttericon",
"fontello", "fontello",
"Getx",
"harakteristiki", "harakteristiki",
"LTRB", "LTRB",
"roundcheckbox", "roundcheckbox",

View File

@ -0,0 +1,31 @@
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../app.dart';
class CircleNumberWidget extends StatelessWidget {
final int number;
const CircleNumberWidget({
Key? key,
required this.number,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8.w),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: HexColor('#EFF0F4'),
),
child: Text(
number.toString(),
style: new TextStyle(
color: ThemeColor.black,
fontSize: 14.sp,
fontWeight: FontWeight.w500,
),
),
);
}
}

View File

@ -1,6 +1,7 @@
library utils; library utils;
export 'calculate_aspect_ratio.dart'; export 'calculate_aspect_ratio.dart';
export 'circle_number_widget.dart';
export 'constants.dart'; export 'constants.dart';
export 'device_info.dart'; export 'device_info.dart';
export 'grid_view_load_more.dart'; export 'grid_view_load_more.dart';

View File

@ -1,7 +1,6 @@
import 'package:elektronika/app/core/utils/utils.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import '../data.dart'; import '../../app.dart';
class FilterApi { class FilterApi {
static String className = 'FilterApi'; static String className = 'FilterApi';
@ -132,11 +131,7 @@ class FilterApi {
end: 40000.0, end: 40000.0,
queryValue: '900,3000', queryValue: '900,3000',
)); ));
// String path = Constants.BASE_URL + 'categories/$categoryId/filters';
// final response = await HttpUtil().get(path: path);
// debugPrint('getFilters response $response');
return list; return list;
} catch (e) { } catch (e) {
debugPrint('ERROR: class: $className, method: $fnName'); debugPrint('ERROR: class: $className, method: $fnName');
@ -146,9 +141,43 @@ class FilterApi {
static Future<List<FilterOption>> getOptions(int page, int itemsPerPage, FilterModel model, String searchKey) async { static Future<List<FilterOption>> getOptions(int page, int itemsPerPage, FilterModel model, String searchKey) async {
debugPrint('page:$page, model:${model.code}' ', id:${model.id}'); debugPrint('page:$page, model:${model.code}' ', id:${model.id}');
// Attribute (Brand, Size, Style, Material ...)
try {
List<FilterOption> options = []; List<FilterOption> options = [];
final String categoryId = getCategoryIdFromFilterableQueryParams();
String path = Constants.BASE_URL + 'attribute-options';
final Map<String, dynamic> params = {
'locale': await getLocale(),
'attribute_id': model.id,
'category': categoryId,
'limit': itemsPerPage,
'page': page,
'search': searchKey,
};
final response = await HttpUtil().get(path: path, queryParameters: params);
for (final option in response['data']) {
options.add(FilterOption.fromJson(option));
}
return options; return options;
} catch (e) {
debugPrint('error : $e');
throw e;
}
}
static String getCategoryIdFromFilterableQueryParams() {
FilterController fc = Get.find();
final queryParams = fc.state.filterableQueryParams;
String categoryId = '1';
if (queryParams['category_id'] != null) {
categoryId = queryParams['category_id'].toString();
}
return categoryId;
} }
} }

View File

@ -1,3 +1,6 @@
/// [FilterModel] is used for filter screen
/// for example name is [Brand] options are [Mavi, Koton etc ...]
/// [selectedOptions] is selected by user.
class FilterModel { class FilterModel {
late int id; late int id;
late String code; late String code;
@ -29,21 +32,24 @@ class FilterModel {
class FilterOption { class FilterOption {
late int id; late int id;
late String adminName; late String name;
String? label; late String label;
String? image; late String swatchValue;
late String queryValue;
FilterOption({ FilterOption({
required this.id, required this.id,
required this.adminName, required this.name,
this.label, required this.label,
this.image, required this.swatchValue,
required this.queryValue,
}); });
FilterOption.fromJson(Map<String, dynamic> json) { FilterOption.fromJson(Map<String, dynamic> json) {
id = json['id']; id = json['id'];
adminName = json['admin_name']; name = json['admin_name'];
label = json['label']; label = json['label'];
image = json['image']; swatchValue = json['swatch_value'] ?? '';
queryValue = json['id'].toString();
} }
} }

View File

@ -51,8 +51,10 @@ class HomePage extends StatelessWidget {
), ),
), ),
controller.state.banners1.isNotEmpty
? Column(
children: [
AppTheme.appSizeDivider20H, AppTheme.appSizeDivider20H,
Padding( Padding(
padding: EdgeInsets.only(left: 16.w, right: 16.w), padding: EdgeInsets.only(left: 16.w, right: 16.w),
child: controller.state.isLoading.value child: controller.state.isLoading.value
@ -61,6 +63,9 @@ class HomePage extends StatelessWidget {
sliders: controller.state.banners1, sliders: controller.state.banners1,
), ),
), ),
],
)
: SizedBox.shrink(),
AppTheme.appSizeDivider30H, AppTheme.appSizeDivider30H,
@ -75,6 +80,9 @@ class HomePage extends StatelessWidget {
), ),
), ),
controller.state.banners2.isNotEmpty
? Column(
children: [
AppTheme.appSizeDivider10H, AppTheme.appSizeDivider10H,
Padding( Padding(
padding: EdgeInsets.only(left: 16.w, right: 16.w), padding: EdgeInsets.only(left: 16.w, right: 16.w),
@ -84,6 +92,9 @@ class HomePage extends StatelessWidget {
sliders: controller.state.banners2, sliders: controller.state.banners2,
), ),
), ),
],
)
: SizedBox.shrink(),
AppTheme.appSizeDivider30H, AppTheme.appSizeDivider30H,

View File

@ -53,6 +53,7 @@ class FilterCard extends StatelessWidget {
context: context, context: context,
builder: (context) => BSChooseFilter( builder: (context) => BSChooseFilter(
model: model, model: model,
), ),
); );
}, },
@ -85,7 +86,9 @@ class FilterCard extends StatelessWidget {
), ),
// Spacer(), // Spacer(),
Expanded( Expanded(
child: (model.selectedOptions.isNotEmpty || controller.state.selectedPriceFilter.value != null) ? _printSubCategory() : SizedBox.shrink(), child: (model.selectedOptions.isNotEmpty || controller.state.selectedPriceFilter.value != null)
? _printSubCategory()
: SizedBox.shrink(),
), ),
], ],
), ),
@ -104,7 +107,7 @@ class FilterCard extends StatelessWidget {
final length = model.selectedOptions.length; final length = model.selectedOptions.length;
for (int i = 0; i < length; i++) { for (int i = 0; i < length; i++) {
final String name = model.selectedOptions[i].adminName; final String name = model.selectedOptions[i].label;
list.add(_addText(i != length - 1 ? name + ', ' : name)); list.add(_addText(i != length - 1 ? name + ', ' : name));
} }
} }

View File

@ -1,8 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import '../../../../../library/multi_selector/multi_select_bottom_sheet.dart'; import '../../../../../library/library.dart';
import '../../../../../library/multi_selector/multi_select_item.dart';
import '../../../../data/models/models.dart'; import '../../../../data/models/models.dart';
import '../controller.dart'; import '../controller.dart';
import 'b_s_price_filter.dart'; import 'b_s_price_filter.dart';
@ -14,19 +13,19 @@ class BSChooseFilter extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
debugPrint('model ${model.options.length}'); debugPrint('model ${model.code}');
return GetBuilder<FilterController>( return GetBuilder<FilterController>(
// init: FilterController(), builder: (fc) {
builder: (fc) => model.code != 'price' if (model.code == 'price') {
? MultiSelectBottomSheet( return BSPriceFilter(title: model.name);
initialValue: model.selectedOptions, } else /* if (model.code == 'brand') { */
title: model.name, return MultiSelectBottomSheetGetX(
items: model.options.map((option) => MultiSelectItem<FilterOption>(option, option.adminName)).toList(), model: model,
onConfirm: (selectedItems) => fc.onMultipleSelectionConfirmed(model, selectedItems), onConfirm: (selectedItems) => fc.onMultipleSelectionConfirmed(model, selectedItems),
onClear: (selectedItems) => fc.onMultipleSelectionCleared(model), onClear: (selectedItems) => fc.onMultipleSelectionCleared(model),
separateSelectedItems: true, );
) },
: BSPriceFilter(title: model.name),
); );
} }
} }

View File

@ -3,13 +3,12 @@ library library;
export 'currency_text_input_formatter.dart'; export 'currency_text_input_formatter.dart';
export 'custom_icons.dart'; export 'custom_icons.dart';
export 'dash_separator.dart'; export 'dash_separator.dart';
export 'dash_separator.dart';
export 'fade_in_indexed.dart'; export 'fade_in_indexed.dart';
export 'gradient_progress.dart'; export 'gradient_progress.dart';
export 'multi_selector/multi_select_action.dart'; export 'multi_selector/multi_select_action.dart';
export 'multi_selector/multi_select_bottom_sheet.dart'; export 'multi_selector/multi_select_bottom_sheet.dart';
export 'multi_selector/multi_select_bottom_sheet_getx.dart';
export 'multi_selector/multi_select_item.dart'; export 'multi_selector/multi_select_item.dart';
export 'outline_gradient_button.dart'; export 'outline_gradient_button.dart';
export 'password_strength/password_strength.dart'; export 'password_strength/password_strength.dart';
export 'tab_bar_material_indicator.dart'; export 'tab_bar_material_indicator.dart';
export 'tab_bar_material_indicator.dart';

View File

@ -52,7 +52,7 @@ class MultiSelectController extends GetxController
getFirstData = true; getFirstData = true;
// convert data // convert data
var newItems = result.map((option) => MultiSelectItem<FilterOption>(option, option.adminName)).toList(); var newItems = result.map((option) => MultiSelectItem<FilterOption>(option, option.label)).toList();
debugPrint('newItems ${newItems.length}'); debugPrint('newItems ${newItems.length}');
for (var item in newItems) { for (var item in newItems) {
item.selected = this.selectedValues.where((element) => element.id == item.value.id).isNotEmpty; item.selected = this.selectedValues.where((element) => element.id == item.value.id).isNotEmpty;

View File

@ -1,253 +1,253 @@
// import 'package:animate_do/animate_do.dart'; import 'package:animate_do/animate_do.dart';
// import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
// import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
// import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
// import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
// import 'package:get/get.dart'; import 'package:get/get.dart';
// import '../../../app/app.dart'; import '../../../app/app.dart';
// import 'controller.dart'; import 'controller.dart';
// import 'multi_select_item.dart'; import 'multi_select_item.dart';
// class MultiSelectBottomSheetGetX extends StatelessWidget { class MultiSelectBottomSheetGetX extends StatelessWidget {
// /// The list of selected values before interaction. /// The list of selected values before interaction.
// // final List<FilterOption> initialValue; // final List<FilterOption> initialValue;
// /// The text at the top of the BottomSheet. /// The text at the top of the BottomSheet.
// // final String title; // final String title;
// /// Used to [getData] from api. /// Used to [getData] from api.
// // final String modelCode; // final String modelCode;
// final FilterModel model; final FilterModel model;
// /// Fires when the an item is selected / unselected. /// Fires when the an item is selected / unselected.
// final void Function(List<FilterOption>)? onSelectionChanged; final void Function(List<FilterOption>)? onSelectionChanged;
// /// Fires when confirm is tapped. /// Fires when confirm is tapped.
// final void Function(List<FilterOption>) onConfirm; final void Function(List<FilterOption>) onConfirm;
// /// Fires when clear is tapped. /// Fires when clear is tapped.
// final void Function(List<FilterOption>) onClear; final void Function(List<FilterOption>) onClear;
// MultiSelectBottomSheetGetX({ MultiSelectBottomSheetGetX({
// // required this.initialValue, // required this.initialValue,
// // required this.title, // required this.title,
// // required this.modelCode, // required this.modelCode,
// required this.model, required this.model,
// required this.onConfirm, required this.onConfirm,
// required this.onClear, required this.onClear,
// this.onSelectionChanged, this.onSelectionChanged,
// }); });
// /// Returns a CheckboxListTile /// Returns a CheckboxListTile
// Widget _buildListItem(BuildContext context, MultiSelectController msc, MultiSelectItem<FilterOption> item) { Widget _buildListItem(BuildContext context, MultiSelectController msc, MultiSelectItem<FilterOption> item) {
// final theme = Theme.of(context); final theme = Theme.of(context);
// final oldCheckboxTheme = theme.checkboxTheme; final oldCheckboxTheme = theme.checkboxTheme;
// final newCheckBoxTheme = oldCheckboxTheme.copyWith( final newCheckBoxTheme = oldCheckboxTheme.copyWith(
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(300)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(300)),
// ); );
// return Theme( return Theme(
// data: theme.copyWith(checkboxTheme: newCheckBoxTheme), data: theme.copyWith(checkboxTheme: newCheckBoxTheme),
// child: Transform.translate( child: Transform.translate(
// offset: Offset(-24, 0), offset: Offset(-24, 0),
// child: Transform.scale( child: Transform.scale(
// scale: 1.h, scale: 1.h,
// child: CheckboxListTile( child: CheckboxListTile(
// checkColor: ThemeColor.white, checkColor: ThemeColor.white,
// value: item.selected, value: item.selected,
// activeColor: ThemeColor.mainColor, activeColor: ThemeColor.mainColor,
// title: model.code != 'color' title: model.code != 'color'
// ? Text(item.label) ? Text(item.label)
// : Align( : Align(
// alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
// child: Row( child: Row(
// children: [ children: [
// item.value.swatchValue.isNotEmpty item.value.swatchValue.isNotEmpty
// ? CircleAvatar( ? CircleAvatar(
// backgroundColor: Colors.grey, backgroundColor: Colors.grey,
// maxRadius: 8.40.w, maxRadius: 8.40.w,
// child: CircleAvatar( child: CircleAvatar(
// backgroundColor: HexColor(item.value.swatchValue), backgroundColor: HexColor(item.value.swatchValue),
// maxRadius: 8.0.w, maxRadius: 8.0.w,
// ), ),
// ) )
// : SizedBox.shrink(), : SizedBox.shrink(),
// SizedBox(width: 16.w), SizedBox(width: 16.w),
// Text(item.label), Text(item.label),
// ], ],
// ), ),
// ), ),
// controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
// onChanged: (checked) => msc.onListBoxListTileChanged( onChanged: (checked) => msc.onListBoxListTileChanged(
// item, item,
// onSelectionChanged, onSelectionChanged,
// checked, checked,
// ), ),
// ), ),
// ), ),
// ), ),
// ); );
// } }
// @override @override
// Widget build(BuildContext context) { Widget build(BuildContext context) {
// final EdgeInsets mqPadding = MediaQuery.of(context).padding; final EdgeInsets mqPadding = MediaQuery.of(context).padding;
// var screenSize = MediaQuery.of(context).size; var screenSize = MediaQuery.of(context).size;
// return GetBuilder<MultiSelectController>( return GetBuilder<MultiSelectController>(
// init: MultiSelectController(model), init: MultiSelectController(model),
// builder: (msc) { builder: (msc) {
// final bool isLastPage = msc.lastPage.value; final bool isLastPage = msc.lastPage.value;
// return Container( return Container(
// constraints: BoxConstraints(maxHeight: screenSize.height - mqPadding.top), constraints: BoxConstraints(maxHeight: screenSize.height - mqPadding.top),
// padding: EdgeInsets.only(bottom: mqPadding.bottom + 16, top: 16, left: 16, right: 16), padding: EdgeInsets.only(bottom: mqPadding.bottom + 16, top: 16, left: 16, right: 16),
// decoration: new BoxDecoration( decoration: new BoxDecoration(
// color: ThemeColor.white, color: ThemeColor.white,
// borderRadius: BorderRadius.only(topRight: Radius.circular(16), topLeft: Radius.circular(16)), borderRadius: BorderRadius.only(topRight: Radius.circular(16), topLeft: Radius.circular(16)),
// ), ),
// child: Column( child: Column(
// mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
// children: [ children: [
// Container( Container(
// padding: const EdgeInsets.only(top: 8), padding: const EdgeInsets.only(top: 8),
// child: Center(child: SvgPicture.asset('assets/icons/drag_line.svg')), child: Center(child: SvgPicture.asset('assets/icons/drag_line.svg')),
// ), ),
// SizedBox(height: 8.h), SizedBox(height: 8.h),
// // title // title
// Column( Column(
// crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
// children: [ children: [
// Text(model.name, style: AppTheme.bottomSheetHeaderStyle), Text(model.name, style: AppTheme.bottomSheetHeaderStyle),
// SizedBox(height: 16), SizedBox(height: 16),
// // search box // search box
// Container( Container(
// padding: const EdgeInsets.all(8), padding: const EdgeInsets.all(8),
// height: 40.h, height: 40.h,
// width: double.infinity, width: double.infinity,
// decoration: new BoxDecoration( decoration: new BoxDecoration(
// color: ThemeColor.colorEFF0F4, color: ThemeColor.colorEFF0F4,
// borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
// ), ),
// child: TextFormField( child: TextFormField(
// cursorColor: Colors.black, cursorColor: Colors.black,
// inputFormatters: [new LengthLimitingTextInputFormatter(30)], inputFormatters: [new LengthLimitingTextInputFormatter(30)],
// decoration: InputDecoration( decoration: InputDecoration(
// border: InputBorder.none, border: InputBorder.none,
// prefixIcon: Icon( prefixIcon: Icon(
// Icons.search, Icons.search,
// size: 24.h, size: 24.h,
// color: Colors.grey, color: Colors.grey,
// ), ),
// ), ),
// onChanged: (val) => msc.onSearchChanged(val), onChanged: (val) => msc.onSearchChanged(val),
// ), ),
// ), ),
// SizedBox(height: 20), SizedBox(height: 20),
// Row( Row(
// children: [ children: [
// FadeIn(child: CircleNumberWidget(number: msc.selectedValues.length)), FadeIn(child: CircleNumberWidget(number: msc.selectedValues.length)),
// SizedBox(width: 8), SizedBox(width: 8),
// Text( Text(
// 'applied'.tr, 'applied'.tr,
// style: new TextStyle( style: new TextStyle(
// color: ThemeColor.color717278, color: ThemeColor.color717278,
// fontSize: 16.sp, fontSize: 16.sp,
// ), ),
// ), ),
// Spacer(), Spacer(),
// msc.selectedValues.isNotEmpty msc.selectedValues.isNotEmpty
// ? FadeIn( ? FadeIn(
// child: TextButton( child: TextButton(
// child: Text('clear'.tr), child: Text('clear'.tr),
// style: TextButton.styleFrom(foregroundColor: ThemeColor.mainColor), style: TextButton.styleFrom(foregroundColor: ThemeColor.mainColor),
// onPressed: () => msc.clearFilter(context, onClear), onPressed: () => msc.clearFilter(context, onClear),
// ), ),
// ) )
// : SizedBox.shrink(), : SizedBox.shrink(),
// ], ],
// ), ),
// ], ],
// ), ),
// AppTheme.appDivider, AppTheme.appSizeDivider10H,
// // body // body
// Expanded( Expanded(
// child: ConstrainedBox( child: ConstrainedBox(
// constraints: new BoxConstraints(minHeight: 0.3.sh), constraints: new BoxConstraints(minHeight: 0.3.sh),
// child: msc.obx( child: msc.obx(
// (state) => state != null (state) => state != null
// ? RefreshIndicator( ? RefreshIndicator(
// onRefresh: msc.getData, onRefresh: msc.getData,
// color: ThemeColor.mainColor, color: ThemeColor.mainColor,
// child: MediaQuery.removePadding( child: MediaQuery.removePadding(
// context: context, context: context,
// removeTop: true, removeTop: true,
// child: ListView.builder( child: ListView.builder(
// shrinkWrap: true, shrinkWrap: true,
// controller: msc.scroll, controller: msc.scroll,
// itemCount: state.length + 1, itemCount: state.length + 1,
// itemBuilder: (context, index) { itemBuilder: (context, index) {
// if (index < state.length) { if (index < state.length) {
// return FadeIn( return FadeIn(
// child: _buildListItem(context, msc, state[index]), child: _buildListItem(context, msc, state[index]),
// ); );
// } else if (index == state.length && !isLastPage) } else if (index == state.length && !isLastPage)
// return Padding( return Padding(
// padding: const EdgeInsets.only(top: 10, bottom: 40), padding: const EdgeInsets.only(top: 10, bottom: 40),
// child: Center( child: Center(
// child: CustomLoader(), child: CustomLoader(),
// ), ),
// ); );
// else { else {
// return SizedBox.shrink(); return SizedBox.shrink();
// } }
// }, },
// ), ),
// ), ),
// ) )
// : Center( : Center(
// child: Text( child: Text(
// 'error_occurred'.tr, 'error_occurred'.tr,
// style: TextStyle(fontSize: 18), style: TextStyle(fontSize: 18),
// textAlign: TextAlign.center, textAlign: TextAlign.center,
// ), ),
// ), ),
// onLoading: Center(child: CustomLoader()), onLoading: Center(child: CustomLoader()),
// onEmpty: Align( onEmpty: Align(
// alignment: Alignment.topCenter, alignment: Alignment.topCenter,
// child: NotFoundWidget(), child: ItemNotFoundWidget(),
// ), ),
// onError: (error) => Center( onError: (error) => Center(
// child: Text( child: Text(
// 'error_occurred'.tr, 'error_occurred'.tr,
// style: TextStyle(fontSize: 18), style: TextStyle(fontSize: 18),
// textAlign: TextAlign.center, textAlign: TextAlign.center,
// ), ),
// ), ),
// ), ),
// ), ),
// ), ),
// // footer // footer
// msc.selectedValues.isNotEmpty msc.selectedValues.isNotEmpty
// ? FadeIn( ? FadeIn(
// duration: Duration(milliseconds: 900), duration: Duration(milliseconds: 900),
// child: ButtonWidthFull( child: ColoredButton(
// title: 'done'.tr, title: 'done'.tr,
// btnColor: ThemeColor.mainColor, btnColor: ThemeColor.mainColor,
// callback: () => msc.onConfirmSelection( callback: () => msc.onConfirmSelection(
// context, context,
// onConfirm, onConfirm,
// ), ),
// ), ),
// ) )
// : SizedBox.shrink(), : SizedBox.shrink(),
// ], ],
// ), ),
// ); );
// }, },
// ); );
// } }
// } }

View File

@ -35,13 +35,6 @@ class ElektronikaShopApp extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
// SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
// systemNavigationBarColor: Colors.blue, // navigation bar color
// statusBarColor: Colors.transparent, // status bar color
// ));
// SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
// statusBarColor: ThemeColor.mainColor,
// ));
SystemChrome.setPreferredOrientations([ SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp, DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown, DeviceOrientation.portraitDown,