Skip to content

Commit 64c11fc

Browse files
DpbmDpbm
committed
added add weapons to list
1 parent 1c6da4d commit 64c11fc

File tree

1 file changed

+102
-39
lines changed

1 file changed

+102
-39
lines changed

‎app/views/spaceships/add.html.erb‎

Lines changed: 102 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,17 @@
55
<title>Adicionar Nave</title>
66

77
<script>
8+
const weapons = [];
9+
const MAX_WEAPONS = 20;
10+
811
async function init() {
12+
const addWeaponButton = document.getElementById("add-weapon");
13+
addWeaponButton.addEventListener('click', updateWeaponsAdd);
14+
await addMap();
15+
}
16+
17+
18+
async function addMap(){
919
await customElements.whenDefined('gmp-map');
1020

1121
const map = document.querySelector('gmp-map');
@@ -41,6 +51,73 @@
4151
`);
4252
infowindow.open(map.innerMap, marker);
4353
});
54+
55+
}
56+
57+
function addWeapon(){
58+
const weaponName = document.getElementById("weapon-name");
59+
if(!weaponName) return;
60+
61+
const name = weaponName.value;
62+
63+
if(!name) return;
64+
weapons.push(name);
65+
}
66+
67+
function renderWeapons(){
68+
const weaponsList = document.getElementById("weapons-list");
69+
if(!weaponsList) return;
70+
weaponsList.innerHTML = '';
71+
72+
for(weapon_i in weapons){
73+
const weapon = weapons[weapon_i];
74+
75+
const li = document.createElement("li");
76+
const div = document.createElement("div");
77+
const span = document.createElement("span");
78+
const button = document.createElement("button");
79+
80+
button.type = "button";
81+
span.innerText = weapon;
82+
button.innerText = "Deletar";
83+
button.id = `weapon-${weapon_i}`;
84+
85+
button.addEventListener("click", updateWeaponsDelete);
86+
87+
div.appendChild(span);
88+
div.appendChild(button);
89+
90+
li.appendChild(div);
91+
92+
weaponsList.appendChild(li);
93+
}
94+
95+
}
96+
97+
function deleteWeapon(event){
98+
const weaponItemId = event.target.id;
99+
const index = parseInt(weaponItemId.split("-")[1]);
100+
weapons.splice(index, 1);
101+
}
102+
103+
function updateWeaponsDelete(event){
104+
if(!event) return;
105+
event.preventDefault();
106+
107+
if(!event.target) return;
108+
109+
deleteWeapon(event);
110+
renderWeapons();
111+
}
112+
113+
function updateWeaponsAdd(){
114+
if(weapons.length >= MAX_WEAPONS){
115+
alert("Você atingiu o limite máximo de Armamentos!");
116+
return;
117+
}
118+
119+
addWeapon();
120+
renderWeapons();
44121
}
45122

46123
document.addEventListener('DOMContentLoaded', init);
@@ -55,42 +132,18 @@
55132
</style>
56133
</head>
57134
<body>
58-
<gmpx-api-loader key="<%= ENV['MAPS_API_KEY'] %>" solution-channel="GMP_GE_mapsandplacesautocomplete_v1">
59-
</gmpx-api-loader>
135+
<gmpx-api-loader key="<%= ENV['MAPS_API_KEY'] %>" solution-channel="GMP_GE_mapsandplacesautocomplete_v1"></gmpx-api-loader>
60136

61137
<h1>Registrar Nave</h1>
62-
<form>
63-
<label for="size">Tamanho</label>
64-
<select id="size" name="size">
65-
<option value="small">Pequeno</option>
66-
<option value="medium">Médio</option>
67-
<option value="big">Grande</option>
68-
<option value="giant">Colossal</option>
69-
</select>
70-
71-
<br>
72-
73-
<label for="color">Cor</label>
74-
<select id="color" name="color">
75-
<option value="red">Vermelho</option>
76-
<option value="orange">Laranja</option>
77-
<option value="yellow">Amarelo</option>
78-
<option value="green">Verde</option>
79-
<option value="blue">Azul</option>
80-
<option value="indigo">Anil</option>
81-
<option value="violet">Violeta</option>
82-
</select>
83-
84-
<br>
85-
86-
<label for="damage">Grau de Avaria</label>
87-
<select id="damage" name="damage">
88-
<option value="completely-damaged">Perda Total</option>
89-
<option value="mostly-damaged">Muito Destruida</option>
90-
<option value="quite-damaged">Parcialmente Destruida</option>
91-
<option value="slightly-damaged">Praticamente Intacta</option>
92-
<option value="no-damaged">Sem Avarias</option>
93-
</select>
138+
<%= form_with do |form| %>
139+
<%= form.label :size, "Tamanho" %>
140+
<%= form.select :size, ["Pequeno", "Médio", "Grande", "Colossal"] %>
141+
142+
<%= form.label :color, "Cor" %>
143+
<%= form.select :color, ["Vermelho", "Laranja", "Amarelo", "Verde", "Azul", "Anil", "Violeta" ] %>
144+
145+
<%= form.label :damage, "Grau de Avarias" %>
146+
<%= form.select :damge, ["Perda Total", "Muito Destruido", "Parcialmente Destruido", "Praticamente Intacto", "Sem Avarias" ] %>
94147

95148
<!-- Tamanho: pequena, média, grande ou colossal;
96149
Cor: vermelha, laranja, amarela, verde, azul, anil ou violeta;
@@ -110,11 +163,21 @@
110163
<gmp-advanced-marker></gmp-advanced-marker>
111164
</gmp-map>
112165

113-
<label for="has-weapons">Possui armamentos<label>
114-
<input type="radio" name="weapons" id="has-weapons" value="has"/>
115-
<label for="does-not-have-weapons">Não Possui armamentos<label>
116-
<input type="radio" name="weapons" id="does-not-have-weapons" value="has-not" checked="true" />
117-
</form>
166+
<%= form.label :has_weapons, "Possui Armamento" %>
167+
<%= form.check_box :has_weapons, id: "has_weapons" %>
168+
169+
170+
<div style="display: block;">
171+
<%= form.label :weapon, "Nome do Armamento" %>
172+
<%= form.text_field :weapon, id: "weapon-name" %>
173+
<button type="button" id="add-weapon">Adicionar</button>
174+
175+
176+
<ul id="weapons-list"></ul>
177+
178+
</div>
179+
180+
<% end %>
118181
</body>
119182
</html>
120183

0 commit comments

Comments
 (0)