- implement poll detail view

js/src/forum/components/Poll.tsx

@@ -2,27 +2,26 @@ import * as Mithril from 'mithril';
 import Component from 'flarum/common/Component';
 
 import PollTitle from './Poll/PollTitle';
-import PollDescription from './Poll/PollDescription';
 import PollOptions from './Poll/PollOptions';
 import PollSubmitButton from './Poll/PollSubmitButton';
 import PollImage from './Poll/PollImage';
 
 export default class IndexPolls extends Component {
   view(): Mithril.Children {
+      /* @type Poll */
+      const poll = this.attrs.poll;
+
     return (
       <div className="Poll">
         <div className="Poll-image">
-          <PollImage />
+          <PollImage image={poll.image} />
         </div>
         <div className="Poll-wrapper">
-          <PollTitle text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy?" />
-          <PollDescription text="At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet!" />
-
+          <PollTitle text={poll.question()} />
           <form>
             <fieldset>
-              <legend className="sr-only">Privacy setting</legend>
-
-              <PollOptions />
+              <legend className="sr-only">Antworten</legend>
+              <PollOptions options={poll.options()} />
               <PollSubmitButton />
             </fieldset>
           </form>

js/src/forum/components/Poll/PollOption.tsx

@@ -1,19 +1,18 @@
 import * as Mithril from 'mithril';
 import Component from 'flarum/common/Component';
 import PollOptionLabel from './PollOptionLabel';
-import PollOptionDescription from './PollOptionDescription';
 import PollOptionInput from './PollOptionInput';
 
 export default class PollOption extends Component {
-  view(): Mithril.Children {
-    return (
-      <label className="PollOption-tmp">
-        <PollOptionInput id={1} isResult={false} name="privacy-setting" value="Private to Project Members Nice" />
-        <span className="PollOption-information">
-          <PollOptionLabel text="Poll Option Label" />
-          <PollOptionDescription text="Poll Option Description" />
-        </span>
-      </label>
-    );
-  }
+    view(): Mithril.Children {
+        const option = this.attrs.option;
+        return (
+            <label className="PollOption-tmp">
+                <PollOptionInput id={option.id()} isResult={false} name="vote" value="Vote for this option"/>
+                <span className="PollOption-information">
+                  <PollOptionLabel id={option.id()} text={option.answer()}/>
+                </span>
+            </label>
+        );
+    }
 }

js/src/forum/components/Poll/PollOptionLabel.tsx

@@ -3,12 +3,14 @@ import Component, { ComponentAttrs } from 'flarum/common/Component';
 
 interface PollOptionLabelAttrs extends ComponentAttrs {
   text: String;
+    id: Number;
 }
 
 export default class PollOptionLabel extends Component<PollOptionLabelAttrs> {
   view(): Mithril.Children {
+
     return (
-      <span id="privacy-setting-1-label" className="PollOption-label">
+      <span id={`vote_${this.attrs.id}_label`} className="PollOption-label">
         {this.attrs.text}
       </span>
     );

js/src/forum/components/Poll/PollOptions.tsx

@@ -1,8 +1,8 @@
-import * as Mithril from 'mithril';
+import Mithril from 'mithril';
 import Component from 'flarum/common/Component';
 import PollOption from './PollOption';
+import PollOptionModel from '../../models/PollOption';
 import PollResult from './PollResult';
-import listItems from 'flarum/common/helpers/listItems';
 import ItemList from 'flarum/common/utils/ItemList';
 
 export default class PollOptions extends Component {
@@ -12,11 +12,9 @@ export default class PollOptions extends Component {
 
   pollOptions(): ItemList<Mithril.Children> {
     const items = new ItemList<Mithril.Children>();
-
-    items.add('test1', <PollOption />);
-    items.add('test2', <PollOption />);
-    items.add('test3', <PollOption />);
-    items.add('test4', <PollOption />);
+    this.attrs.options.forEach((option:PollOptionModel):void => {
+        items.add('option' + option.id(), <PollOption option={option} />);
+    });
 
     items.add('test5', <PollResult />);
 

js/src/forum/components/PollsPage.tsx

@@ -11,11 +11,38 @@ import PollListState from '../states/PollListState';
 import Button from 'flarum/common/components/Button';
 import SelectDropdown from 'flarum/common/components/SelectDropdown';
 import Acl from "../../common/Acl";
+import LoadingIndicator from "flarum/common/components/LoadingIndicator";
+import Poll from "../models/Poll";
+import IndexPolls from "./Poll";
 
 export default class PollsPage extends Page<IPageAttrs, PollListState> {
+  loading: boolean = false;
+  poll: Poll | null = null;
+
   oninit(vnode: Mithril.Vnode) {
     super.oninit(vnode);
 
+    const editId = m.route.param('id');
+    if (editId) {
+      this.poll = app.store.getById('poll', editId);
+
+      if (!this.poll) {
+        this.loading = true;
+
+        app.store.find('fof/polls', editId).then((item) => {
+          this.poll = item;
+          this.loading = false;
+          app.setTitle(extractText(app.translator.trans('fof-polls.forum.page.poll_detail')));
+          m.redraw();
+        });
+      }
+    }
+    else {
+      this.initListView();
+    }
+  }
+
+  initListView() {
     this.state = new PollListState({
       sort: m.route.param('sort'),
       filter: m.route.param('filter'),
@@ -31,6 +58,19 @@ export default class PollsPage extends Page<IPageAttrs, PollListState> {
   }
 
   view(): Mithril.Children {
+    if (this.loading) {
+      return <LoadingIndicator />;
+    }
+
+    if(this.poll) {
+        return (
+            <div className='PollsPage'>
+                <div className='container'>
+                    <IndexPolls poll={this.poll} />
+                </div>
+            </div>
+        );
+    }
 
     return (
       <div className="PollsPage">
@@ -43,7 +83,7 @@ export default class PollsPage extends Page<IPageAttrs, PollListState> {
             <div className="PollsPage-results sideNavOffset">
               <div className="IndexPage-toolbar">
                 <ul className="IndexPage-toolbar-view">{listItems(this.viewItems().toArray())}</ul>
-                {/* <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul> */}
+                <ul className="IndexPage-toolbar-action">{listItems(this.actionItems().toArray())}</ul>
               </div>
               <PollList state={this.state} />
             </div>
@@ -86,9 +126,23 @@ export default class PollsPage extends Page<IPageAttrs, PollListState> {
     return items;
   }
 
-  // actionItems() {
-  //   return IndexPage.prototype.actionItems();
-  // }
+  actionItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'refresh',
+      Button.component({
+        title: app.translator.trans('fof-polls.forum.page.refresh_tooltip'),
+        icon: 'fas fa-sync',
+        className: 'Button Button--icon',
+        onclick: () => {
+          this.state.refresh();
+        },
+      })
+    );
+
+    return items;
+  }
 
   viewItems() {
     return IndexPage.prototype.viewItems();