184 lines
8.6 KiB
Smarty
184 lines
8.6 KiB
Smarty
{extends file='page.tpl'}
|
|
|
|
{block name="header"}
|
|
<script src="{'js/vue.min.js'|resource}"></script>
|
|
<script src="{'js/moment-with-locales.min.js'|resource}"></script>
|
|
{/block}
|
|
|
|
{block name=main}
|
|
<script type="text/x-template" id="poll-finder-component">
|
|
<div>
|
|
<h3>
|
|
{__('FindPolls', 'Polls saved inside this browser')}
|
|
<a href="#" data-toggle="modal" data-target="#localstorage_help_modal"><i class="glyphicon glyphicon-info-sign"></i></a><!-- TODO Add accessibility -->
|
|
</h3>
|
|
<div class="row" v-if="polls.length > 0 || adminPolls.length > 0">
|
|
<div class="pull-right">
|
|
<button @click="removeAllPolls" class="btn btn-sm btn-danger">{__('FindPolls', 'Remove all polls from this browser')}</button>
|
|
</div>
|
|
</div>
|
|
<div v-if="polls.length > 0">
|
|
<h4>{__('FindPolls', 'Visited polls')}</h4>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-condensed">
|
|
<thead>
|
|
<tr>
|
|
<td>{__('FindPolls', 'Title')}</td>
|
|
<td>{__('FindPolls', 'Address')}</td>
|
|
<td>{__('FindPolls', 'Last access date')}</td>
|
|
<td>{__('FindPolls', 'Remove poll from index')}</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="poll in polls">
|
|
<td>%% poll.title %%</td>
|
|
<td><a :href="poll.url">%% poll.url %%</a></td>
|
|
<td>%% poll.accessed | date %%</td>
|
|
<td><button class="btn btn-sm btn-danger" @click="removePoll(poll.url)"><i class="glyphicon glyphicon-trash"></i><span class="sr-only">{__('Generic', 'Remove')}</span></button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div v-if="adminPolls.length > 0">
|
|
<h4>{__('FindPolls', 'Created polls')}</h4>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-condensed">
|
|
<thead>
|
|
<tr>
|
|
<td>{__('FindPolls', 'Title')}</td>
|
|
<td>{__('FindPolls', 'Address')}</td>
|
|
<td>{__('FindPolls', 'Last access date')}</td>
|
|
<td>{__('FindPolls', 'Remove poll from index')}</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="poll in adminPolls">
|
|
<td>%% poll.title %%</td>
|
|
<td><a :href="poll.url">%% poll.url %%</a></td>
|
|
<td>%% poll.accessed | date %%</td>
|
|
<td><button class="btn btn-sm btn-danger" @click="removeAdminPoll(poll.url)"><i class="glyphicon glyphicon-trash"></i><span class="sr-only">{__('Generic', 'Remove')}</span></button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div v-if="polls.length === 0 && adminPolls.length === 0" class="alert alert-info">
|
|
{__('FindPolls', 'There are no polls saved inside your browser yet')}
|
|
</div>
|
|
</div>
|
|
</script>
|
|
<div id="local-polls">
|
|
</div>
|
|
<div>
|
|
<h3>{__('FindPolls', 'Send my polls by email')}</h3>
|
|
{if !empty($message)}
|
|
<div class="alert alert-dismissible alert-{$message->type|html}" role="alert">{$message->message|html}{if $message->link != null}<br/><a href="{$message->link}">{$message->link}</a>{/if}<button type="button" class="close" data-dismiss="alert" aria-label="{__('Generic', 'Close')}"><span aria-hidden="true">×</span></button></div>
|
|
{/if}
|
|
<form action="" method="post">
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-3 text-center">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<label for="mail" class="input-group-addon">{__('Generic', 'Your email address')}</label>
|
|
<input type="email" class="form-control" id="mail" name="mail" autofocus>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 col-md-offset-3 text-center">
|
|
<button type="submit" class="btn btn-success">{__('FindPolls', 'Send me my polls')}</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="localstorage_help_modal" class="modal fade">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title">{__('FindPolls', 'Polls saved inside this browser')}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="alert alert-info">
|
|
<p>{__('FindPolls', 'Local Storage Help')}</p>
|
|
<ul>
|
|
<li>{__('FindPolls', 'Local Storage Help Information Title')}</li>
|
|
<li>{__('FindPolls', 'Local Storage Help Information Address')}</li>
|
|
<li>{__('FindPolls', 'Local Storage Help Information Accessed')}</li>
|
|
</ul>
|
|
<p>{__('FindPolls', 'Local Storage Help Delete')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
<script>
|
|
moment.locale('{$locale}');
|
|
|
|
var app = new Vue({
|
|
delimiters: ['%%', '%%'],
|
|
el: '#local-polls',
|
|
template: '#poll-finder-component',
|
|
data() {
|
|
return {
|
|
polls: [],
|
|
adminPolls: [],
|
|
};
|
|
},
|
|
created() {
|
|
var polls = localStorage.getItem('polls');
|
|
if (polls === null) {
|
|
this.polls = [];
|
|
} else {
|
|
this.polls = JSON.parse(polls);
|
|
}
|
|
var adminPolls = localStorage.getItem('admin_polls');
|
|
if (adminPolls === null) {
|
|
this.adminPolls = [];
|
|
} else {
|
|
this.adminPolls = JSON.parse(adminPolls);
|
|
}
|
|
},
|
|
filters: {
|
|
date: function(value) {
|
|
return moment(value).format('LLLL');
|
|
}
|
|
},
|
|
methods: {
|
|
removePoll(pollKey) {
|
|
var index = this.polls.findIndex(function (existingPoll) {
|
|
return existingPoll.url === pollKey;
|
|
});
|
|
if (index === -1) {
|
|
console.error('Oh no, the poll doesn\'t exist !');
|
|
} else { // if the poll is already present, we need to update the last access date
|
|
this.polls.splice(index, 1);
|
|
localStorage.setItem('polls', JSON.stringify(this.polls));
|
|
}
|
|
},
|
|
removeAdminPoll(pollKey) {
|
|
var index = this.adminPolls.findIndex(function (existingPoll) {
|
|
return existingPoll.url === pollKey;
|
|
});
|
|
if (index === -1) {
|
|
console.error('Oh no, the admin poll doesn\'t exist !');
|
|
} else { // if the poll is already present, we need to update the last access date
|
|
this.adminPolls.splice(index, 1);
|
|
localStorage.setItem('admin_polls', JSON.stringify(this.adminPolls));
|
|
}
|
|
},
|
|
removeAllPolls() {
|
|
this.polls.splice(0, this.polls.length);
|
|
this.adminPolls.splice(0, this.adminPolls.length);
|
|
localStorage.setItem('admin_polls', JSON.stringify(this.adminPolls));
|
|
localStorage.setItem('polls', JSON.stringify(this.polls));
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{/block}
|