feature: date selector in ranking page

Pixiview/Illust/RankingPage.xaml

@@ -4,6 +4,7 @@
                                    xmlns:i="clr-namespace:Pixiview.Illust"
                                    xmlns:u="clr-namespace:Pixiview.UI"
                                    xmlns:r="clr-namespace:Pixiview.Resources"
+                                   xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
                                    x:Class="Pixiview.Illust.RankingPage"
                                    BackgroundColor="{DynamicResource WindowColor}"
                                    Title="{r:Text Ranking}">
@@ -33,8 +34,15 @@
         </Grid>
     </Shell.TitleView>
     <ContentPage.ToolbarItems>
-        <ToolbarItem Order="Primary" Clicked="Refresh_Clicked"
-                     IconImageSource="{DynamicResource FontIconRefresh}"/>
+        <ToolbarItem Order="Primary"
+                     Command="{Binding ToolbarCommand}" CommandParameter="prev"
+                     IconImageSource="{DynamicResource FontIconCaretCircleLeft}"/>
+        <ToolbarItem Order="Primary"
+                     Command="{Binding ToolbarCommand}" CommandParameter="select"
+                     IconImageSource="{DynamicResource FontIconCalendarDay}"/>
+        <ToolbarItem Order="Primary"
+                     Command="{Binding ToolbarCommand}" CommandParameter="next"
+                     IconImageSource="{DynamicResource FontIconCaretCircleRight}"/>
     </ContentPage.ToolbarItems>
     <Grid>
         <ScrollView x:Name="scrollView" Scrolled="ScrollView_Scrolled"
@@ -92,5 +100,11 @@
             <ActivityIndicator IsRunning="True" IsVisible="True"
                                Color="{DynamicResource WindowColor}"/>
         </Frame>
+
+        <DatePicker x:Name="datePicker" IsVisible="False"
+                    ios:DatePicker.UpdateMode="WhenFinished"
+                    Date="{Binding SelectedDate}"
+                    MaximumDate="{Binding MaximumDate}"
+                    DateSelected="DatePicker_DateSelected"/>
     </Grid>
 </i:IllustRankingDataCollectionPage>

Pixiview/Illust/RankingPage.xaml.cs

@@ -18,6 +18,10 @@ namespace Pixiview.Illust
             nameof(SegmentDate), typeof(int), typeof(RankingPage), propertyChanged: OnSegmentDatePropertyChanged);
         public static readonly BindableProperty SegmentTypeProperty = BindableProperty.Create(
             nameof(SegmentType), typeof(int), typeof(RankingPage), propertyChanged: OnSegmentTypePropertyChanged);
+        public static readonly BindableProperty MaximumDateProperty = BindableProperty.Create(
+            nameof(MaximumDate), typeof(DateTime), typeof(RankingPage), DateTime.Now);
+        public static readonly BindableProperty SelectedDateProperty = BindableProperty.Create(
+            nameof(SelectedDate), typeof(DateTime), typeof(RankingPage), DateTime.Now);
 
         private static void OnSegmentDatePropertyChanged(BindableObject obj, object old, object @new)
         {
@@ -60,12 +64,28 @@ namespace Pixiview.Illust
             get => (int)GetValue(SegmentTypeProperty);
             set => SetValue(SegmentTypeProperty, value);
         }
+        public DateTime MaximumDate
+        {
+            get => (DateTime)GetValue(MaximumDateProperty);
+            set => SetValue(MaximumDateProperty, value);
+        }
+        public DateTime SelectedDate
+        {
+            get => (DateTime)GetValue(SelectedDateProperty);
+            set => SetValue(SelectedDateProperty, value);
+        }
+        public Command<string> ToolbarCommand { get; private set; }
 
         private double lastScrollY = double.MinValue;
+        public bool previousEnabled;
+        public bool dateEnabled;
+        public bool nextEnabled;
 
         private bool isFilterVisible;
         private string lastQueryKey;
         private string queryDate;
+        private string previousDate;
+        private string nextDate;
         private int currentPage;
         private int nextPage;
 
@@ -74,6 +94,7 @@ namespace Pixiview.Illust
         public RankingPage()
         {
             Resources.Add("cardView", GetCardViewTemplate());
+            ToolbarCommand = new Command<string>(OnDateTrigger, OnCanDateTrigger);
             InitializeComponent();
             gridFilter.TranslationY = -100;
             panelFilter.TranslationY = -100;
@@ -81,6 +102,9 @@ namespace Pixiview.Illust
             lastQueryKey = QueryKey;
             queryDate = null; // $"{now.Year}{now.Month:00}{now.Day:00}";
             currentPage = 1;
+
+            datePicker.MinimumDate = new DateTime(2007, 9, 13);
+            MaximumDate = DateTime.Now;
         }
 
         protected override void DoIllustsLoaded(IllustCollection collection)
@@ -118,13 +142,56 @@ namespace Pixiview.Illust
                     nextPage = next;
                 }
                 var date = data.date;
-                if (date.Length == 8)
+                DateTime now;
+                if (date.Length == 8 && int.TryParse(date, out _))
                 {
                     queryDate = date;
-                    date = date.Substring(0, 4) + "-" + date.Substring(4, 2) + "-" + date.Substring(6, 2);
+                    now = new DateTime(
+                        int.Parse(date.Substring(0, 4)),
+                        int.Parse(date.Substring(4, 2)),
+                        int.Parse(date.Substring(6, 2)));
+                    SelectedDate = now;
+                    date = now.ToShortDateString();
+                }
+                else
+                {
+                    now = default;
                 }
                 date = ResourceHelper.GetResource(data.mode, date);
-                MainThread.BeginInvokeOnMainThread(() => Title = date);
+
+                var prev = data.prev_date;
+                if (int.TryParse(prev, out _))
+                {
+                    previousDate = prev;
+                    previousEnabled = true;
+                }
+                else
+                {
+                    previousDate = null;
+                    previousEnabled = false;
+                }
+                var next_ = data.next_date;
+                if (int.TryParse(next_, out _))
+                {
+                    nextDate = next_;
+                    nextEnabled = true;
+                }
+                else
+                {
+                    nextDate = null;
+                    nextEnabled = false;
+                    if (now != default)
+                    {
+                        MaximumDate = now;
+                    }
+                }
+                dateEnabled = true;
+                MainThread.BeginInvokeOnMainThread(() =>
+                {
+                    ToolbarCommand.ChangeCanExecute();
+                    Title = date;
+                });
+
             }
             return data;
         }
@@ -157,14 +224,74 @@ namespace Pixiview.Illust
             }
         }
 
-        private void Refresh_Clicked(object sender, EventArgs e)
+        private void OnDateTrigger(string action)
         {
             if (IsLoading)
             {
                 return;
             }
+            if (action == "select")
+            {
+                datePicker.Focus();
+            }
+            else
+            {
+                var date = action == "prev" ? previousDate : nextDate;
+                if (date == null)
+                {
+                    return;
+                }
+                if (isFilterVisible)
+                {
+                    ToggleFilterPanel(false);
+                }
+                // release
+                var collection = IllustCollection;
+                if (collection != null)
+                {
+                    collection.Running = false;
+                    IllustCollection = null;
+                }
+                previousEnabled = false;
+                dateEnabled = false;
+                nextEnabled = false;
+                queryDate = date;
+                currentPage = 1;
+                StartLoad(true);
+            }
+        }
+
+        private bool OnCanDateTrigger(string action)
+        {
+            switch (action)
+            {
+                case "prev":
+                    return previousEnabled;
+                case "next":
+                    return nextEnabled;
+                default:
+                    return dateEnabled;
+            }
+        }
+
+        private void DatePicker_DateSelected(object sender, DateChangedEventArgs e)
+        {
+            if (IsLoading)
+            {
+                return;
+            }
+            // release
+            var collection = IllustCollection;
+            if (collection != null)
+            {
+                collection.Running = false;
+                IllustCollection = null;
+            }
+            previousEnabled = false;
+            dateEnabled = false;
+            nextEnabled = false;
+            queryDate = e.NewDate.ToString("yyyyMMdd");
             currentPage = 1;
-            IllustCollection = null;
             StartLoad(true);
         }
 
@@ -226,10 +353,16 @@ namespace Pixiview.Illust
                 }
                 if (lastQueryKey != query)
                 {
+                    // release
+                    var collection = IllustCollection;
+                    if (collection != null)
+                    {
+                        collection.Running = false;
+                        IllustCollection = null;
+                    }
                     // query changed.
                     currentPage = 1;
                     lastQueryKey = query;
-                    IllustCollection = null;
                     refresh = true;
                     App.DebugPrint($"query changed: {query}");
                 }

Pixiview/Resources/Languages/zh-CN.xml

@@ -16,12 +16,12 @@
     <Male>受男性欢迎</Male>
     <monthly>当月截至 {0}</monthly>
     <weekly>当周截至 {0}</weekly>
-    <daily>当日 {0}</daily>
-    <male>受欢迎 {0}</male>
+    <daily>{0} 当日</daily>
+    <male>{0} 最受欢迎</male>
     <monthly_r18>当月截至 {0}</monthly_r18>
     <weekly_r18>当周截至 {0}</weekly_r18>
-    <daily_r18>当日 {0}</daily_r18>
-    <male_r18>受欢迎 {0}</male_r18>
+    <daily_r18>{0} 当日</daily_r18>
+    <male_r18>{0} 最受欢迎</male_r18>
     <General>一般</General>
     <R18>R-18</R18>
     <Follow>已关注</Follow>

Pixiview/UI/StyleDefinition.cs

@@ -47,6 +47,9 @@ namespace Pixiview.UI
         public const string IconCircleCheck = "\uf058";
         public const string IconPlay = "\uf04b";
         public const string IconMore = "\uf142";
+        public const string IconCaretCircleLeft = "\uf32e";
+        public const string IconCaretCircleRight = "\uf330";
+        public const string IconCalendarDay = "\uf783";
 
         static StyleDefinition()
         {

Pixiview/UI/Theme/ThemeBase.cs

@@ -14,6 +14,9 @@ namespace Pixiview.UI.Theme
         public const string FontIconFavorite = nameof(FontIconFavorite);
         public const string FontIconShare = nameof(FontIconShare);
         public const string FontIconMore = nameof(FontIconMore);
+        public const string FontIconCaretCircleLeft = nameof(FontIconCaretCircleLeft);
+        public const string FontIconCaretCircleRight = nameof(FontIconCaretCircleRight);
+        public const string FontIconCalendarDay = nameof(FontIconCalendarDay);
         public const string IconCircleCheck = nameof(IconCircleCheck);
         public const string IconCaretDown = nameof(IconCaretDown);
 
@@ -57,6 +60,9 @@ namespace Pixiview.UI.Theme
             Add(FontIconFavorite, GetSolidIcon(StyleDefinition.IconFavorite, solidFontFamily));
             Add(FontIconShare, GetSolidIcon(StyleDefinition.IconShare, solidFontFamily));
             Add(FontIconMore, GetSolidIcon(StyleDefinition.IconMore, regularFontFamily));
+            Add(FontIconCaretCircleLeft, GetSolidIcon(StyleDefinition.IconCaretCircleLeft, solidFontFamily));
+            Add(FontIconCaretCircleRight, GetSolidIcon(StyleDefinition.IconCaretCircleRight, solidFontFamily));
+            Add(FontIconCalendarDay, GetSolidIcon(StyleDefinition.IconCalendarDay, regularFontFamily));
 
             Add(IconCircleCheck, StyleDefinition.IconCircleCheck);
             Add(IconCaretDown, StyleDefinition.IconCaretDown);