Skip to content

Commit

Permalink
Dev: Adapt token attribute mapping to Bootstrap
Browse files Browse the repository at this point in the history
  • Loading branch information
@olleharstedt
olleharstedt committed Feb 4, 2016
1 parent 2cd8d77 commit 9ad375c
Show file tree
Hide file tree
Showing 4 changed files with 235 additions and 77 deletions.
149 changes: 79 additions & 70 deletions application/views/admin/participants/attributeMapToken_view.php
View file
Expand Up @@ -9,89 +9,97 @@
var cannotAcceptTokenAttributesText="<?php eT("This list cannot accept token attributes.") ?>";

</script>
<div class='header ui-widget-header'>
<strong>
<?php eT("Map your token attributes to an existing participant attribute or create a new one"); ?>
</strong>
</div>
<div class="draggable-container">
<div id="tokenattribute" class="attribute-column">
<div class="heading"><?php eT("Unmapped token attributes") ?></div>
<div id="tokenatt" class="tokenatt droppable">
<?php
if (!empty($tokenattribute))
{
foreach ($tokenattribute as $key => $value)
{
echo "<div title='".gT("Drag this attribute to another column to map it to the central participants database")."' id='t_" . $value . "' data-name=\"$key\" class=\"token-attribute attribute-item draggable\">" . $key . "</div>";
}
}
?>
</div>

<div class='header ui-widget-header'>
<h3 class='pagetitle'><?php eT("Map your token attributes to an existing participant attribute or create a new one"); ?></h3>
</div>

<div class="draggable-container">
<div class='row'>
<div class='col-sm-4'>
<div id="tokenattribute" class="panel panel-primary attribute-column">
<div class="panel-heading"><?php eT("Unmapped token attributes") ?></div>
<div id="tokenatt" class="tokenatt droppable">
<?php
if (!empty($tokenattribute))
{
foreach ($tokenattribute as $key => $value)
{
echo "<div id='t_" . $value . "' data-name='" . $key . "' class='panel panel-default token-attribute attribute-item draggable'><div title='".gT("Drag this attribute to another column to map it to the central participants database")."' data-name=\"$key\" class=\"panel-body\">" . $key . "</div></div>";
}
}
?>
</div>

</div>
</div>
<div id="newcreated" class="attribute-column">
<div class="heading"><?php eT("Participant attributes to create") ?></div>
<div class="newcreate droppable" style ="height: 40px">

<div class='col-sm-4'>
<div id="newcreated" class="panel panel-primary attribute-column">
<div class="panel-heading"><?php eT("Participant attributes to create") ?></div>
<div class="panel-body newcreate droppable" style ="height: 40px">
</div>
</div>
</div>
<div id="centralattribute" class="attribute-column">
<div class="heading"><?php eT("Existing participant attributes")?></div>
<div class="centralatt">
<?php
if (!empty($attribute))
{
foreach ($attribute as $key => $value)

<div class='col-sm-4'>
<div id="centralattribute" class="panel panel-primary attribute-column">
<div class="panel-heading"><?php eT("Existing participant attributes")?></div>
<div class="centralatt">
<?php
if (!empty($attribute))
{
echo "<div class=\"mappable-attribute-wrapper droppable\"><div id='c_" . $key . "' data-name='c_" . $key . "' class=\"mappable-attribute attribute-item\" >" . $value . "</div></div>";
foreach ($attribute as $key => $value)
{
echo "<div class='panel panel-default mappable-attribute-wrapper droppable'><div class=\"panel-body mappable-attribute attribute-item\" id='c_" . $key . "' data-name='c_" . $key . "'>" . $value . "</div></div>";
}
}
}
?>
</div>

<?php if (!empty($attribute)) { ?>
<div class='explanation'>
<div class="explanation-row">
<input type='checkbox' id='overwriteman' name='overwriteman' />
<label for='overwriteman'><?php eT("Overwrite existing attribute values if a participant already exists?") ?></label>
</div>
<div class="explanation-row">
<input type='checkbox' id='createautomap' name='createautomap' />
<label for='createautomap'><?php eT("Make these mappings automatic in future") ?></label>
</div>
</div>
<?php } else { ?>

<?php }
if(!empty($alreadymappedattributename)) {
?>
<div class='heading'><?php eT("Pre-mapped attributes") ?></div><br />
<div class="notsortable">
<?php
foreach ($alreadymappedattributename as $key => $value)
{
echo "<div title='".gT("This attribute is automatically mapped")."' data-name='$value' class=\"already-mapped-attribute attribute-item\" >" . $alreadymappedattdescription[$value] . "</div>";
}
?>
?>
</div>

<?php if (!empty($attribute)) { ?>
<div class='explanation'>
<div class="explanation-row">
<input type='checkbox' id='overwrite' name='overwrite' />
<label for='overwrite'><?php eT("Overwrite existing attribute values if a participant already exists?") ?></label>
<input type='checkbox' id='overwriteman' name='overwriteman' />
<label for='overwriteman'><?php eT("Overwrite existing attribute values if a participant already exists?") ?></label>
</div>
<div class="explanation-row">
<input type='checkbox' id='createautomap' name='createautomap' />
<label for='createautomap'><?php eT("Make these mappings automatic in future") ?></label>
</div>
</div>
<?php
}
?>
<?php } else { ?>

<?php }
if(!empty($alreadymappedattributename)) {
?>
<div class='heading'><?php eT("Pre-mapped attributes") ?></div>
<div class="notsortable">
<?php
foreach ($alreadymappedattributename as $key => $value)
{
echo "<div title='".gT("This attribute is automatically mapped")."' data-name='$value' class=\"already-mapped-attribute attribute-item\" >" . $alreadymappedattdescription[$value] . "</div>";
}
?>
</div>
<div class='explanation'>
<div class="explanation-row">
<input type='checkbox' id='overwrite' name='overwrite' />
<label for='overwrite'><?php eT("Overwrite existing attribute values if a participant already exists?") ?></label>
</div>
</div>
<?php
}
?>
</div>
</div>
<div style="clear: both;"></div>
</div>
<p>
<input type="button" name="goback" id="back" value="<?php eT('Back')?>" />
<input type='button' name='reset' onClick='window.location.reload();' id='reset' value="<?php eT('Reset') ?>" />
<input type="button" name="attmap" id="attmap" value="<?php eT('Continue') ?>" />
</p>
<div class='form-group col-sm-12 text-center'>
<input class='btn btn-default' type="button" name="goback" onclick="history.back();" id="back" value="<?php eT('Back')?>" />
<input class='btn btn-default' type='button' name='reset' onClick='window.location.reload();' id='reset' value="<?php eT('Reset') ?>" />
<input class='btn btn-default' type="button" name="attmap" id="attmap" value="<?php eT('Continue')?>" />
</div>

<?php
$ajaxloader = array(
'src' => Yii::app()->getConfig('adminimageurl') . '/ajax-loader.gif',
Expand All @@ -102,3 +110,4 @@
<div id="processing" title="<?php eT("Processing...") ?>" style="display:none">
<?php echo CHtml::image($ajaxloader['src'], $ajaxloader['alt']); ?>
</div>
</div>
31 changes: 24 additions & 7 deletions scripts/admin/attributeMapToken.js
View file
Expand Up @@ -10,22 +10,22 @@ $(document).ready(function(){
if($("#createautomap").is(':checked')) {var attcreateautomap=true;} else {var attcreateautomap=false;}

var headingHeight = 0;
$('.attribute-column .heading').each(function(i) {
$('.attribute-column .panel-heading').each(function(i) {
if($(this).height() > headingHeight) {
headingHeight = $(this).height();
}
});
$('.attribute-column .heading').height(headingHeight);
$('.attribute-column .panel-heading').height(headingHeight);

function adjustHeights() {
$('.attribute-column, .droppable').css({ 'height': 'auto' });
$('.attribute-column').height($('.draggable-container').height());

var ncHeadingHeight = $('#newcreated .heading').outerHeight();
var ncHeadingHeight = $('#newcreated .panel-heading').outerHeight();
$('.newcreate').css({
'height':$('#newcreated').height()-ncHeadingHeight-5
});
var taHeadingHeight = $('#tokenattribute .heading').outerHeight();
var taHeadingHeight = $('#tokenattribute .panel-heading').outerHeight();
$('#tokenatt').css({
'height':$('#tokenattribute').height()-taHeadingHeight-5
});
Expand Down Expand Up @@ -104,28 +104,43 @@ $(document).ready(function(){
$("#createautomap").click(function(){
if($("#createautomap").is(':checked')) {attcreateautomap=true;} else {attcreateautomap=false;}
});

// Continue button
$('#attmap').click(function(){

var anewcurrentarray = {};
newcurrentarray = new Array();

$('#newcreated .attribute-item').each(function(i) {
console.log(this);
newcurrentarray.push($(this).attr('id'));
});

$.each(newcurrentarray, function(index,value) {
console.log(value);
if(value[0]=='t') {
anewcurrentarray[value.substring(2)] = $("#td_"+value).val();
}
});

var mappedarray = {};
tokencurrentarray = new Array();
$('#centralattribute .attribute-item').each(function(i) {
tokencurrentarray.push($(this).attr('id'));
});

$.each(tokencurrentarray, function(index,value) {
if(value[0]=='t') {
mappedarray[encodeURI(tokencurrentarray[index-1].substring(2))] = value.substring(2);
}
});

console.log('mappedarray', mappedarray);
console.log('anewcurrentarray', anewcurrentarray);
console.log(attoverwrite);
console.log(attoverwriteman);
console.log(attcreateautomap);

/* $("#processing").dialog({
height: 90,
width: 50,
Expand All @@ -141,8 +156,10 @@ $(document).ready(function(){
createautomap: attcreateautomap
}, function(msg){
alert(msg);
//$(this).dialog("close");
$(location).attr('href',redUrl);

// TODO: Enable after debugging done
//$(location).attr('href',redUrl);
});
});
});

});
1 change: 1 addition & 0 deletions styles/Sea_Green/config.xml
View file
Expand Up @@ -21,6 +21,7 @@
<filename>jcarousel.responsive.css</filename>
<filename>lime-admin-misc.css</filename>
<filename>attributeMap.css</filename>
<filename>attributeMapToken.css</filename>
</css>
<js>
<filename>notify.js</filename>
Expand Down
131 changes: 131 additions & 0 deletions styles/Sea_Green/css/attributeMapToken.css
View file
@@ -0,0 +1,131 @@
.draggable-container {
min-height: 300px;
}

#newcreated,
#tokenattribute,
#centralattribute {
margin-top:10px;
margin-left: 0.75%;
margin-right: 0.75%;
margin-bottom: 20px;
}

#tokenattribute {
margin-left: 1.5%;
}

#centralattribute {
margin-right: 1.5%;
}

#tokenatt,
#newcreated .newcreate {
}

#centralattribute .centralatt {
padding-bottom: 15px;
}

#newcreated .attribute-item,
#centralattribute .mappable-attribute-wrapper.paired div {
}

#newcreated .attribute-item input {
display: block;
margin: 2px auto;
width: 80%;
}

#centralattribute div.centralatt div.token-attribute {
margin-top: -5px;
min-height: 20px;
}

#centralattribute div.centralatt div.paired {
}

#newcreated,
#tokenattribute {
height: 100%;
}

.heading{
height: auto;
padding-top: 7px;
font-weight: bold;
}

div.mappable-attribute-wrapper {
width : 90%;
margin: 2px auto;
padding:2px;
}

div.attribute-item {
width : 80%;
margin: 6px auto;
padding:4px;
text-align:center;
}

div.mappable-attribute-wrapper div.attribute-item {
width : 88.88888888888889%;
margin: 0 auto;
padding:4px;
text-align:center;
}


.notsortable div.attribute-item{
}

#centralattribute .explanation {
width:90%;
margin: 0 auto;
text-align: left;
}

#centralattribute .explanation-row {
display: table-row;
}

#centralattribute .explanation input,
#centralattribute .explanation label {
display: table-cell;
padding-top: 4px;
padding-bottom: 4px;
}

#centralattribute .explanation label {
padding-left: 8px;
}

.attribute-item.draggable {
cursor: move;
}

.droppable.target-hover {
}

#tokenatt.target-hover,
#newcreated .newcreate.target-hover {
}

div.mappable-attribute-wrapper.target-hover {
padding-bottom: 27px;
}

div.mappable-attribute-wrapper.paired.target-hover {
padding-bottom: 4px;
}

div.mappable-attribute-wrapper.paired.ui-state-disabled {
opacity: 1;
filter:alpha(opacity=100);
}

.draggable-container .attribute-column .ui-draggable-dragging {
z-index: 100;
}

0 comments on commit 9ad375c

Please sign in to comment.