|
24 | 24 | <div class="col-sm-6"> |
25 | 25 | <div class="box box-primary"> |
26 | 26 | <div class="box-header with-border"> |
27 | | - <h3 class="box-title">Location Details</h3> |
| 27 | + <h3 class="box-title">Mount Details</h3> |
28 | 28 | </div> |
29 | 29 |
|
30 | 30 | <form action="{{ route('admin.mounts.view', $mount->id) }}" method="POST"> |
|
101 | 101 | <div class="box"> |
102 | 102 | <div class="box-header with-border"> |
103 | 103 | <h3 class="box-title">Eggs</h3> |
| 104 | + |
| 105 | + <div class="box-tools"> |
| 106 | + <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addEggsModal">Add Eggs</button> |
| 107 | + </div> |
104 | 108 | </div> |
105 | 109 |
|
106 | 110 | <div class="box-body table-responsive no-padding"> |
107 | 111 | <table class="table table-hover"> |
108 | 112 | <tr> |
109 | 113 | <th>ID</th> |
110 | 114 | <th>Name</th> |
| 115 | + <th></th> |
111 | 116 | </tr> |
112 | 117 |
|
113 | | - @foreach($mount->eggs as $egg) |
| 118 | + @foreach ($mount->eggs as $egg) |
114 | 119 | <tr> |
115 | 120 | <td><code>{{ $egg->id }}</code></td> |
116 | 121 | <td><a href="{{ route('admin.nests.egg.view', $egg->id) }}">{{ $egg->name }}</a></td> |
| 122 | + <td class="col-sm-1 middle"> |
| 123 | + <button data-action="detach-egg" data-id="{{ $egg->id }}" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i></button> |
| 124 | + </td> |
117 | 125 | </tr> |
118 | 126 | @endforeach |
119 | 127 | </table> |
|
123 | 131 | <div class="box"> |
124 | 132 | <div class="box-header with-border"> |
125 | 133 | <h3 class="box-title">Nodes</h3> |
| 134 | + |
| 135 | + <div class="box-tools"> |
| 136 | + <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#addNodesModal">Add Nodes</button> |
| 137 | + </div> |
126 | 138 | </div> |
127 | 139 |
|
128 | 140 | <div class="box-body table-responsive no-padding"> |
|
131 | 143 | <th>ID</th> |
132 | 144 | <th>Name</th> |
133 | 145 | <th>FQDN</th> |
| 146 | + <th></th> |
134 | 147 | </tr> |
135 | 148 |
|
136 | | - @foreach($mount->nodes as $node) |
| 149 | + @foreach ($mount->nodes as $node) |
137 | 150 | <tr> |
138 | 151 | <td><code>{{ $node->id }}</code></td> |
139 | 152 | <td><a href="{{ route('admin.nodes.view', $node->id) }}">{{ $node->name }}</a></td> |
140 | 153 | <td><code>{{ $node->fqdn }}</code></td> |
| 154 | + <td class="col-sm-1 middle"> |
| 155 | + <button data-action="detach-node" data-id="{{ $node->id }}" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i></button> |
| 156 | + </td> |
141 | 157 | </tr> |
142 | 158 | @endforeach |
143 | 159 | </table> |
144 | 160 | </div> |
145 | 161 | </div> |
146 | 162 | </div> |
147 | 163 | </div> |
| 164 | + |
| 165 | + <div class="modal fade" id="addEggsModal" tabindex="-1" role="dialog"> |
| 166 | + <div class="modal-dialog" role="document"> |
| 167 | + <div class="modal-content"> |
| 168 | + <form action="{{ route('admin.mounts.eggs', $mount->id) }}" method="POST"> |
| 169 | + <div class="modal-header"> |
| 170 | + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
| 171 | + <span aria-hidden="true" style="color: #FFFFFF">×</span> |
| 172 | + </button> |
| 173 | + |
| 174 | + <h4 class="modal-title">Add Eggs</h4> |
| 175 | + </div> |
| 176 | + |
| 177 | + <div class="modal-body"> |
| 178 | + <div class="row"> |
| 179 | + <div class="form-group col-md-12"> |
| 180 | + <label for="pEggs">Eggs</label> |
| 181 | + <select id="pEggs" name="eggs[]" class="form-control" multiple> |
| 182 | + @foreach ($nests as $nest) |
| 183 | + <optgroup label="{{ $nest->name }}"> |
| 184 | + @foreach ($nest->eggs as $egg) |
| 185 | + |
| 186 | + @if (! in_array($egg->id, $mount->eggs->pluck('id')->toArray())) |
| 187 | + <option value="{{ $egg->id }}">{{ $egg->name }}</option> |
| 188 | + @endif |
| 189 | + |
| 190 | + @endforeach |
| 191 | + </optgroup> |
| 192 | + @endforeach |
| 193 | + </select> |
| 194 | + </div> |
| 195 | + </div> |
| 196 | + </div> |
| 197 | + |
| 198 | + <div class="modal-footer"> |
| 199 | + {!! csrf_field() !!} |
| 200 | + |
| 201 | + <button type="button" class="btn btn-default btn-sm pull-left" data-dismiss="modal">Cancel</button> |
| 202 | + <button type="submit" class="btn btn-primary btn-sm">Add</button> |
| 203 | + </div> |
| 204 | + </form> |
| 205 | + </div> |
| 206 | + </div> |
| 207 | + </div> |
| 208 | + |
| 209 | + <div class="modal fade" id="addNodesModal" tabindex="-1" role="dialog"> |
| 210 | + <div class="modal-dialog" role="document"> |
| 211 | + <div class="modal-content"> |
| 212 | + <form action="{{ route('admin.mounts.nodes', $mount->id) }}" method="POST"> |
| 213 | + <div class="modal-header"> |
| 214 | + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
| 215 | + <span aria-hidden="true" style="color: #FFFFFF">×</span> |
| 216 | + </button> |
| 217 | + |
| 218 | + <h4 class="modal-title">Add Nodes</h4> |
| 219 | + </div> |
| 220 | + |
| 221 | + <div class="modal-body"> |
| 222 | + <div class="row"> |
| 223 | + <div class="form-group col-md-12"> |
| 224 | + <label for="pNodes">Nodes</label> |
| 225 | + <select id="pNodes" name="nodes[]" class="form-control" multiple> |
| 226 | + @foreach ($locations as $location) |
| 227 | + <optgroup label="{{ $location->long }} ({{ $location->short }})"> |
| 228 | + @foreach ($location->nodes as $node) |
| 229 | + |
| 230 | + @if (! in_array($node->id, $mount->nodes->pluck('id')->toArray())) |
| 231 | + <option value="{{ $node->id }}">{{ $node->name }}</option> |
| 232 | + @endif |
| 233 | + |
| 234 | + @endforeach |
| 235 | + </optgroup> |
| 236 | + @endforeach |
| 237 | + </select> |
| 238 | + </div> |
| 239 | + </div> |
| 240 | + </div> |
| 241 | + |
| 242 | + <div class="modal-footer"> |
| 243 | + {!! csrf_field() !!} |
| 244 | + |
| 245 | + <button type="button" class="btn btn-default btn-sm pull-left" data-dismiss="modal">Cancel</button> |
| 246 | + <button type="submit" class="btn btn-primary btn-sm">Add</button> |
| 247 | + </div> |
| 248 | + </form> |
| 249 | + </div> |
| 250 | + </div> |
| 251 | + </div> |
| 252 | +@endsection |
| 253 | + |
| 254 | +@section('footer-scripts') |
| 255 | + @parent |
| 256 | + |
| 257 | + <script type="application/javascript"> |
| 258 | + $(document).ready(function() { |
| 259 | + $('#pEggs').select2({ |
| 260 | + placeholder: 'Select eggs..', |
| 261 | + }); |
| 262 | +
|
| 263 | + $('#pNodes').select2({ |
| 264 | + placeholder: 'Select nodes..', |
| 265 | + }); |
| 266 | +
|
| 267 | + $('button[data-action="detach-egg"]').click(function (event) { |
| 268 | + event.preventDefault(); |
| 269 | +
|
| 270 | + const element = $(this); |
| 271 | + const eggId = $(this).data('id'); |
| 272 | +
|
| 273 | + $.ajax({ |
| 274 | + method: 'DELETE', |
| 275 | + url: '/admin/mounts/' + {{ $mount->id }} + '/eggs/' + eggId, |
| 276 | + headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, |
| 277 | + }).done(function () { |
| 278 | + element.parent().parent().addClass('warning').delay(100).fadeOut(); |
| 279 | + swal({ type: 'success', title: 'Egg detached.' }); |
| 280 | + }).fail(function (jqXHR) { |
| 281 | + console.error(jqXHR); |
| 282 | + swal({ |
| 283 | + title: 'Whoops!', |
| 284 | + text: jqXHR.responseJSON.error, |
| 285 | + type: 'error' |
| 286 | + }); |
| 287 | + }); |
| 288 | + }); |
| 289 | +
|
| 290 | + $('button[data-action="detach-node"]').click(function (event) { |
| 291 | + event.preventDefault(); |
| 292 | +
|
| 293 | + const element = $(this); |
| 294 | + const nodeId = $(this).data('id'); |
| 295 | +
|
| 296 | + $.ajax({ |
| 297 | + method: 'DELETE', |
| 298 | + url: '/admin/mounts/' + {{ $mount->id }} + '/nodes/' + nodeId, |
| 299 | + headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }, |
| 300 | + }).done(function () { |
| 301 | + element.parent().parent().addClass('warning').delay(100).fadeOut(); |
| 302 | + swal({ type: 'success', title: 'Node detached.' }); |
| 303 | + }).fail(function (jqXHR) { |
| 304 | + console.error(jqXHR); |
| 305 | + swal({ |
| 306 | + title: 'Whoops!', |
| 307 | + text: jqXHR.responseJSON.error, |
| 308 | + type: 'error' |
| 309 | + }); |
| 310 | + }); |
| 311 | + }); |
| 312 | + }); |
| 313 | + </script> |
148 | 314 | @endsection |
0 commit comments