Commit 792d54b4 authored by okhin's avatar okhin

Fixing the home page

parent 262cdec4
...@@ -14,7 +14,6 @@ class Main extends Controller { ...@@ -14,7 +14,6 @@ class Main extends Controller {
function home($f3,$args) { function home($f3,$args) {
// Select a random contact // Select a random contact
//TODO: use weight for random //TODO: use weight for random
$rand_id = rand(0, count($f3->get('contacts'))-1);
$contacts = $f3->get('contacts'); $contacts = $f3->get('contacts');
$groups = Api::get_groups(); $groups = Api::get_groups();
...@@ -23,7 +22,6 @@ class Main extends Controller { ...@@ -23,7 +22,6 @@ class Main extends Controller {
$group_types = Api::get_group_types(); $group_types = Api::get_group_types();
$f3->set('group_types', $group_types); $f3->set('group_types', $group_types);
$f3->set('contact', $contacts[$rand_id]);
$f3->set('block_content', 'home.html'); $f3->set('block_content', 'home.html');
} }
...@@ -108,7 +106,6 @@ class Main extends Controller { ...@@ -108,7 +106,6 @@ class Main extends Controller {
function contactslist($f3, $args) { function contactslist($f3, $args) {
$contacts = Api::get_contacts(); $contacts = Api::get_contacts();
$f3->set('contacts', $contacts); $f3->set('contacts', $contacts);
$f3->set('random', 2);
$f3->set('block_content', 'contactslist.html'); $f3->set('block_content', 'contactslist.html');
} }
......
<include href="header.html" /> <include href="header.html" />
<include href="sidebar.html" />
<include href="{{ @block_content }}" /> <include href="{{ @block_content }}" />
<include href="footer.html" /> <include href="footer.html" />
...@@ -8,13 +8,19 @@ ...@@ -8,13 +8,19 @@
<span class="card-title grey-text text-darken-4"> <span class="card-title grey-text text-darken-4">
{{ @contact.first_name }} {{ @contact.last_name }} {{ @contact.first_name }} {{ @contact.last_name }}
</span> </span>
<repeat group="{{ @group_types }}" value="{{ @group_type }}">
<ul>{{ @group_type.name }}
<repeat group="{{ @contact.groups }}" value="{{ @group }}"> <repeat group="{{ @contact.groups }}" value="{{ @group }}">
<div class="chip"> <check if="{{ @group.type == @group_type.name }}">
<check if="{{ @group.media }}"> <li class="chip">
<img src="{{ @group.media }}" alt="{{ @group.type }}"> <check if="{{ @group.media }}">
</check> <img src="{{ @group.media }}" alt="{{ @group.type }}">
{{ @group.name }} </check>
</div> {{ @group.name }}
</li>
</check>
</repeat>
</ul>
</repeat> </repeat>
</div> </div>
<div class="card-reveal"> <div class="card-reveal">
...@@ -26,7 +32,7 @@ ...@@ -26,7 +32,7 @@
<input type="text" id="contact_id" name="contact_id" hidden="hidden" value="{{ @contact.id }}"> <input type="text" id="contact_id" name="contact_id" hidden="hidden" value="{{ @contact.id }}">
<p>{{ _("If you want to call for free, you must provide us with your phone number <p>{{ _("If you want to call for free, you must provide us with your phone number
(the PiPhone will call that number to initiate the communication).") }}</p> (the PiPhone will call that number to initiate the communication).") }}</p>
<div class="input-field col s12">> <div class="input-field col s12">
<label for="phone">{{_("Your phone number:") }}</label> <label for="phone">{{_("Your phone number:") }}</label>
<input type="text" name="phone" id="phone" /> <input type="text" name="phone" id="phone" />
</div> </div>
...@@ -39,7 +45,6 @@ ...@@ -39,7 +45,6 @@
<div class="card-action"> <div class="card-action">
<a type="button" href="#">{{ _("More info") }}</a> <a type="button" href="#">{{ _("More info") }}</a>
<a type="button" href="tel:{{ @contact.phone }}" target="_blank">{{ @contact.phone }}</a> <a type="button" href="tel:{{ @contact.phone }}" target="_blank">{{ @contact.phone }}</a>
<a type="button" href="#">{{ _("Another random MEP") }}</a>
</div> </div>
</div> </div>
<!-- contact page --> <!-- contact page -->
<main> <div class="col s12 m4">
<div class="row"> <ul class="collection contact">
<div class="section indigo"> <nav class="nav-extended teal">
<div class="container"> <div class="nav-wrapper">
<h1 class="header white-text center-on-small-only">{{ @campaign.title }}</h1> <div class="input-field">
<h4 class="light indigo-text text-accent-1 center-on-small-only">{{ @campaign.description }}</h4> <input type="search" id="search" class="autocomplete">
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
</div>
</div> </div>
</div> </nav>
</div>
<div class="row">
<repeat group="{{ @contacts }}" value="{{ @contact }}"> <repeat group="{{ @contacts }}" value="{{ @contact }}">
<div class="col s6 m4"> <li class="collection-item avatar" data-json='{{ json_encode(@contact) }}'>
<include href="contact.html" /> <img src="<check if="{{ @contact.photo == '' }}">/static/img/placeholder.jpg<false>{{ @contact.photo }}</false></check>" class="circle">
</div> <span class="title">{{ @contact.last_name }} {{ @contact.full_name }}</span>
<ul>
<repeat group="{{ @contact.groups }}" value="{{ @group }}">
<li class="chip">{{ @group.name }}</li>
</repeat>
</ul>
</li>
</repeat> </repeat>
</div> </ul>
</div>
<!-- contacts list --> <!-- contacts list -->
</main> <script>
$(document).ready(function() {
$('input.autocomplete').autocomplete({
data: {
<repeat group="{{ @contacts }}" value="{{ @contact }}">
"{{ @contact.first_name }} {{ @contact.last_name }}": <check if="{{ @contact.photo == '' }}">null<false>{{ @contact.photo }}</false></check>,
</repeat>
},
limit: 20,
});
var random = Math.floor((Math.random() * $('.collection-item').length));
$('.collection-item').click(function(){
update_mep($(this));
});
function update_mep(element) {
var contact = JSON.parse($(element).attr('data-json'));
if (contact['photo'] !== '') {
$('#contact-image').attr('src', contact['photo']);
};
$('#contact-full_name').html(contact['first_name'] + ' ' + contact['last_name']);
$('#form-contact').attr('action', '/call/' + contact['id']);
$('#contact_id').attr('value', contact['id']);
$('.groups').each(function() {
var group_type = $(this).attr('data-name');
var content = '<ul class="groups" data-name="' + group_type + '">' + group_type;
contact['groups'].forEach(function(group) {
if ( group['type'] === group_type ) {
content += '<li class="chip">' + group['name'] + '</li>';
}
});
content += '</ul>';
$(this).html(content);
});
$('#contact-phone').attr('href', 'tel:' + contact['phone']);
$('#contact-phone').text(contact['phone']);
};
update_mep($('.collection-item').eq(random));
});
</script>
<script>
$(document).ready(function() {
$('.button-collapse').sideNav();
})
</script>
</body> </body>
</html> </html>
...@@ -9,10 +9,47 @@ ...@@ -9,10 +9,47 @@
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/static/css/bootstrap.min.css" rel="stylesheet"> <link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection"/>
<!-- piphone specific CSS -->
<link type="text/css" rel="stylesheet" href="/static/css/piphone.css">
<!-- JS Materialize --> <!-- JS Materialize -->
<script src="/static/js/jquery-2.1.1.js"></script> <script src="/static/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/static/js/materialize.min.js"></script> <script type="text/javascript" src="/static/js/materialize.min.js"></script>
</head> </head>
<body> <body>
<header class="blue-grey">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h1 class="header center-on-small-only blue-grey-text text-darken-3">{{ @campaign.title}}</h1>
</div>
<div class="row">
<div class="col s12 m6">
<p class="flow-text blue-grey-text text-lighten-4">
{{ @campaign.description }}
</p>
<a href="#navbar" class="btn waves-effect waves-light leat accent-2 right">{{ _("Act Now!") }}</a>
</div>
<div class="col s12 m6">
<check if="{{ @organization.logo }}">
<img src="{{ @organization.logo }}">
</check>
<h4 class="light header blue-grey-text text-darken-2">
{{ @organization.name }}
</h4>
<p class="flow-text blue-grey-text text-lighten-4">
{{ @organization.description }}
</p>
<a href="{{ @organization.website }}" class="btn waves-effect waves-light blue accent-2 right">{{ _("Visit Us!") }}</a>
</div>
</div>
</div>
</div>
<nav class="blue-grey darken-2" id="navbar">
<div class="container nav-wrapper">
<ul class="left">
<li class="waves-effect <check if="{{ @block_content == 'home.html' }}">active</check>"><a href="/#navbar">Act</a></li>
<li class="waves-effect"><a href="#">Campaign</a></li>
<li class="waves-effect"><a href="#">About the piphone</a></li>
</ul>
</div>
</nav>
</header>
<main>
<main> <div class="row">
<div class="row"> <div class="col s6 m8">
<div class="section indigo"> <div class="container center">
<div class="container"> <h4 class="blue-grey-text header">
<h1 class="header white-text center-on-small-only">{{ @campaign.title }}</h1> {{ _("Call a representative and make your voice heard!") }}
<h4 class="light indigo-text text-accent-1 center-on-small-only">{{ @campaign.description }}</h4> </h4>
<!-- contact page -->
<div class="col s12 offset-m3 m6">
<div class="card sticky-action">
<div class="card-image">
<img id="contact-image" src="/static/img/placeholder.jpg">
<a class="btn-floating btn-large halfway-fab waves-effect activator green">
<i class="material-icons">phone</i>
</a>
</div>
<div class="card-content">
<span class="card-title grey-text text-darken-4" id="contact-full_name">
John Doe
</span>
<repeat group="{{ @group_types }}" value="{{ @group_type }}">
<ul class="groups" data-name="{{ @group_type.name }}">{{ @group_type.name }}
<li class="chip">
Group
</li>
</ul>
</repeat>
</div>
<div class="card-reveal">
<span id="contact-full_name-2" class="card-title grey-text text-darken-4">John Doe
<i class="material-icons right">close</i>
</span>
<h5>{{ _("Call for free") }}</h5>
<form id="form-contact" method="post" action="">
<input type="text" id="contact_id" name="contact_id" hidden="hidden" value="">
<p>{{ _("If you want to call for free, you must provide us with your phone number
(the PiPhone will call that number to initiate the communication).") }}</p>
<div class="input-field col s12">
<label for="phone">{{_("Your phone number:") }}</label>
<input type="text" name="phone" id="phone" />
</div>
<p>
{{ _('Starting with your <a href="https://en.wikipedia.org/wiki/List_of_country_calling_codes#Zones_3-4:_Europe">country code</a>, without the initial 0') }}
</p>
<input class="btn btn-default" type="submit" value="{{ _('Call me') }}" />
</form>
</div>
<div class="card-action">
<a type="button" href="#">{{ _("More info") }}</a>
<a type="button" id="contact-phone" href="tel:" target="_blank">+33987654321</a>
</div>
</div>
<!-- contact page -->
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <include href="contactslist.html">
<div class="col s6 m4 offset-m4"> </div>
<include href="contact.html">
</div>
</div>
</main>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment