Implement the poll feature

Closes #164

3 files changed, 122 insertions, 0 deletions

diff --git a/src/web/app/common/tags/index.js b/src/web/app/common/tags/index.js
index ef61d51ba4..692a7070a4 100644
--- a/src/web/app/common/tags/index.js
+++ b/src/web/app/common/tags/index.js
@@ -18,3 +18,5 @@ require('./signin-history.tag');
 require('./api-info.tag');
 require('./twitter-setting.tag');
 require('./authorized-apps.tag');
+require('./poll.tag');
+require('./poll-editor.tag');
diff --git a/src/web/app/common/tags/poll-editor.tag b/src/web/app/common/tags/poll-editor.tag
new file mode 100644
index 0000000000..04c712b611
--- /dev/null
+++ b/src/web/app/common/tags/poll-editor.tag
@@ -0,0 +1,47 @@
+<mk-poll-editor>
+	<ul>
+		<li each={ choice, i in choices }>
+			<input value={ choice } oninput={ oninput.bind(null, i) }>
+			<button onclick={ remove.bind(null, i) }>削除</button>
+		</li>
+	</ul>
+	<button onclick={ add }>選択肢を追加</button>
+	<style type="stylus">
+		:scope
+			display block
+
+			> ul
+				display block
+				margin 0
+				padding 0
+				list-style none
+
+				> li
+					display block
+					margin 4px
+					padding 8px 12px
+					width 100%
+
+	</style>
+	<script>
+		@choices = ['', '']
+
+		@oninput = (i, e) ~>
+			@choices[i] = e.target.value
+
+		@add = ~>
+			@choices.push ''
+			@update!
+
+		@remove = (i) ~>
+			console.log i
+			console.log @choices.filter((_, _i) -> _i != i)
+			@choices = @choices.filter((_, _i) -> _i != i)
+			@update!
+
+		@get = ~>
+			return {
+				choices: @choices.filter (choice) -> choice != ''
+			}
+	</script>
+</mk-poll-editor>
diff --git a/src/web/app/common/tags/poll.tag b/src/web/app/common/tags/poll.tag
new file mode 100644
index 0000000000..8c14b895eb
--- /dev/null
+++ b/src/web/app/common/tags/poll.tag
@@ -0,0 +1,73 @@
+<mk-poll>
+	<ul>
+		<li each={ poll.choices } onclick={ vote.bind(null, id) } class={ voted: voted }>
+			<div class="backdrop" if={ parent.result } style={ 'width:' + (votes / parent.total * 100) + '%' }></div>
+			<span>
+				<i class="fa fa-check" if={ is_voted }></i>
+				{ text }
+				<span class="votes" if={ parent.result }>({ votes }票)</span>
+			</span>
+		</li>
+	</ul>
+	<p>{ total }人が投票</p>
+	<style type="stylus">
+		:scope
+			display block
+
+			> ul
+				display block
+				margin 0
+				padding 0
+				list-style none
+
+				> li
+					display block
+					margin 4px
+					padding 4px 8px
+					width 100%
+					border-radius 4px
+					overflow hidden
+					cursor pointer
+
+					&:hover
+						background rgba(0, 0, 0, 0.05)
+
+					&:active
+						background rgba(0, 0, 0, 0.1)
+
+					> .backdrop
+						position absolute
+						top 0
+						left 0
+						height 100%
+						background $theme-color
+
+					> .votes
+						margin-left 4px
+
+	</style>
+	<script>
+		@mixin \api
+
+		@post = @opts.post
+		@poll = @post.poll
+		@total = @poll.choices.reduce ((a, b) -> a + b.votes), 0
+		@result = @poll.choices.some (c) -> c.is_voted
+
+		@vote = (id) ~>
+			if (@poll.choices.some (c) -> c.is_voted) then return
+			@api \posts/polls/vote do
+				post_id: @post.id
+				choice: id
+			.then ~>
+				@poll.choices.for-each (c) ->
+					if c.id == id
+						c.votes++
+						c.is_voted = true
+				@update do
+					poll: @poll
+					result: true
+					total: @total + 1
+
+	</script>
+</mk-poll>