2020-06-21 20:36:45 -04:00
|
|
|
import I18n from "I18n";
|
2018-06-15 12:42:20 -04:00
|
|
|
import { PIE_CHART_TYPE } from "discourse/plugins/poll/controllers/poll-ui-builder";
|
|
|
|
import RawHtml from "discourse/widgets/raw-html";
|
|
|
|
import { ajax } from "discourse/lib/ajax";
|
2020-08-06 11:57:06 -04:00
|
|
|
import { avatarFor } from "discourse/widgets/post";
|
|
|
|
import { createWidget } from "discourse/widgets/widget";
|
|
|
|
import evenRound from "discourse/plugins/poll/lib/even-round";
|
|
|
|
import { getColors } from "discourse/plugins/poll/lib/chart-colors";
|
|
|
|
import { h } from "virtual-dom";
|
|
|
|
import { iconNode } from "discourse-common/lib/icon-library";
|
2019-11-25 12:51:01 -05:00
|
|
|
import loadScript from "discourse/lib/load-script";
|
2018-06-15 12:42:20 -04:00
|
|
|
import { popupAjaxError } from "discourse/lib/ajax-error";
|
|
|
|
import { relativeAge } from "discourse/lib/formatter";
|
2020-08-06 11:57:06 -04:00
|
|
|
import round from "discourse/lib/round";
|
|
|
|
import showModal from "discourse/lib/show-modal";
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2021-06-18 11:56:54 -04:00
|
|
|
const FETCH_VOTERS_COUNT = 25;
|
|
|
|
|
2016-12-07 15:48:47 -05:00
|
|
|
function optionHtml(option) {
|
2019-04-29 04:01:19 -04:00
|
|
|
const $node = $(`<span>${option.html}</span>`);
|
|
|
|
|
|
|
|
$node.find(".discourse-local-date").each((_index, elem) => {
|
|
|
|
$(elem).applyLocalDates();
|
|
|
|
});
|
|
|
|
|
|
|
|
return new RawHtml({ html: `<span>${$node.html()}</span>` });
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
function infoTextHtml(text) {
|
|
|
|
return new RawHtml({
|
|
|
|
html: `<span class="info-text">${text}</span>`,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-02-18 05:13:19 -05:00
|
|
|
function checkUserGroups(user, poll) {
|
|
|
|
const pollGroups =
|
|
|
|
poll && poll.groups && poll.groups.split(",").map((g) => g.toLowerCase());
|
|
|
|
|
|
|
|
if (!pollGroups) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
const userGroups =
|
|
|
|
user && user.groups && user.groups.map((g) => g.name.toLowerCase());
|
|
|
|
|
|
|
|
return userGroups && pollGroups.some((g) => userGroups.includes(g));
|
|
|
|
}
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
createWidget("discourse-poll-option", {
|
|
|
|
tagName: "li",
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
buildAttributes(attrs) {
|
2021-05-26 13:45:10 -04:00
|
|
|
return { tabindex: 0, "data-poll-option-id": attrs.option.id };
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
html(attrs) {
|
2018-11-19 08:50:00 -05:00
|
|
|
const contents = [];
|
2016-12-07 15:48:47 -05:00
|
|
|
const { option, vote } = attrs;
|
2018-11-19 08:50:00 -05:00
|
|
|
const chosen = vote.includes(option.id);
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
if (attrs.isMultiple) {
|
2018-11-26 16:49:57 -05:00
|
|
|
contents.push(iconNode(chosen ? "far-check-square" : "far-square"));
|
2016-12-07 15:48:47 -05:00
|
|
|
} else {
|
2019-01-24 06:25:37 -05:00
|
|
|
contents.push(iconNode(chosen ? "circle" : "far-circle"));
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
2018-05-02 20:12:19 -04:00
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(" ");
|
|
|
|
contents.push(optionHtml(option));
|
|
|
|
|
|
|
|
return contents;
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
click(e) {
|
|
|
|
if ($(e.target).closest("a").length === 0) {
|
2018-06-15 12:42:20 -04:00
|
|
|
this.sendWidgetAction("toggleOption", this.attrs.option);
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
},
|
2021-05-26 13:45:10 -04:00
|
|
|
|
|
|
|
keyDown(e) {
|
2021-08-09 05:41:36 -04:00
|
|
|
if (e.key === "Enter") {
|
2021-05-26 13:45:10 -04:00
|
|
|
this.click(e);
|
|
|
|
}
|
|
|
|
},
|
2016-12-07 15:48:47 -05:00
|
|
|
});
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
createWidget("discourse-poll-load-more", {
|
|
|
|
tagName: "div.poll-voters-toggle-expand",
|
2018-11-19 08:50:00 -05:00
|
|
|
buildKey: (attrs) => `load-more-${attrs.optionId}`,
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
defaultState() {
|
|
|
|
return { loading: false };
|
|
|
|
},
|
|
|
|
|
|
|
|
html(attrs, state) {
|
2018-06-15 12:42:20 -04:00
|
|
|
return state.loading
|
|
|
|
? h("div.spinner.small")
|
|
|
|
: h("a", iconNode("chevron-down"));
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
click() {
|
2021-06-18 11:56:54 -04:00
|
|
|
const { state, attrs } = this;
|
2018-11-19 08:50:00 -05:00
|
|
|
|
2020-09-22 10:28:28 -04:00
|
|
|
if (state.loading) {
|
|
|
|
return;
|
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
state.loading = true;
|
2021-06-18 11:56:54 -04:00
|
|
|
return this.sendWidgetAction("fetchVoters", attrs.optionId).finally(
|
2018-11-19 10:29:15 -05:00
|
|
|
() => (state.loading = false)
|
2018-06-15 12:42:20 -04:00
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
createWidget("discourse-poll-voters", {
|
|
|
|
tagName: "ul.poll-voters-list",
|
2018-11-19 08:50:00 -05:00
|
|
|
buildKey: (attrs) => `poll-voters-${attrs.optionId}`,
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2021-06-18 11:56:54 -04:00
|
|
|
html(attrs) {
|
|
|
|
const contents = attrs.voters.map((user) =>
|
|
|
|
h("li", [
|
2018-06-15 12:42:20 -04:00
|
|
|
avatarFor("tiny", {
|
|
|
|
username: user.username,
|
|
|
|
template: user.avatar_template,
|
|
|
|
}),
|
|
|
|
" ",
|
2021-06-18 11:56:54 -04:00
|
|
|
])
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2021-06-18 11:56:54 -04:00
|
|
|
if (attrs.voters.length < attrs.totalVotes) {
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(this.attach("discourse-poll-load-more", attrs));
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
return h("div.poll-voters", contents);
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
createWidget("discourse-poll-standard-results", {
|
|
|
|
tagName: "ul.results",
|
2018-11-19 08:50:00 -05:00
|
|
|
buildKey: (attrs) => `poll-standard-results-${attrs.id}`,
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
html(attrs) {
|
2016-12-07 15:48:47 -05:00
|
|
|
const { poll } = attrs;
|
2021-07-07 06:06:08 -04:00
|
|
|
const options = poll.options;
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2017-01-16 10:41:41 -05:00
|
|
|
if (options) {
|
2021-07-07 06:06:08 -04:00
|
|
|
const voters = poll.voters;
|
|
|
|
const isPublic = poll.public;
|
2017-01-27 04:09:33 -05:00
|
|
|
|
2020-09-01 16:42:22 -04:00
|
|
|
const ordered = [...options].sort((a, b) => {
|
2016-12-21 22:45:41 -05:00
|
|
|
if (a.votes < b.votes) {
|
|
|
|
return 1;
|
2016-12-21 22:46:15 -05:00
|
|
|
} else if (a.votes === b.votes) {
|
2016-12-21 22:45:41 -05:00
|
|
|
if (a.html < b.html) {
|
|
|
|
return -1;
|
|
|
|
} else {
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return -1;
|
|
|
|
}
|
|
|
|
});
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
const percentages =
|
|
|
|
voters === 0
|
|
|
|
? Array(ordered.length).fill(0)
|
|
|
|
: ordered.map((o) => (100 * o.votes) / voters);
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
const rounded = attrs.isMultiple
|
|
|
|
? percentages.map(Math.floor)
|
|
|
|
: evenRound(percentages);
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
return ordered.map((option, idx) => {
|
|
|
|
const contents = [];
|
|
|
|
const per = rounded[idx].toString();
|
2017-02-02 23:09:30 -05:00
|
|
|
const chosen = (attrs.vote || []).includes(option.id);
|
2017-01-24 22:56:39 -05:00
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
contents.push(
|
|
|
|
h(
|
|
|
|
"div.option",
|
|
|
|
h("p", [h("span.percentage", `${per}%`), optionHtml(option)])
|
|
|
|
)
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
contents.push(
|
|
|
|
h(
|
|
|
|
"div.bar-back",
|
|
|
|
h("div.bar", { attributes: { style: `width:${per}%` } })
|
|
|
|
)
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2017-01-27 04:09:33 -05:00
|
|
|
if (isPublic) {
|
2018-06-15 12:42:20 -04:00
|
|
|
contents.push(
|
|
|
|
this.attach("discourse-poll-voters", {
|
|
|
|
postId: attrs.post.id,
|
|
|
|
optionId: option.id,
|
2021-07-07 06:06:08 -04:00
|
|
|
pollName: poll.name,
|
2018-06-15 12:42:20 -04:00
|
|
|
totalVotes: option.votes,
|
2021-07-07 06:06:08 -04:00
|
|
|
voters: (attrs.voters && attrs.voters[option.id]) || [],
|
2018-06-15 12:42:20 -04:00
|
|
|
})
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
return h("li", { className: `${chosen ? "chosen" : ""}` }, contents);
|
2016-12-07 15:48:47 -05:00
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
createWidget("discourse-poll-number-results", {
|
2018-11-19 08:50:00 -05:00
|
|
|
buildKey: (attrs) => `poll-number-results-${attrs.id}`,
|
2017-01-27 04:09:33 -05:00
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
html(attrs) {
|
2016-12-07 15:48:47 -05:00
|
|
|
const { poll } = attrs;
|
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
const totalScore = poll.options.reduce((total, o) => {
|
2016-12-07 15:48:47 -05:00
|
|
|
return total + parseInt(o.html, 10) * parseInt(o.votes, 10);
|
|
|
|
}, 0);
|
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
const voters = poll.voters;
|
2016-12-07 15:48:47 -05:00
|
|
|
const average = voters === 0 ? 0 : round(totalScore / voters, -2);
|
|
|
|
const averageRating = I18n.t("poll.average_rating", { average });
|
2018-11-19 08:50:00 -05:00
|
|
|
const contents = [
|
2018-06-15 12:42:20 -04:00
|
|
|
h(
|
|
|
|
"div.poll-results-number-rating",
|
|
|
|
new RawHtml({ html: `<span>${averageRating}</span>` })
|
|
|
|
),
|
|
|
|
];
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
if (poll.public) {
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(
|
2018-06-15 12:42:20 -04:00
|
|
|
this.attach("discourse-poll-voters", {
|
2021-07-07 06:06:08 -04:00
|
|
|
totalVotes: poll.voters,
|
|
|
|
voters: attrs.voters || [],
|
2018-06-15 12:42:20 -04:00
|
|
|
postId: attrs.post.id,
|
2021-07-07 06:06:08 -04:00
|
|
|
pollName: poll.name,
|
|
|
|
pollType: poll.type,
|
2018-06-15 12:42:20 -04:00
|
|
|
})
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
return contents;
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
createWidget("discourse-poll-container", {
|
|
|
|
tagName: "div.poll-container",
|
2021-07-07 06:06:08 -04:00
|
|
|
buildKey: (attrs) => `poll-container-${attrs.id}`,
|
2018-11-19 08:50:00 -05:00
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
defaultState() {
|
|
|
|
return { voters: [] };
|
|
|
|
},
|
|
|
|
|
|
|
|
html(attrs, state) {
|
2016-12-07 15:48:47 -05:00
|
|
|
const { poll } = attrs;
|
2021-07-07 06:06:08 -04:00
|
|
|
const options = poll.options;
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
if (attrs.showResults) {
|
2020-10-27 08:48:54 -04:00
|
|
|
const contents = [];
|
|
|
|
|
|
|
|
if (attrs.titleHTML) {
|
|
|
|
contents.push(new RawHtml({ html: attrs.titleHTML }));
|
|
|
|
}
|
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
if (poll.public) {
|
|
|
|
state.voters = poll.preloaded_voters;
|
|
|
|
}
|
|
|
|
|
|
|
|
const type = poll.type === "number" ? "number" : "standard";
|
2019-11-25 12:51:01 -05:00
|
|
|
const resultsWidget =
|
|
|
|
type === "number" || attrs.poll.chart_type !== PIE_CHART_TYPE
|
|
|
|
? `discourse-poll-${type}-results`
|
|
|
|
: "discourse-poll-pie-chart";
|
2021-07-07 06:06:08 -04:00
|
|
|
contents.push(
|
|
|
|
this.attach(
|
|
|
|
resultsWidget,
|
|
|
|
Object.assign({}, attrs, { voters: state.voters })
|
|
|
|
)
|
|
|
|
);
|
2020-10-27 08:48:54 -04:00
|
|
|
|
|
|
|
return contents;
|
2018-11-19 08:50:00 -05:00
|
|
|
} else if (options) {
|
2020-01-28 07:30:04 -05:00
|
|
|
const contents = [];
|
|
|
|
|
2020-10-06 13:27:03 -04:00
|
|
|
if (attrs.titleHTML) {
|
|
|
|
contents.push(new RawHtml({ html: attrs.titleHTML }));
|
|
|
|
}
|
2020-10-02 03:21:24 -04:00
|
|
|
|
2020-02-18 05:13:19 -05:00
|
|
|
if (!checkUserGroups(this.currentUser, poll)) {
|
2020-01-28 07:30:04 -05:00
|
|
|
contents.push(
|
|
|
|
h(
|
|
|
|
"div.alert.alert-danger",
|
|
|
|
I18n.t("poll.results.groups.title", { groups: poll.groups })
|
|
|
|
)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
contents.push(
|
|
|
|
h(
|
|
|
|
"ul",
|
|
|
|
options.map((option) => {
|
|
|
|
return this.attach("discourse-poll-option", {
|
|
|
|
option,
|
|
|
|
isMultiple: attrs.isMultiple,
|
|
|
|
vote: attrs.vote,
|
|
|
|
});
|
|
|
|
})
|
|
|
|
)
|
2018-06-15 12:42:20 -04:00
|
|
|
);
|
2020-01-28 07:30:04 -05:00
|
|
|
|
|
|
|
return contents;
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
},
|
2021-07-07 06:06:08 -04:00
|
|
|
|
|
|
|
fetchVoters(optionId) {
|
|
|
|
const { attrs, state } = this;
|
|
|
|
let votersCount;
|
|
|
|
|
|
|
|
if (optionId) {
|
|
|
|
if (!state.voters) {
|
|
|
|
state.voters = {};
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!state.voters[optionId]) {
|
|
|
|
state.voters[optionId] = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
votersCount = state.voters[optionId].length;
|
|
|
|
} else {
|
|
|
|
if (!state.voters) {
|
|
|
|
state.voters = [];
|
|
|
|
}
|
|
|
|
|
|
|
|
votersCount = state.voters.length;
|
|
|
|
}
|
|
|
|
|
|
|
|
return ajax("/polls/voters.json", {
|
|
|
|
data: {
|
|
|
|
post_id: attrs.post.id,
|
|
|
|
poll_name: attrs.poll.name,
|
|
|
|
option_id: optionId,
|
|
|
|
page: Math.floor(votersCount / FETCH_VOTERS_COUNT) + 1,
|
|
|
|
limit: FETCH_VOTERS_COUNT,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
.then((result) => {
|
|
|
|
const voters = optionId ? state.voters[optionId] : state.voters;
|
|
|
|
const newVoters = optionId ? result.voters[optionId] : result.voters;
|
|
|
|
|
|
|
|
const votersSet = new Set(voters.map((voter) => voter.username));
|
|
|
|
newVoters.forEach((voter) => {
|
|
|
|
if (!votersSet.has(voter.username)) {
|
|
|
|
votersSet.add(voter.username);
|
|
|
|
voters.push(voter);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// remove users who changed their vote
|
|
|
|
if (attrs.poll.type === "regular") {
|
|
|
|
Object.keys(state.voters).forEach((otherOptionId) => {
|
|
|
|
if (optionId !== otherOptionId) {
|
|
|
|
state.voters[otherOptionId] = state.voters[otherOptionId].filter(
|
|
|
|
(voter) => !votersSet.has(voter.username)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
this.scheduleRerender();
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
if (error) {
|
|
|
|
popupAjaxError(error);
|
|
|
|
} else {
|
|
|
|
bootbox.alert(I18n.t("poll.error_while_fetching_voters"));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
2016-12-07 15:48:47 -05:00
|
|
|
});
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
createWidget("discourse-poll-info", {
|
|
|
|
tagName: "div.poll-info",
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
multipleHelpText(min, max, options) {
|
|
|
|
if (max > 0) {
|
|
|
|
if (min === max) {
|
|
|
|
if (min > 1) {
|
|
|
|
return I18n.t("poll.multiple.help.x_options", { count: min });
|
|
|
|
}
|
|
|
|
} else if (min > 1) {
|
|
|
|
if (max < options) {
|
2018-06-15 12:42:20 -04:00
|
|
|
return I18n.t("poll.multiple.help.between_min_and_max_options", {
|
|
|
|
min,
|
|
|
|
max,
|
|
|
|
});
|
2016-12-07 15:48:47 -05:00
|
|
|
} else {
|
2018-06-15 12:42:20 -04:00
|
|
|
return I18n.t("poll.multiple.help.at_least_min_options", {
|
|
|
|
count: min,
|
|
|
|
});
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
} else if (max <= options) {
|
|
|
|
return I18n.t("poll.multiple.help.up_to_max_options", { count: max });
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
html(attrs) {
|
|
|
|
const { poll } = attrs;
|
2021-07-07 06:06:08 -04:00
|
|
|
const count = poll.voters;
|
2018-11-19 08:50:00 -05:00
|
|
|
const contents = [
|
2018-06-15 12:42:20 -04:00
|
|
|
h("p", [
|
|
|
|
h("span.info-number", count.toString()),
|
|
|
|
h("span.info-label", I18n.t("poll.voters", { count })),
|
|
|
|
]),
|
|
|
|
];
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
if (attrs.isMultiple) {
|
2018-05-02 20:12:19 -04:00
|
|
|
if (attrs.showResults || attrs.isClosed) {
|
2021-07-07 06:06:08 -04:00
|
|
|
const totalVotes = poll.options.reduce((total, o) => {
|
2016-12-07 15:48:47 -05:00
|
|
|
return total + parseInt(o.votes, 10);
|
|
|
|
}, 0);
|
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(
|
2018-06-15 12:42:20 -04:00
|
|
|
h("p", [
|
|
|
|
h("span.info-number", totalVotes.toString()),
|
|
|
|
h(
|
|
|
|
"span.info-label",
|
|
|
|
I18n.t("poll.total_votes", { count: totalVotes })
|
|
|
|
),
|
|
|
|
])
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
} else {
|
2018-06-15 12:42:20 -04:00
|
|
|
const help = this.multipleHelpText(
|
|
|
|
attrs.min,
|
|
|
|
attrs.max,
|
2021-07-07 06:06:08 -04:00
|
|
|
poll.options.length
|
2018-06-15 12:42:20 -04:00
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
if (help) {
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(infoTextHtml(help));
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-15 23:06:51 -04:00
|
|
|
if (
|
|
|
|
!attrs.isClosed &&
|
|
|
|
!attrs.showResults &&
|
|
|
|
poll.public &&
|
|
|
|
poll.results !== "staff_only"
|
|
|
|
) {
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(infoTextHtml(I18n.t("poll.public.title")));
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
return contents;
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2019-11-25 12:51:01 -05:00
|
|
|
function clearPieChart(id) {
|
|
|
|
let el = document.querySelector(`#poll-results-chart-${id}`);
|
|
|
|
el && el.parentNode.removeChild(el);
|
|
|
|
}
|
|
|
|
|
|
|
|
createWidget("discourse-poll-pie-canvas", {
|
|
|
|
tagName: "canvas.poll-results-canvas",
|
|
|
|
|
2019-11-26 18:10:43 -05:00
|
|
|
init(attrs) {
|
|
|
|
loadScript("/javascripts/Chart.min.js").then(() => {
|
|
|
|
const data = attrs.poll.options.mapBy("votes");
|
|
|
|
const labels = attrs.poll.options.mapBy("html");
|
2021-08-23 07:49:49 -04:00
|
|
|
const config = pieChartConfig(data, labels, {
|
|
|
|
legendContainerId: `poll-results-legend-${attrs.id}`,
|
|
|
|
});
|
2019-11-26 18:10:43 -05:00
|
|
|
|
|
|
|
const el = document.getElementById(`poll-results-chart-${attrs.id}`);
|
2021-08-23 08:21:58 -04:00
|
|
|
// eslint-disable-next-line no-undef
|
2021-08-23 07:49:49 -04:00
|
|
|
this._chart = new Chart(el.getContext("2d"), config);
|
2019-11-26 18:10:43 -05:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2021-08-23 07:49:49 -04:00
|
|
|
willRerenderWidget() {
|
|
|
|
this._chart?.destroy();
|
|
|
|
},
|
|
|
|
|
2019-11-25 12:51:01 -05:00
|
|
|
buildAttributes(attrs) {
|
|
|
|
return {
|
|
|
|
id: `poll-results-chart-${attrs.id}`,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
createWidget("discourse-poll-pie-chart", {
|
|
|
|
tagName: "div.poll-results-chart",
|
2020-10-27 08:48:54 -04:00
|
|
|
|
2019-11-25 12:51:01 -05:00
|
|
|
html(attrs) {
|
|
|
|
const contents = [];
|
|
|
|
|
|
|
|
if (!attrs.showResults) {
|
2019-11-26 18:10:43 -05:00
|
|
|
clearPieChart(attrs.id);
|
2019-11-25 12:51:01 -05:00
|
|
|
return contents;
|
|
|
|
}
|
|
|
|
|
2020-08-06 11:57:06 -04:00
|
|
|
const chart = this.attach("discourse-poll-pie-canvas", attrs);
|
2019-11-25 12:51:01 -05:00
|
|
|
contents.push(chart);
|
2020-08-06 11:57:06 -04:00
|
|
|
|
2021-08-23 07:49:49 -04:00
|
|
|
contents.push(h(`ul#poll-results-legend-${attrs.id}.pie-chart-legends`));
|
2020-08-06 11:57:06 -04:00
|
|
|
|
2019-11-25 12:51:01 -05:00
|
|
|
return contents;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2021-08-23 07:49:49 -04:00
|
|
|
const htmlLegendPlugin = {
|
|
|
|
id: "htmlLegend",
|
|
|
|
|
|
|
|
afterUpdate(chart, args, options) {
|
|
|
|
const ul = document.getElementById(options.containerID);
|
|
|
|
ul.innerHTML = "";
|
|
|
|
|
|
|
|
const items = chart.options.plugins.legend.labels.generateLabels(chart);
|
|
|
|
items.forEach((item) => {
|
|
|
|
const li = document.createElement("li");
|
|
|
|
li.classList.add("legend");
|
|
|
|
li.onclick = () => {
|
|
|
|
chart.toggleDataVisibility(item.index);
|
|
|
|
chart.update();
|
|
|
|
};
|
|
|
|
|
|
|
|
const boxSpan = document.createElement("span");
|
|
|
|
boxSpan.classList.add("swatch");
|
|
|
|
boxSpan.style.background = item.fillStyle;
|
|
|
|
|
|
|
|
const textContainer = document.createElement("span");
|
|
|
|
textContainer.style.color = item.fontColor;
|
|
|
|
textContainer.innerHTML = item.text;
|
|
|
|
|
|
|
|
if (!chart.getDataVisibility(item.index)) {
|
|
|
|
li.style.opacity = 0.2;
|
|
|
|
} else {
|
|
|
|
li.style.opacity = 1.0;
|
|
|
|
}
|
|
|
|
|
|
|
|
li.appendChild(boxSpan);
|
|
|
|
li.appendChild(textContainer);
|
|
|
|
|
|
|
|
ul.appendChild(li);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
2019-12-02 14:59:52 -05:00
|
|
|
function pieChartConfig(data, labels, opts = {}) {
|
2020-02-11 11:02:54 -05:00
|
|
|
const aspectRatio = "aspectRatio" in opts ? opts.aspectRatio : 2.2;
|
|
|
|
const strippedLabels = labels.map((l) => stripHtml(l));
|
2021-08-23 07:49:49 -04:00
|
|
|
|
2019-11-25 12:51:01 -05:00
|
|
|
return {
|
|
|
|
type: PIE_CHART_TYPE,
|
|
|
|
data: {
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
data,
|
|
|
|
backgroundColor: getColors(data.length),
|
|
|
|
},
|
|
|
|
],
|
2020-02-11 11:02:54 -05:00
|
|
|
labels: strippedLabels,
|
2019-11-25 12:51:01 -05:00
|
|
|
},
|
2021-08-23 07:49:49 -04:00
|
|
|
plugins: [htmlLegendPlugin],
|
2019-11-25 12:51:01 -05:00
|
|
|
options: {
|
|
|
|
responsive: true,
|
|
|
|
aspectRatio,
|
2020-02-12 10:09:40 -05:00
|
|
|
animation: { duration: 0 },
|
2021-08-23 07:49:49 -04:00
|
|
|
plugins: {
|
|
|
|
legend: {
|
|
|
|
labels: {
|
2021-08-23 08:21:58 -04:00
|
|
|
generateLabels: function () {
|
2021-08-23 07:49:49 -04:00
|
|
|
return labels.map((text, index) => {
|
|
|
|
return {
|
|
|
|
fillStyle: getColors(data.length)[index],
|
|
|
|
text,
|
|
|
|
index,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
display: false,
|
|
|
|
},
|
|
|
|
htmlLegend: {
|
|
|
|
containerID: opts?.legendContainerId,
|
|
|
|
},
|
2020-02-11 11:02:54 -05:00
|
|
|
},
|
2019-11-25 12:51:01 -05:00
|
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2020-02-11 11:02:54 -05:00
|
|
|
function stripHtml(html) {
|
2021-01-27 06:39:20 -05:00
|
|
|
let doc = new DOMParser().parseFromString(html, "text/html");
|
2020-02-11 11:02:54 -05:00
|
|
|
return doc.body.textContent || "";
|
|
|
|
}
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
createWidget("discourse-poll-buttons", {
|
|
|
|
tagName: "div.poll-buttons",
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
html(attrs) {
|
2018-11-19 08:50:00 -05:00
|
|
|
const contents = [];
|
2016-12-07 15:48:47 -05:00
|
|
|
const { poll, post } = attrs;
|
2018-06-15 12:42:20 -04:00
|
|
|
const topicArchived = post.get("topic.archived");
|
2018-05-02 20:12:19 -04:00
|
|
|
const closed = attrs.isClosed;
|
2019-08-15 14:27:18 -04:00
|
|
|
const staffOnly = poll.results === "staff_only";
|
|
|
|
const isStaff = this.currentUser && this.currentUser.staff;
|
2019-12-05 15:03:06 -05:00
|
|
|
const isAdmin = this.currentUser && this.currentUser.admin;
|
2020-03-20 14:29:00 -04:00
|
|
|
const isMe = this.currentUser && post.user_id === this.currentUser.id;
|
2019-11-22 14:06:39 -05:00
|
|
|
const dataExplorerEnabled = this.siteSettings.data_explorer_enabled;
|
2019-08-15 14:27:18 -04:00
|
|
|
const hideResultsDisabled = !staffOnly && (closed || topicArchived);
|
2019-11-22 14:06:39 -05:00
|
|
|
const exportQueryID = this.siteSettings.poll_export_data_explorer_query_id;
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
if (attrs.isMultiple && !hideResultsDisabled) {
|
|
|
|
const castVotesDisabled = !attrs.canCastVotes;
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(
|
2018-06-15 12:42:20 -04:00
|
|
|
this.attach("button", {
|
2019-11-25 12:51:01 -05:00
|
|
|
className: `cast-votes ${
|
2019-03-06 20:27:40 -05:00
|
|
|
castVotesDisabled ? "btn-default" : "btn-primary"
|
|
|
|
}`,
|
2018-06-15 12:42:20 -04:00
|
|
|
label: "poll.cast-votes.label",
|
|
|
|
title: "poll.cast-votes.title",
|
|
|
|
disabled: castVotesDisabled,
|
|
|
|
action: "castVotes",
|
|
|
|
})
|
|
|
|
);
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(" ");
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
|
2018-05-02 20:12:19 -04:00
|
|
|
if (attrs.showResults || hideResultsDisabled) {
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(
|
2018-06-15 12:42:20 -04:00
|
|
|
this.attach("button", {
|
2019-11-25 12:51:01 -05:00
|
|
|
className: "btn-default toggle-results",
|
2018-06-15 12:42:20 -04:00
|
|
|
label: "poll.hide-results.label",
|
|
|
|
title: "poll.hide-results.title",
|
2019-01-22 06:02:02 -05:00
|
|
|
icon: "far-eye-slash",
|
2018-06-15 12:42:20 -04:00
|
|
|
disabled: hideResultsDisabled,
|
|
|
|
action: "toggleResults",
|
|
|
|
})
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
} else {
|
2021-10-05 04:38:49 -04:00
|
|
|
let showResultsButton;
|
|
|
|
let infoText;
|
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
if (poll.results === "on_vote" && !attrs.hasVoted && !isMe) {
|
2021-10-05 04:38:49 -04:00
|
|
|
infoText = infoTextHtml(I18n.t("poll.results.vote.title"));
|
2021-07-07 06:06:08 -04:00
|
|
|
} else if (poll.results === "on_close" && !closed) {
|
2021-10-05 04:38:49 -04:00
|
|
|
infoText = infoTextHtml(I18n.t("poll.results.closed.title"));
|
2019-08-15 14:27:18 -04:00
|
|
|
} else if (poll.results === "staff_only" && !isStaff) {
|
2021-10-05 04:38:49 -04:00
|
|
|
infoText = infoTextHtml(I18n.t("poll.results.staff.title"));
|
2018-11-19 08:50:00 -05:00
|
|
|
} else {
|
2021-10-05 04:38:49 -04:00
|
|
|
showResultsButton = this.attach("button", {
|
|
|
|
className: "btn-default toggle-results",
|
|
|
|
label: "poll.show-results.label",
|
|
|
|
title: "poll.show-results.title",
|
|
|
|
icon: "far-eye",
|
2021-10-06 10:51:46 -04:00
|
|
|
disabled: poll.voters === 0,
|
2021-10-05 04:38:49 -04:00
|
|
|
action: "toggleResults",
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if (showResultsButton) {
|
|
|
|
contents.push(showResultsButton);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (attrs.hasSavedVote) {
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(
|
|
|
|
this.attach("button", {
|
2021-10-05 04:38:49 -04:00
|
|
|
className: "btn-default remove-vote",
|
|
|
|
label: "poll.remove-vote.label",
|
|
|
|
title: "poll.remove-vote.title",
|
|
|
|
icon: "trash-alt",
|
|
|
|
action: "removeVote",
|
2018-11-19 08:50:00 -05:00
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
2021-10-05 04:38:49 -04:00
|
|
|
|
|
|
|
if (infoText) {
|
|
|
|
contents.push(infoText);
|
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
2018-05-11 20:14:58 -04:00
|
|
|
|
2020-10-27 08:48:54 -04:00
|
|
|
if (attrs.groupableUserFields.length && poll.voters > 0) {
|
|
|
|
const button = this.attach("button", {
|
|
|
|
className: "btn-default poll-show-breakdown",
|
|
|
|
label: "poll.group-results.label",
|
|
|
|
title: "poll.group-results.title",
|
|
|
|
icon: "far-eye",
|
|
|
|
action: "showBreakdown",
|
|
|
|
});
|
|
|
|
|
|
|
|
contents.push(button);
|
|
|
|
}
|
|
|
|
|
2019-12-05 15:03:06 -05:00
|
|
|
if (isAdmin && dataExplorerEnabled && poll.voters > 0 && exportQueryID) {
|
2019-11-22 14:06:39 -05:00
|
|
|
contents.push(
|
|
|
|
this.attach("button", {
|
|
|
|
className: "btn btn-default export-results",
|
|
|
|
label: "poll.export-results.label",
|
|
|
|
title: "poll.export-results.title",
|
|
|
|
icon: "download",
|
|
|
|
disabled: poll.voters === 0,
|
|
|
|
action: "exportResults",
|
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
if (poll.close) {
|
|
|
|
const closeDate = moment(poll.close);
|
2018-11-19 08:50:00 -05:00
|
|
|
if (closeDate.isValid()) {
|
|
|
|
const title = closeDate.format("LLL");
|
|
|
|
let label;
|
|
|
|
|
|
|
|
if (attrs.isAutomaticallyClosed) {
|
|
|
|
const age = relativeAge(closeDate.toDate(), { addAgo: true });
|
|
|
|
label = I18n.t("poll.automatic_close.age", { age });
|
|
|
|
} else {
|
2020-05-06 16:18:47 -04:00
|
|
|
const timeLeft = moment().to(closeDate, true);
|
2018-11-19 08:50:00 -05:00
|
|
|
label = I18n.t("poll.automatic_close.closes_in", { timeLeft });
|
|
|
|
}
|
|
|
|
|
|
|
|
contents.push(
|
|
|
|
new RawHtml({
|
|
|
|
html: `<span class="info-text" title="${title}">${label}</span>`,
|
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
2018-05-11 20:14:58 -04:00
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
if (
|
|
|
|
this.currentUser &&
|
2021-07-07 06:06:08 -04:00
|
|
|
(this.currentUser.id === post.user_id || isStaff) &&
|
2018-06-15 12:42:20 -04:00
|
|
|
!topicArchived
|
|
|
|
) {
|
2018-05-02 20:12:19 -04:00
|
|
|
if (closed) {
|
|
|
|
if (!attrs.isAutomaticallyClosed) {
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(
|
2018-06-15 12:42:20 -04:00
|
|
|
this.attach("button", {
|
2019-11-25 12:51:01 -05:00
|
|
|
className: "btn-default toggle-status",
|
2018-06-15 12:42:20 -04:00
|
|
|
label: "poll.open.label",
|
|
|
|
title: "poll.open.title",
|
|
|
|
icon: "unlock-alt",
|
|
|
|
action: "toggleStatus",
|
|
|
|
})
|
|
|
|
);
|
2018-05-02 20:12:19 -04:00
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
} else {
|
2018-11-19 08:50:00 -05:00
|
|
|
contents.push(
|
2018-06-15 12:42:20 -04:00
|
|
|
this.attach("button", {
|
2019-11-25 12:51:01 -05:00
|
|
|
className: "toggle-status btn-danger",
|
2018-06-15 12:42:20 -04:00
|
|
|
label: "poll.close.label",
|
|
|
|
title: "poll.close.title",
|
|
|
|
icon: "lock",
|
|
|
|
action: "toggleStatus",
|
|
|
|
})
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
return contents;
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
export default createWidget("discourse-poll", {
|
2019-11-25 12:51:01 -05:00
|
|
|
tagName: "div",
|
2018-11-19 08:50:00 -05:00
|
|
|
buildKey: (attrs) => `poll-${attrs.id}`,
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
buildAttributes(attrs) {
|
2019-11-25 12:51:01 -05:00
|
|
|
let cssClasses = "poll";
|
2020-09-22 10:28:28 -04:00
|
|
|
if (attrs.poll.chart_type === PIE_CHART_TYPE) {
|
|
|
|
cssClasses += " pie";
|
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
return {
|
2019-11-25 12:51:01 -05:00
|
|
|
class: cssClasses,
|
2021-07-07 06:06:08 -04:00
|
|
|
"data-poll-name": attrs.poll.name,
|
|
|
|
"data-poll-type": attrs.poll.type,
|
2016-12-07 15:48:47 -05:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
defaultState(attrs) {
|
2021-07-07 06:06:08 -04:00
|
|
|
const { poll } = attrs;
|
2019-08-15 14:27:18 -04:00
|
|
|
const staffOnly = attrs.poll.results === "staff_only";
|
2018-11-19 08:50:00 -05:00
|
|
|
|
2018-11-19 10:29:15 -05:00
|
|
|
const showResults =
|
2021-07-07 06:06:08 -04:00
|
|
|
poll.results !== "on_close" && this.hasVoted() && !staffOnly;
|
2018-11-19 08:50:00 -05:00
|
|
|
|
2018-05-02 20:12:19 -04:00
|
|
|
return { loading: false, showResults };
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
html(attrs, state) {
|
2019-08-15 14:27:18 -04:00
|
|
|
const staffOnly = attrs.poll.results === "staff_only";
|
2018-11-19 10:29:15 -05:00
|
|
|
const showResults =
|
2019-08-15 23:06:51 -04:00
|
|
|
state.showResults ||
|
|
|
|
(attrs.post.get("topic.archived") && !staffOnly) ||
|
|
|
|
(this.isClosed() && !staffOnly);
|
2018-11-19 08:50:00 -05:00
|
|
|
|
2016-12-07 15:48:47 -05:00
|
|
|
const newAttrs = jQuery.extend({}, attrs, {
|
|
|
|
canCastVotes: this.canCastVotes(),
|
2018-11-19 08:50:00 -05:00
|
|
|
hasVoted: this.hasVoted(),
|
2018-05-02 20:12:19 -04:00
|
|
|
isAutomaticallyClosed: this.isAutomaticallyClosed(),
|
2018-11-19 08:50:00 -05:00
|
|
|
isClosed: this.isClosed(),
|
|
|
|
isMultiple: this.isMultiple(),
|
|
|
|
max: this.max(),
|
2016-12-07 15:48:47 -05:00
|
|
|
min: this.min(),
|
2018-11-19 10:29:15 -05:00
|
|
|
showResults,
|
2016-12-07 15:48:47 -05:00
|
|
|
});
|
2018-05-02 20:12:19 -04:00
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
return h("div", [
|
|
|
|
this.attach("discourse-poll-container", newAttrs),
|
|
|
|
this.attach("discourse-poll-info", newAttrs),
|
|
|
|
this.attach("discourse-poll-buttons", newAttrs),
|
2016-12-07 15:48:47 -05:00
|
|
|
]);
|
|
|
|
},
|
|
|
|
|
|
|
|
min() {
|
2021-07-07 06:06:08 -04:00
|
|
|
let min = parseInt(this.attrs.poll.min, 10);
|
2018-12-31 04:48:30 -05:00
|
|
|
if (isNaN(min) || min < 0) {
|
|
|
|
min = 0;
|
2018-06-15 12:42:20 -04:00
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
return min;
|
|
|
|
},
|
|
|
|
|
|
|
|
max() {
|
2021-07-07 06:06:08 -04:00
|
|
|
let max = parseInt(this.attrs.poll.max, 10);
|
|
|
|
const numOptions = this.attrs.poll.options.length;
|
2018-06-15 12:42:20 -04:00
|
|
|
if (isNaN(max) || max > numOptions) {
|
|
|
|
max = numOptions;
|
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
return max;
|
|
|
|
},
|
|
|
|
|
2018-05-02 20:12:19 -04:00
|
|
|
isAutomaticallyClosed() {
|
|
|
|
const { poll } = this.attrs;
|
2021-07-07 06:06:08 -04:00
|
|
|
return poll.close && moment.utc(poll.close) <= moment();
|
2018-05-02 20:12:19 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
isClosed() {
|
|
|
|
const { poll } = this.attrs;
|
2021-07-07 06:06:08 -04:00
|
|
|
return poll.status === "closed" || this.isAutomaticallyClosed();
|
2018-05-02 20:12:19 -04:00
|
|
|
},
|
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
isMultiple() {
|
|
|
|
const { poll } = this.attrs;
|
2021-07-07 06:06:08 -04:00
|
|
|
return poll.type === "multiple";
|
2018-11-19 08:50:00 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
hasVoted() {
|
|
|
|
const { vote } = this.attrs;
|
|
|
|
return vote && vote.length > 0;
|
|
|
|
},
|
|
|
|
|
2016-12-07 15:48:47 -05:00
|
|
|
canCastVotes() {
|
|
|
|
const { state, attrs } = this;
|
2018-05-02 20:12:19 -04:00
|
|
|
|
2016-12-07 15:48:47 -05:00
|
|
|
if (this.isClosed() || state.showResults || state.loading) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
const selectedOptionCount = attrs.vote.length;
|
2018-05-02 20:12:19 -04:00
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
if (this.isMultiple()) {
|
2018-06-15 12:42:20 -04:00
|
|
|
return (
|
|
|
|
selectedOptionCount >= this.min() && selectedOptionCount <= this.max()
|
|
|
|
);
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
2018-05-02 20:12:19 -04:00
|
|
|
|
2016-12-07 15:48:47 -05:00
|
|
|
return selectedOptionCount > 0;
|
|
|
|
},
|
|
|
|
|
|
|
|
toggleStatus() {
|
|
|
|
const { state, attrs } = this;
|
2018-05-02 20:12:19 -04:00
|
|
|
const { post, poll } = attrs;
|
|
|
|
|
2018-06-15 12:42:20 -04:00
|
|
|
if (this.isAutomaticallyClosed()) {
|
|
|
|
return;
|
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
bootbox.confirm(
|
2018-05-02 20:12:19 -04:00
|
|
|
I18n.t(this.isClosed() ? "poll.open.confirm" : "poll.close.confirm"),
|
2016-12-07 15:48:47 -05:00
|
|
|
I18n.t("no_value"),
|
|
|
|
I18n.t("yes_value"),
|
|
|
|
(confirmed) => {
|
|
|
|
if (confirmed) {
|
|
|
|
state.loading = true;
|
2018-05-02 20:12:19 -04:00
|
|
|
const status = this.isClosed() ? "open" : "closed";
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
ajax("/polls/toggle_status", {
|
|
|
|
type: "PUT",
|
|
|
|
data: {
|
2021-07-07 06:06:08 -04:00
|
|
|
post_id: post.id,
|
|
|
|
poll_name: poll.name,
|
2018-06-15 12:42:20 -04:00
|
|
|
status,
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
2018-11-19 10:29:15 -05:00
|
|
|
})
|
|
|
|
.then(() => {
|
|
|
|
poll.set("status", status);
|
2021-07-07 06:06:08 -04:00
|
|
|
if (poll.results === "on_close") {
|
2018-11-19 10:29:15 -05:00
|
|
|
state.showResults = status === "closed";
|
|
|
|
}
|
|
|
|
this.scheduleRerender();
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
if (error) {
|
|
|
|
popupAjaxError(error);
|
|
|
|
} else {
|
|
|
|
bootbox.alert(I18n.t("poll.error_while_toggling_status"));
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
state.loading = false;
|
|
|
|
});
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
|
|
|
toggleResults() {
|
|
|
|
this.state.showResults = !this.state.showResults;
|
|
|
|
},
|
|
|
|
|
2021-10-05 04:38:49 -04:00
|
|
|
removeVote() {
|
|
|
|
const { attrs, state } = this;
|
|
|
|
state.loading = true;
|
|
|
|
return ajax("/polls/vote", {
|
|
|
|
type: "DELETE",
|
|
|
|
data: {
|
|
|
|
post_id: attrs.post.id,
|
|
|
|
poll_name: attrs.poll.name,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
.then(({ poll }) => {
|
|
|
|
attrs.poll.setProperties(poll);
|
|
|
|
attrs.vote.length = 0;
|
|
|
|
attrs.hasSavedVote = false;
|
|
|
|
this.appEvents.trigger("poll:voted", poll, attrs.post, attrs.vote);
|
|
|
|
})
|
|
|
|
.catch((error) => popupAjaxError(error))
|
|
|
|
.finally(() => {
|
|
|
|
state.loading = false;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2019-11-22 14:06:39 -05:00
|
|
|
exportResults() {
|
|
|
|
const { attrs } = this;
|
|
|
|
const queryID = this.siteSettings.poll_export_data_explorer_query_id;
|
|
|
|
|
|
|
|
// This uses the Data Explorer plugin export as CSV route
|
|
|
|
// There is detection to check if the plugin is enabled before showing the button
|
|
|
|
ajax(`/admin/plugins/explorer/queries/${queryID}/run.csv`, {
|
|
|
|
type: "POST",
|
|
|
|
data: {
|
|
|
|
// needed for data-explorer route compatibility
|
|
|
|
params: JSON.stringify({
|
|
|
|
poll_name: attrs.poll.name,
|
|
|
|
post_id: attrs.post.id.toString(), // needed for data-explorer route compatibility
|
|
|
|
}),
|
|
|
|
explain: false,
|
|
|
|
limit: 1000000,
|
|
|
|
download: 1,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
.then((csvContent) => {
|
|
|
|
const downloadLink = document.createElement("a");
|
|
|
|
const blob = new Blob([csvContent], {
|
|
|
|
type: "text/csv;charset=utf-8;",
|
|
|
|
});
|
|
|
|
downloadLink.href = URL.createObjectURL(blob);
|
|
|
|
downloadLink.setAttribute(
|
|
|
|
"download",
|
|
|
|
`poll-export-${attrs.poll.name}-${attrs.post.id}.csv`
|
|
|
|
);
|
|
|
|
downloadLink.click();
|
|
|
|
downloadLink.remove();
|
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
if (error) {
|
|
|
|
popupAjaxError(error);
|
|
|
|
} else {
|
|
|
|
bootbox.alert(I18n.t("poll.error_while_exporting_results"));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2016-12-07 15:48:47 -05:00
|
|
|
showLogin() {
|
2018-06-15 12:42:20 -04:00
|
|
|
this.register.lookup("route:application").send("showLogin");
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
|
2020-01-28 07:30:04 -05:00
|
|
|
_toggleOption(option) {
|
|
|
|
const { vote } = this.attrs;
|
|
|
|
const chosenIdx = vote.indexOf(option.id);
|
|
|
|
if (chosenIdx !== -1) {
|
|
|
|
vote.splice(chosenIdx, 1);
|
|
|
|
} else {
|
|
|
|
vote.push(option.id);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2016-12-07 15:48:47 -05:00
|
|
|
toggleOption(option) {
|
2018-05-02 20:12:19 -04:00
|
|
|
const { attrs } = this;
|
|
|
|
|
2020-09-22 10:28:28 -04:00
|
|
|
if (this.isClosed()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (!this.currentUser) {
|
|
|
|
return this.showLogin();
|
|
|
|
}
|
|
|
|
if (!checkUserGroups(this.currentUser, this.attrs.poll)) {
|
|
|
|
return;
|
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
const { vote } = attrs;
|
2021-10-05 04:38:49 -04:00
|
|
|
if (!this.isMultiple() && vote.length === 1 && vote[0] === option.id) {
|
|
|
|
return this.removeVote();
|
|
|
|
}
|
|
|
|
|
2018-11-19 08:50:00 -05:00
|
|
|
if (!this.isMultiple()) {
|
2016-12-07 15:48:47 -05:00
|
|
|
vote.length = 0;
|
|
|
|
}
|
|
|
|
|
2020-01-28 07:30:04 -05:00
|
|
|
this._toggleOption(option);
|
2018-11-19 08:50:00 -05:00
|
|
|
if (!this.isMultiple()) {
|
2020-01-28 07:30:04 -05:00
|
|
|
return this.castVotes().catch(() => this._toggleOption(option));
|
2016-12-07 15:48:47 -05:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
castVotes() {
|
2020-09-22 10:28:28 -04:00
|
|
|
if (!this.canCastVotes()) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (!this.currentUser) {
|
|
|
|
return this.showLogin();
|
|
|
|
}
|
2016-12-07 15:48:47 -05:00
|
|
|
|
|
|
|
const { attrs, state } = this;
|
|
|
|
|
|
|
|
state.loading = true;
|
|
|
|
|
|
|
|
return ajax("/polls/vote", {
|
|
|
|
type: "PUT",
|
|
|
|
data: {
|
|
|
|
post_id: attrs.post.id,
|
2021-07-07 06:06:08 -04:00
|
|
|
poll_name: attrs.poll.name,
|
2016-12-07 15:48:47 -05:00
|
|
|
options: attrs.vote,
|
|
|
|
},
|
2018-11-19 10:29:15 -05:00
|
|
|
})
|
|
|
|
.then(({ poll }) => {
|
2021-10-05 04:38:49 -04:00
|
|
|
attrs.hasSavedVote = true;
|
2018-11-19 10:29:15 -05:00
|
|
|
attrs.poll.setProperties(poll);
|
2021-02-12 13:06:27 -05:00
|
|
|
this.appEvents.trigger("poll:voted", poll, attrs.post, attrs.vote);
|
|
|
|
|
2021-07-07 06:06:08 -04:00
|
|
|
if (attrs.poll.results !== "on_close") {
|
2018-11-19 10:29:15 -05:00
|
|
|
state.showResults = true;
|
|
|
|
}
|
2019-08-15 14:27:18 -04:00
|
|
|
if (attrs.poll.results === "staff_only") {
|
2021-07-07 06:06:08 -04:00
|
|
|
if (this.currentUser && this.currentUser.staff) {
|
2019-08-15 14:27:18 -04:00
|
|
|
state.showResults = true;
|
|
|
|
} else {
|
|
|
|
state.showResults = false;
|
|
|
|
}
|
|
|
|
}
|
2018-11-19 10:29:15 -05:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
if (error) {
|
|
|
|
popupAjaxError(error);
|
|
|
|
} else {
|
|
|
|
bootbox.alert(I18n.t("poll.error_while_casting_votes"));
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
state.loading = false;
|
|
|
|
});
|
2019-11-25 12:51:01 -05:00
|
|
|
},
|
|
|
|
|
2020-08-06 11:57:06 -04:00
|
|
|
showBreakdown() {
|
|
|
|
showModal("poll-breakdown", {
|
|
|
|
model: this.attrs,
|
|
|
|
panels: [
|
|
|
|
{ id: "percentage", title: "poll.breakdown.percentage" },
|
|
|
|
{ id: "count", title: "poll.breakdown.count" },
|
|
|
|
],
|
|
|
|
});
|
2016-12-07 15:48:47 -05:00
|
|
|
},
|
|
|
|
});
|