Nicer interface for creating teams, that allows the user to select leader and unit row.

application/action/new_team.php

@@ -40,6 +40,8 @@
         }
         $ids = filter_input(INPUT_POST, 'ids');
         $name = filter_input(INPUT_POST, 'name');
+        $leader_id = filter_input(INPUT_POST, 'leader');
+        $total_front = filter_input(INPUT_POST, 'front');
         $description = filter_input(INPUT_POST, 'description');
         $id = preg_split("/[\s,]+/", $ids);
         $id_count = sizeof($id);
@@ -171,15 +173,24 @@
         $statement->bindValue(':area', $area);
         $statement->bindValue(':stage', $stage);
         $statement->bindValue(':difficulty', $difficulty);
-        error_log($statement);
         $res = $statement->execute();
         if (!$res){
             return -5;
         }
+
+        $j = 0;
         foreach ($id as $i){
-            // TODO: Leader and front
-            $s = "INSERT INTO team_unit VALUES ($team_id, $i, 0, 0);";
+            $leader = 0;
+            if ((string) $i == (string) $leader_id){
+                $leader = 1;
+            }
+            $front = 0;
+            if ($j < $total_front){
+                $front = 1;
+            }
+            $s = "INSERT INTO team_unit VALUES ($team_id, $i, $leader, $front);";
             $db->query($s);
+            $j ++;
         }
         return 0;
     }

application/view/teams.php

@@ -43,6 +43,9 @@
             max_units = 0;
             selected_units = 0;
             selected_ids = [];
+
+            current_slot_id = "";
+            leader_id = "";
 <?php
             foreach ($page->units as $unit){
 ?>
@@ -140,7 +143,40 @@
                     difficulty = 0;
                 }
 
-                var ids = selected_ids.join(',');
+                var request =
+                  'uid=<?=$UID?>' +
+                  '&area_type=' + area_type +
+                  '&area=' + area +
+                  '&difficulty=' + difficulty +
+                  '&stage=' + stage +
+                  '&name=' + encodeURI(name) +
+                  '&description=' + encodeURI(description) +
+                  '&leader=' + leader_id;
+
+                var id = [];
+                var front = 0;
+                var slots = document.getElementsByClassName('new_unit_slot');
+                for (var i = 0; i < slots.length; i ++) {
+                    slots[i].classList.remove('leader');
+                    var id_value = slots[i].getElementsByClassName('unit_id')[0].value;
+                    if (String(id_value).length > 0){
+                        id.push(id_value);
+                        if (
+                          (
+                            area_type == '<?=AREA_TYPE_ID::RIFT_DUNGEON?>' ||
+                            area_type == '<?=AREA_TYPE_ID::RIFT_RAID?>'
+                          ) &&
+                          i <= 3
+                        ){
+                            front = front + 1;
+                        }
+                    }
+                }
+                var ids = id.join(',');
+                request =
+                  request +
+                  '&ids=' + ids +
+                  '&front=' + front;
                 var xhttp = new XMLHttpRequest();
                 xhttp.onreadystatechange = function() {
                     if (this.readyState == 4){ 
@@ -154,7 +190,7 @@
                 };
                 xhttp.open("POST", "/action/new_team/", true);
                 xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-                xhttp.send('uid=<?=$UID?>&ids=' + ids + '&area_type=' + area_type + '&area=' + area + '&difficulty=' + difficulty + '&stage=' + stage + '&name=' + encodeURI(name) + '&description=' + encodeURI(description));
+                xhttp.send(request);
 
             }
 
@@ -162,14 +198,14 @@
              * Searches a unit with the pattern entered in the 'new_unit_id'
              * field. Shows a clickable list of matching units.
              */
-            function searchUnit(){
+            function searchUnit(panel){
                 key = document.getElementById('new_unit_id').value;
                 var autocomplete = document.getElementById('new_unit_autocomplete');
                 while (autocomplete.firstChild) {
                     autocomplete.removeChild(autocomplete.firstChild);
                 }
                 if (key.length == 0){
-                    autocomplete.style.display = 'none';
+                    autocomplete.style.display = 'block';
                 }
                 for (var i = 0; i < units.length; i++) {
                     if (units[i].name.toUpperCase().includes(key.toUpperCase())){
@@ -189,6 +225,38 @@
                 }
             }
 
+            /**
+             * Shows the search bar to searcha unit below a slot.
+             */
+            function showSearchUnit(slot){
+                if (selected_units >= max_units){
+                    return;
+                }
+                var key = document.getElementById('new_unit_id');
+                key.style.left = (slot.offsetLeft + 5) + 'px';
+                key.style.top = (slot.offsetTop + 50) + 'px';
+                key.style.display = 'block';
+                key.focus();
+
+                var autocomplete = document.getElementById('new_unit_autocomplete');
+                autocomplete.style.left = key.left;
+                autocomplete.style.top = (key.offsetTop + 15) + 'px';
+
+                current_slot_id = slot.id;
+            }
+
+            /**
+             * Selects a leader unit.
+             */
+            function selectLeader(slot){
+                leader_id = slot.getElementsByClassName('unit_id')[0].value;
+                var slots = document.getElementsByClassName('new_unit_slot');
+                for (var i = 0; i < slots.length; i ++) {
+                    slots[i].classList.remove('leader');
+                }
+                slot.classList.add('leader');
+            }
+
             /**
              * Selects a unit from the list and adds it to the new team.
              * The search list is hidden afterwards.
@@ -214,10 +282,11 @@
                     }
                 }
                 if (name != null){
+
+                    // Build monster panel
                     var monsterPanel = document.createElement('div');
                     monsterPanel.setAttribute('class', 'monster_panel');
                     monsterPanel.setAttribute('id', 'monster_panel_' + id);
-                    monsterPanel.setAttribute('onclick', 'deleteUnit(' + id + ')');
                     var monsterStars = document.createElement('span');
                     monsterStars.setAttribute('class', 'stars');
                     for (var i = 0; i < stars; i ++){
@@ -236,8 +305,17 @@
                     monsterPanel.appendChild(monsterStars);
                     monsterPanel.appendChild(monsterImage);
                     monsterPanel.appendChild(monsterLevel);
-                    var teamPanel = document.getElementById('new_team_units');
-                    teamPanel.appendChild(monsterPanel);
+
+                    // Attach monster panel
+                    var slot = document.getElementById(current_slot_id);
+                    slot.appendChild(monsterPanel);
+                    slot.setAttribute('onclick', 'selectLeader(this);');
+                    // TODO: X to remove
+
+                    // Set ID
+                    var input_id = slot.getElementsByClassName('unit_id')[0];
+                    input_id.value = id;
+
                     // Hide the selector
                     var autocomplete = document.getElementById('new_unit_autocomplete');
                     while (autocomplete.firstChild) {
@@ -245,14 +323,8 @@
                     }
                     autocomplete.style.display = 'none';
                     document.getElementById('new_unit_id').value = '';
+                    document.getElementById('new_unit_id').style.display = 'none';
                     selected_units ++;
-                    if (selected_units >= max_units){
-                        document.getElementById('new_unit').style.display = 'none';
-                    }
-                    else{
-                        document.getElementById('new_unit').style.display = 'block';
-                    }
-                    selected_ids.push(id);
                 }
             }
 
@@ -374,6 +446,13 @@
              * selected in the new team panel.
              */
             function selectNewAreaType(){
+
+                max_units = 0;
+                //selected_units = 0;
+                //selected_ids = [];
+                current_slot_id = "";
+                leader_id = "";
+
                 var type = document.getElementById('new_area_type').options[document.getElementById('new_area_type').selectedIndex].value;
                 document.getElementById('new_area_scenario').style.display = 'none';
                 document.getElementById('new_area_scenario').selectedIndex = 0;
@@ -442,11 +521,37 @@
                         //document.getElementById('new_area_dimensional_rift').style.display = 'inline';
                         break;
                 }
-                if (selected_units >= max_units || type == ''){
-                    document.getElementById('new_unit').style.display = 'none';
+
+                var container = document.getElementById('new_team_units');
+                while (container.firstChild) {
+                    container.removeChild(container.firstChild);
                 }
-                else{
-                    document.getElementById('new_unit').style.display = 'block';
+
+                var panel;
+                var hr;
+                var id;
+                var max_slots = max_units;
+                for (var i = 0; i < max_slots; i ++){
+                    panel = document.createElement('div');
+                    panel.setAttribute('id', 'new_unit_slot_' + i);
+                    panel.setAttribute('class', 'new_unit_slot');
+                    panel.setAttribute('onClick', 'showSearchUnit(this);');
+                    id = document.createElement('input');
+                    id.setAttribute('type', 'hidden');
+                    id.setAttribute('class', 'unit_id');
+                    panel.appendChild(id);
+                    container.appendChild(panel);
+                    if (
+                      (
+                        type == '<?=AREA_TYPE_ID::RIFT_DUNGEON?>' ||
+                        type == '<?=AREA_TYPE_ID::RIFT_RAID?>'
+                      ) &&
+                      i == 3
+                    ){
+                        max_slots = 8;
+                        hr = document.createElement('hr');
+                        container.appendChild(hr);
+                    }
                 }
             }
 
@@ -750,14 +855,16 @@
                     <tr>
                         <td class='new_title'>
                             Units:
-                            <div class='new_unit' id='new_unit'>
-                                <input id='new_unit_id' onInput='searchUnit();'/>
-                                <div id='new_unit_autocomplete' class='new_unit_autocomplete'>
-                            </div>
+                            <!--<div class='new_unit' id='new_unit'>
+                                
+                                
+                            </div>-->
                         </td>
-                        <td class='new_values'>
+                        <td id='new_units' class='new_values'>
                             <div id='new_team_units'>
                             </div>
+                            <input id='new_unit_id' class='no_remove' onInput='searchUnit();'/>
+                            <div id='new_unit_autocomplete' class='no_remove new_unit_autocomplete'>
                         </td>
                     </tr>
                     <tr>

public/css/teams.css

@@ -121,7 +121,12 @@ section#new_team div#new_team_units{
 
 section#new_team div#new_team_units div.monster_panel{
     font-size: 50%;
-    cursor: not-allowed;
+    cursor: pointer;
+}
+
+section#new_team div.new_unit{
+    text-align: right;
+    display: none;
 }
 
 section#new_team div.new_unit{
@@ -129,15 +134,53 @@ section#new_team div.new_unit{
     display: none;
 }
 
-section#new_team div.new_unit div.new_unit_autocomplete{
+section#new_team div#new_team_units div.new_unit_slot{
+    border: 0.15em solid var(--ui-color-border);
+    border-radius: 0.6em;
+    background-color: #ffffff55;
+    width: 4em;
+    height: 4em;
+    display: inline-block;
+    vertical-align: top;
+    cursor: pointer;
+    margin: 0.1em;
+}
+
+section#new_team div#new_team_units div.new_unit_slot.leader{
+    border: 0.15em solid #ff0000;
+}
+section#new_team div#new_team_units div.new_unit_slot.leader:before{
+    content: " L";
+    color: #ffffff;
+    background-color: #ff0000;
+    position: absolute;
+    z-index: 20;
+    border-top-left-radius: 0.15em;
+    border-bottom-right-radius: 0.5em;
+    display: block;
+    padding: 0.1em 0.3em;
+    font-weight: bold;
+}
+
+section#new_team td#new_units{
+    position: relative;
+}
+
+section#new_team input#new_unit_id{
+    display: none;
+    position: absolute;
+}
+
+section#new_team div#new_unit_autocomplete{
     border: 0.1em solid #000000;
     display: none;
     border-radius: 0.5em;
     margin: auto auto auto 1em;
     position: absolute;
+    z-index: 40;
 }
 
-section#new_team div.new_unit div.new_unit_autocomplete div{
+section#new_team div#new_unit_autocomplete div{
     border: 0.05em solid #000000;
     text-align: left;
     text-transform: capitalize;
@@ -153,11 +196,11 @@ section#new_team div.new_unit div.new_unit_autocomplete div{
     box-shadow: var(--input-box-shadow);
 }
 
-section#new_team div.new_unit div.new_unit_autocomplete div span{
+section#new_team div#new_unit_autocomplete div span{
     vertical-align: middle;
 }
 
-section#new_team div.new_unit div.new_unit_autocomplete div img{
+section#new_team div#new_unit_autocomplete div img{
     height: 1.5em;
     width: 1.5em;
     vertical-align: middle;