Skip to content

Commit

Permalink
update alerts page to use new look for displaying alerts
Browse files Browse the repository at this point in the history 
Move things from the sidebar to the main section and update the look to
split out alerts into keyword and representative alerts. Generally
improve the look of them.
  • Loading branch information
@struan
struan committed Oct 9, 2024
1 parent f4a6752 commit 3c10367
Show file tree
Hide file tree
Showing 2 changed files with 265 additions and 5 deletions.
2 changes: 2 additions & 0 deletions www/docs/style/sass/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
.fi-magnifying-glass:before,
.fi-heart:before,
.fi-plus:before,
.fi-play:before,
.fi-pause:before,
.fi-trash:before,
.fi-page-edit:before,
Expand Down Expand Up @@ -104,6 +105,7 @@
.fi-magnifying-glass:before {content: "\f16c"}
.fi-heart:before { content: "\f159"; }
.fi-plus:before { content: "\f199"; }
.fi-play:before { content: "\f198"; }
.fi-pause:before { content: "\f191"; }
.fi-trash:before { content: "\f204"; }
.fi-page-edit:before { content: "\f184"; }
Expand Down
268 changes: 263 additions & 5 deletions www/includes/easyparliament/templates/html/alert/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,10 +253,6 @@
<div class="alert-section__secondary">
<?php if ($email_verified) { ?>

<?php if ($alerts) { ?>
<?php include('_list.php'); ?>
<?php } ?>

<?php if ($current_mp) { ?>
<h3><?= gettext('Your MP alert') ?></h3>
<ul class="alerts-manage__list">
Expand All @@ -282,7 +278,269 @@
</div>

<div class="alert-section__primary">
<?php include 'alert-mockup.php'; ?>
<div class="clearfix">
<form action="<?= $actionurl ?>" method="POST" class="pull-right">
<input type="hidden" name="t" value="< ?= _htmlspecialchars($alert['token']) ?>">
<input type="submit" class="button button--negative small" name="action" value="<?= gettext('Delete All') ?>">
</form>
</div>

<div class="alert-page-header">
<div>
<h2><?= gettext('Keywords alerts') ?></h2>
<!-- Go to Create alert page -->
<?php if (!$alerts) { ?>
<p><?= gettext('You haven´t created any keyword alerts.') ?></p>
<?php } ?>
</div>
<a class="button" href="/create-alert-page">
<?= gettext('Create new alert') ?>
<i aria-hidden="true" role="img" class="fi-megaphone"></i>
</a>
</div>

<!-- The groups alerts should be sorted by default from most recent mention to oldest one -->
<!-- Future functionality: The groups alerts can be sorted alphabetically-->

<div class="accordion">
<?php foreach ($keyword_alerts as $alert) { ?>
<div class="accordion-item">
<button class="accordion-button" href="#accordion-content-1" aria-expanded="false">
<div class="accordion-button--content">
<span class="content-title"><?= _htmlspecialchars($alert['criteria']) ?></span>
<?php if (array_key_exists("mentions", $alert)) { ?>
<span class="content-subtitle"><?= sprintf(gettext('%d mentions this week'), $alert['mentions']) ?></span>
<?php } ?>
</div>
<i aria-hidden="true" role="img" class="fi-plus"></i>
</button>
<div id="accordion-content-1" class="accordion-content" aria-hidden="true" role="img">
<div class="accordion-content-header">
<form action="<?= $actionurl ?>" method="POST">
<input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
<div class="alert-controller-wrapper">
<button class="button small alert-edit-button">
<span><?= gettext('Edit alert') ?></span>
<i aria-hidden="true" class="fi-page-edit"></i>
</button>
<button class="button small display-none">Discard changes</button>
<?php if ($alert['status'] == 'unconfirmed') { ?>
<button type="submit" class="button small" name="action" value="Confirm">
<span><?= gettext('Confirm alert') ?></span>
<i aria-hidden="true" class="fi-save"></i>
</button>
<?php } elseif ($alert['status'] == 'suspended') { ?>
<button type="submit" class="button small" name="action" value="Resume">
<span><?= gettext('Resume alert') ?></span>
<i aria-hidden="true" class="fi-play"></i>
</button>
<?php } else { ?>
<button type="submit" class="button small" name="action" value="Suspend">
<span><?= gettext('Suspend alert') ?></span>
<i aria-hidden="true" class="fi-pause"></i>
</button>
<button type="submit" class="button small red" name="action" value="Delete">
<span><?= gettext('Delete alert') ?></span>
<i aria-hidden="true" class="fi-trash"></i>
</button>
<?php } ?>
</div>
</form>
<dl class="alert-meta-info">
<?php if (array_key_exists("mentions", $alert)) { ?>
<div class="content-header-item">
<dt><?= gettext('This week') ?></dt>
<dd><?= sprintf(gettext('%d mentions'), $alert['mentions']) ?></dd>
</div>
<?php } ?>

<?php if (array_key_exists("last_mention", $alert)) { ?>
<div class="content-header-item">
<dt><?= gettext('Date of last mention') ?></dt>
<dd><?= $alert['last_mention'] ?></dd>
</div>
<?php } ?>

<a href="/search/?q=<?= $alert['raw'] ?>" class="button small"><?= gettext('See results for this alert') ?></a>
</dl>
</div>

<hr>

<?php if ($alert["keywords"]) { ?>
<div class="keyword-list alert-page-subsection">
<h3 class="heading-with-bold-word">Keywords <span class="bold">included</span> in this alert:</h3>
<ul>
<?php foreach ($alert["keywords"] as $keyword) { ?>
<li class="label label--primary-light"><?= $keyword ?>
<i aria-hidden="true" role="img" class="fi-x"></i></li>
<?php } ?>
</ul>
<div class="add-remove-tool display-none">
<input type="text" placeholder="e.g.'freedom of information'">
<button type="submit" class="prefix">add</button>
</div>
</div>
<?php } ?>

<?php if ($alert["exclusions"]) { ?>
<div class="keyword-list excluded-keywords alert-page-subsection">
<h3 class="heading-with-bold-word">Keywords <span class="bold">excluded</span> in this alert:</h3>
<ul>
<?php foreach ($alert["exclusions"] as $exclusion) { ?>
<li class="label label--red"><?= $exclusion ?>
<i aria-hidden="true" role="img" class="fi-x"></i></li>
<?php } ?>
</ul>
<div class="add-remove-tool display-none">
<input type="text" placeholder="e.g.'freedom of information'">
<button type="submit" class="prefix">add</button>
</div>
</div>
<?php } ?>

<div class="keyword-list alert-page-subsection">
<h3 class="display-none"><label for="sections">Which section should this alert apply to?</label></h3>
<select name="sections" id="sections" class="display-none">
<option value="uk-parliament">All sections</option>
<option value="uk-parliament">UK Parliament</option>
<option value="scottish-parliament">Scottish Parliament</option>
</select>
<h3 class="heading-with-bold-word">Which <span class="bold">section</span> should this alert apply to:</h3>
<ul>
<li class="label label--red">All sections
<i aria-hidden="true" role="img" class="fi-x"></i></li>
</ul>
</div>

<!-- Only to be displayed if there is a person in this query -->

<?php if (array_key_exists('spokenby', $alert)) { ?>
<div class="keyword-list alert-page-subsection">
<h3 class="heading-with-bold-word"><?= gettext('This alert applies to the following <span class="bold">representative</span>') ?></h3>
<ul>
<?php foreach ($alert['spokenby'] as $speaker) { ?>
<li class="label label--primary-light"><?= $speaker ?>
<i aria-hidden="true" role="img" class="fi-x"></i></li>
<?php } ?>
</ul>
<div class="add-remove-tool display-none">
<input type="text" placeholder="e.g.'freedom of information'">
<button type="submit" class="prefix">add</button>
</div>
</div>
<?php } ?>

<button class="display-none" style="margin: -1rem 0rem 3rem;">Save changes</button>
<button class="display-none" style="margin: -1rem 0rem 3rem;">Discard changes</button>

</div>
</div>
<?php } ?>

<hr>

<div class="alert-page-header alert-page-section">
<div>
<h2>Representative alerts</h2>
<?php if ($current_mp) { ?>
<ul class="alerts-manage__list">
<li>
<?= sprintf(gettext('You are not subscribed to an alert for your current MP, %s'), $current_mp->full_name()) ?>.
<form action="<?= $actionurl ?>" method="post">
<input type="hidden" name="t" value="<?=_htmlspecialchars($token)?>">
<input type="hidden" name="pid" value="<?= $current_mp->person_id() ?>">
<input type="submit" class="button" value="<?= gettext('Subscribe') ?>">
</form>
</li>
</ul>
<?php } else { ?>
<?php foreach ($own_member_alerts as $alert) { ?>
<div class="alert-page-subsection">
<h3 class="alert-page-subsection--heading"><?= gettext('Your MP') ?> ﹒ XXX</h3>

<p class="alert-page-subsection--subtitle"><?= $alert['criteria'] ?></p>
<form action="<?= $actionurl ?>" method="POST">
<input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
<div>
<?php if ($alert['status'] == 'unconfirmed') { ?>
<button type="submit" class="button small" name="action" value="Confirm">
<span><?= gettext('Confirm alert') ?></span>
<i aria-hidden="true" class="fi-save"></i>
</button>
<?php } elseif ($alert['status'] == 'suspended') { ?>
<button type="submit" class="button small" name="action" value="Resume">
<span><?= gettext('Resume alert') ?></span>
<i aria-hidden="true" class="fi-play"></i>
</button>
<?php } else { ?>
<button typ="submit" class="button small" value="Suspend">
<span><?= gettext('Suspend alert') ?></span>
<i aria-hidden="true" class="fi-pause"></i>
</button>
<button typ="submit" class="button small" value="Delete">
<span><?= gettext('Delete alert') ?></span>
<i aria-hidden="true" class="fi-trash"></i>
</button>
<?php } ?>
</div>
</form>

<p class="alert-page-subsection--subtitle">Alert when Janne Doe is <strong>mentioned</strong></p>
<button class="button small">
Create new alert
<i aria-hidden="true" role="img" class="fi-megaphone"></i>
</button>
</div>
<?php } ?>
<?php } ?>

<?php foreach ($spoken_alerts as $alert) { ?>
<div class="alert-page-subsection">
<h3 class="alert-page-subsection--heading"><?= implode(', ', $alert['spokenby']) ?></h3>

<p class="alert-page-subsection--subtitle"><?= $alert['criteria'] ?>
<form action="<?= $actionurl ?>" method="POST">
<input type="hidden" name="t" value="<?= _htmlspecialchars($alert['token']) ?>">
<div>
<?php if ($alert['status'] == 'unconfirmed') { ?>
<button type="submit" class="button small" name="action" value="Confirm">
<span><?= gettext('Confirm alert') ?></span>
<i aria-hidden="true" class="fi-save"></i>
</button>
<?php } elseif ($alert['status'] == 'suspended') { ?>
<button type="submit" class="button small" name="action" value="Resume">
<span><?= gettext('Resume alert') ?></span>
<i aria-hidden="true" class="fi-play"></i>
</button>
<?php } else { ?>
<button type="submit" class="button small" name="action" value="Suspend">
<span><?= gettext('Suspend alert') ?></span>
<i aria-hidden="true" class="fi-pause"></i>
</button>
<button type="submit" class="button small" name="action" value="Delete">
<span><?= gettext('Delete alert') ?></span>
<i aria-hidden="true" class="fi-trash"></i>
</button>
<?php } ?>
</div>
</form>

<p class="alert-page-subsection--subtitle">Alert when Keir Starmer is <strong>mentioned</strong></p>
<button class="button small">
Create new alert
<i aria-hidden="true" role="img" class="fi-megaphone"></i>
</button>
</div>
<?php } ?>
</div>
<a class="button">
Create new MP alert
<i aria-hidden="true" role="img" class="fi-megaphone"></i>
</a>
</div>
</div>

<?php if ($pid) { ?>
<h3>
<?php
Expand Down

0 comments on commit 3c10367

Please sign in to comment.