feat: support showing wrapped of past years

Implements #4

Author: foosel

octoprint_wrapped/static/js/wrapped.js

@@ -47,7 +47,7 @@ $(function () {
                     : now.getFullYear() - 1; // already January
             const years = self.availableYears();
 
-            if (years.indexOf(year) !== -1 && self.withinWrappedSeason()) {
+            if (years.indexOf(year) !== -1) {
                 return year;
             } else {
                 return false;
@@ -62,7 +62,14 @@ $(function () {
             const year = self.currentWrapped();
             if (!year) return false;
 
-            return OctoPrint.plugins.wrapped.getYearSvgUrl(year);
+            return self.svgUrlForYear(year);
+        });
+
+        self.pastYears = ko.pureComputed(() => {
+            const now = new Date();
+            const year = now.getFullYear();
+            const years = self.availableYears();
+            return years.filter((y) => y < year).sort((a, b) => b - a);
         });
 
         self.withinWrappedSeason = ko.pureComputed(() => {
@@ -74,6 +81,10 @@ $(function () {
             );
         });
 
+        self.svgUrlForYear = (year) => {
+            return OctoPrint.plugins.wrapped.getYearSvgUrl(year);
+        };
+
         self.requestData = () => {
             if (
                 !self.loginState.hasPermission(

octoprint_wrapped/templates/wrapped_about.jinja2

@@ -19,6 +19,23 @@
 </div>
 <p data-bind="visible: !withinWrappedSeason()">
     {% trans %}
-    Nothing to see here at the moment! Come back between December 1st and January 10th!
+    Nothing to see for this year yet! Come back between December 1st and January 10th!
 {% endtrans %}
 </p>
+
+<div id="plugin_wrapped_pastyears"
+     data-bind="visible: pastYears().length > 0">
+    <h4>
+        <a href="javascript:void()"
+           data-bind="toggleContent: { class: 'fa-caret-right fa-caret-down', parent: '#plugin_wrapped_pastyears', container: '.hide' }"><i class="fas fa-caret-right"></i> {{ _("Past years") }}</a>
+    </h4>
+
+    <div class="hide" data-bind="foreach: pastYears">
+        <h5 data-bind="text: $data"></h5>
+        <img data-bind="src.svgtopng: $root.svgUrlForYear($data)"
+             alt="OctoPrint Wrapped sharepic"
+             width="400"
+             height="400" />
+    </div>
+
+</div>