Skip to content

Commit 740b925

Browse files
Pek5892Pek5892
committed
refactor: miglioria grafica header attività
1 parent 9b05fcb commit 740b925

1 file changed

Lines changed: 112 additions & 90 deletions

File tree

‎modules/interventi/header.php‎

Lines changed: 112 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -101,35 +101,35 @@
101101
<hr>
102102
<div class="row">
103103
<div class="col-md-4">
104-
<div class="card card-info card-outline shadow">
104+
<div class="card card-primary card-outline shadow">
105105
<div class="card-header">
106-
<h3 class="card-title"><i class="fa fa-vcard"></i> '.tr('Cliente').'</h3>
106+
<h3 class="card-title text-primary"><i class="fa fa-vcard"></i> '.tr('Cliente').'</h3>
107107
</div>
108108
<div class="card-body">
109109
<div class="row">
110-
<div class="col-md-2">
111-
<img src="'.$logo.'" class="img-fluid">
110+
<div class="col-md-3">
111+
<img src="'.$logo.'" class="img-fluid img-thumbnail">
112112
</div>
113-
114-
<div class="col-md-10">';
113+
114+
<div class="col-md-9">';
115115

116116
// Cliente
117117
echo '
118-
<h4><b>'.Modules::link('Anagrafiche', $anagrafica->idanagrafica, $anagrafica->ragione_sociale, $anagrafica->ragione_sociale).'</b></h4>
118+
<h4 class="mb-2"><b>'.Modules::link('Anagrafiche', $anagrafica->idanagrafica, $anagrafica->ragione_sociale, $anagrafica->ragione_sociale).'</b></h4>
119119
120-
<p>
121-
'.($sede['nomesede'] ? $sede['nomesede'].'<br>' : '').'
122-
'.$sede['indirizzo'].'<br>
123-
'.$sede['cap'].' - '.$sede['citta'].' ('.$sede['provincia'].')
120+
<p class="mb-2">
121+
'.($sede['nomesede'] ? '<i class="fa fa-building-o text-muted mr-1"></i> '.$sede['nomesede'].'<br>' : '').'
122+
<i class="fa fa-map-marker text-muted mr-1"></i> '.$sede['indirizzo'].'<br>
123+
<i class="fa fa-map text-muted mr-1"></i> '.$sede['cap'].' - '.$sede['citta'].' ('.$sede['provincia'].')
124124
</p>
125125
126-
<p>
127-
'.($sede['telefono'] ? '<a class="btn btn-default btn-xs" href="tel:'.$sede['telefono'].'" target="_blank"><i class="fa fa-phone text-maroon"></i> '.$sede['telefono'].'</a>' : '').'
128-
'.($sede['email'] ? '<a class="btn btn-default btn-xs" href="mailto:'.$sede['email'].'"><i class="fa fa-envelope text-maroon"></i> '.$sede['email'].'</a>' : '').'
129-
'.($referente['nome'] ? '<p></p><i class="fa fa-user-o text-muted"></i> '.$referente['nome'].'<br>' : '').'
130-
'.($referente['telefono'] ? '<a class="btn btn-default btn-xs" href="tel:'.$referente['telefono'].'" target="_blank"><i class="fa fa-phone text-maroon"></i> '.$referente['telefono'].'</a>' : '').'
131-
'.($referente['email'] ? '<a class="btn btn-default btn-xs" href="mailto:'.$referente['email'].'"><i class="fa fa-envelope text-maroon"></i> '.$referente['email'].'</a>' : '').'
132-
</p>
126+
<div class="mt-3">
127+
'.($sede['telefono'] ? '<a class="btn btn-light btn-xs mr-1 mb-1" href="tel:'.$sede['telefono'].'" target="_blank"><i class="fa fa-phone text-primary"></i> '.$sede['telefono'].'</a>' : '').'
128+
'.($sede['email'] ? '<a class="btn btn-light btn-xs mr-1 mb-1" href="mailto:'.$sede['email'].'"><i class="fa fa-envelope text-primary"></i> '.$sede['email'].'</a>' : '').'
129+
'.($referente['nome'] ? '<div class="mt-2"><i class="fa fa-user-o text-muted"></i> '.$referente['nome'].'</div>' : '').'
130+
'.($referente['telefono'] ? '<a class="btn btn-light btn-xs mr-1 mb-1" href="tel:'.$referente['telefono'].'" target="_blank"><i class="fa fa-phone text-primary"></i> '.$referente['telefono'].'</a>' : '').'
131+
'.($referente['email'] ? '<a class="btn btn-light btn-xs mr-1 mb-1" href="mailto:'.$referente['email'].'"><i class="fa fa-envelope text-primary"></i> '.$referente['email'].'</a>' : '').'
132+
</div>
133133
</div>
134134
</div>
135135
</div>
@@ -144,76 +144,92 @@
144144
echo '
145145
<div class="col-md-4">
146146
<div class="card card-info card-outline shadow">
147+
147148
<div class="card-header">
148-
<h3 class="card-title"><i class="fa fa-wrench"></i> '.tr('Attività _NUM_ del _DATA_', [
149-
'_NUM_' => $intervento->codice,
149+
<h3 class="card-title text-info"><i class="fa fa-wrench"></i> '.tr('Attività _NUM_ del _DATA_', [
150+
'_NUM_' => '<strong>'.$intervento->codice.'</strong>',
150151
'_DATA_' => Translator::dateToLocale($intervento->data_richiesta),
151152
]).'</h3>
153+
<div class="card-tools">
154+
<span class="badge badge-'.($stato->colore == '#000000' ? 'dark' : 'info').' p-2">
155+
<span class="round-16 mr-1" style="background-color:'.$stato->colore.';"></span>
156+
<strong>'.$stato->getTranslation('title').'</strong>
157+
</span>
158+
</div>
152159
</div>
153-
<div class="card-body">
154-
<p>
155-
<span class="tip" title="'.tr('Numero sessioni di lavoro').'"><i class="fa fa-user text-gray"></i> '.$intervento->sessioni->count().'</span>
156-
<span class="separator">|</span>
157-
158-
<span class="tip" title="'.tr('Numero di ore totali').'"><i class="fa fa-hourglass text-gray"></i> '.Translator::numberToLocale($intervento->sessioni->sum('ore')).'</span>
159-
<span class="separator">|</span>
160-
161-
<span class="tip" title="'.tr('Numero di km percorsi').'"><i class="fa fa-truck text-gray"></i> '.Translator::numberToLocale($intervento->sessioni->sum('km')).' '.tr('km').'</span>
162-
<span class="separator">|</span>
163-
164-
<span class="tip" title="'.tr('Importo totale del lavoro').'"><i class="fa fa-money text-gray"></i> '.($show_prezzi ? moneyFormat($prezzi_ivati ? $intervento->totale : $intervento->totale_imponibile, 2) : '-').'</span>
165-
<span class="separator">|</span>
166-
167-
<span class="round-16" style="background-color:'.$stato->colore.';"></span> '.$stato->getTranslation('title').'
168-
</p>
169-
<hr>
170-
<p><i class="fa fa-'.($insoluti ? 'warning text-danger' : 'check text-success').'"></i>
160+
<div class="card-body pt-3">
161+
<div class="row mb-4 mt-2">
162+
<div class="col-md-3 text-center">
163+
<span class="tip badge badge-light p-2" title="'.tr('Numero sessioni di lavoro').'"><i class="fa fa-user text-info mr-1"></i> '.$intervento->sessioni->count().'</span>
164+
</div>
165+
166+
<div class="col-md-3 text-center">
167+
<span class="tip badge badge-light p-2" title="'.tr('Numero di ore totali').'"><i class="fa fa-hourglass text-info mr-1"></i> '.Translator::numberToLocale($intervento->sessioni->sum('ore')).'</span>
168+
</div>
169+
170+
<div class="col-md-3 text-center">
171+
<span class="tip badge badge-light p-2" title="'.tr('Numero di km percorsi').'"><i class="fa fa-truck text-info mr-1"></i> '.Translator::numberToLocale($intervento->sessioni->sum('km')).' '.tr('km').'</span>
172+
</div>
173+
174+
<div class="col-md-3 text-center">
175+
<span class="tip badge badge-light p-2" title="'.tr('Importo totale del lavoro').'"><i class="fa fa-money text-info mr-1"></i> '.($show_prezzi ? moneyFormat($prezzi_ivati ? $intervento->totale : $intervento->totale_imponibile, 2) : '-').'</span>
176+
</div>
177+
</div>
178+
179+
<div class="mb-3">
180+
<i class="fa fa-'.($insoluti ? 'warning text-danger' : 'check text-success').'"></i>
171181
'.($insoluti ? tr('Sono presenti insoluti') : tr('Non sono presenti insoluti')).'
172-
</p>
182+
</div>
173183
174-
<p><i class="fa '.(count($interventi_programmati) == 0 ? 'fa-clock-o text-success' : 'fa-clock-o text-warning').'"></i> '.(count($interventi_programmati) == 0 ? tr('Non sono presenti altre attività programmate') : tr('Attività aperte').': ');
184+
<div class="mb-3">
185+
<i class="fa '.(count($interventi_programmati) == 0 ? 'fa-clock-o text-success' : 'fa-clock-o text-warning').'"></i>
186+
'.(count($interventi_programmati) == 0 ? tr('Non sono presenti altre attività programmate') : tr('Attività aperte').': ');
175187
if (count($interventi_programmati) != 0) {
176-
echo ' <div class="readmore" data-height="50">';
188+
echo ' <div class="readmore mt-1" data-height="60">';
177189
foreach ($interventi_programmati as $intervento_programmato) {
178-
echo ' <a class="btn btn-default btn-xs" href="'.base_path().'/editor.php?id_module='.$id_module.'&id_record='.$intervento_programmato->id.'" target="_blank">'.$intervento_programmato->codice.' ('.(new Carbon($intervento_programmato->data_richiesta))->diffForHumans().')</a>';
190+
echo ' <a class="btn btn-light mr-1 mb-1 p-2" style="font-size: 10px;" href="'.base_path().'/editor.php?id_module='.$id_module.'&id_record='.$intervento_programmato->id.'" target="_blank"><i class="fa fa-calendar-check-o text-info mr-1"></i>'.$intervento_programmato->codice.' <span class="badge badge-secondary" style="font-size: 9px;">('.(new Carbon($intervento_programmato->data_richiesta))->diffForHumans().')</span></a>';
179191
}
180192
echo ' </div>';
181193
}
182194
echo '
183-
</p>';
195+
</div>';
184196
// Contratto
185197
if ($contratto) {
186198
echo '
187-
<p><i class="fa fa-book text-info"></i>
188-
'.Modules::link('Contratti', $contratto->id, tr('Contratto num. _NUM_ del _DATA_', ['_NUM_' => $contratto->numero, '_DATA_' => Translator::dateToLocale($contratto->data_bozza)]));
199+
<div class="mb-3">
200+
<i class="fa fa-book text-info"></i>
201+
'.Modules::link('Contratti', $contratto->id, tr('Contratto num. _NUM_ del _DATA_', ['_NUM_' => '<strong>'.$contratto->numero.'</strong>', '_DATA_' => Translator::dateToLocale($contratto->data_bozza)]));
189202
if ($ore_previste > 0) {
190203
echo '
191-
- '.Translator::numberToLocale($ore_erogate, 2).'/'.$ore_previste.' '.tr('ore').'<br>
192-
193-
<div class="progress" style="margin:0; height:8px;">
194-
<div class="progress-bar progress-bar-'.$color.'" style="width:'.$perc_ore.'%"></div>
204+
<div class="mt-1">
205+
<span class="badge badge-light">'.Translator::numberToLocale($ore_erogate, 2).'/'.$ore_previste.' '.tr('ore').'</span>
206+
<div class="progress mt-1" style="height:6px; border-radius:3px;">
207+
<div class="progress-bar bg-'.$color.'" style="width:'.$perc_ore.'%"></div>
208+
</div>
195209
</div>';
196210
}
197211
echo '
198-
</p>';
212+
</div>';
199213
}
200214

201215
// Preventivo
202216
if ($preventivo) {
203217
echo '
204-
<p><i class="fa fa-book text-info"></i>
205-
'.Modules::link('Preventivi', $preventivo->id, tr('Preventivo num. _NUM_ del _DATA_', ['_NUM_' => $preventivo->numero, '_DATA_' => Translator::dateToLocale($preventivo->data_bozza)])).'
206-
</p>';
218+
<div class="mb-3">
219+
<i class="fa fa-file-text-o text-info"></i>
220+
'.Modules::link('Preventivi', $preventivo->id, tr('Preventivo num. _NUM_ del _DATA_', ['_NUM_' => '<strong>'.$preventivo->numero.'</strong>', '_DATA_' => Translator::dateToLocale($preventivo->data_bozza)])).'
221+
</div>';
207222
}
208223

209224
// Ordine
210225
if ($ordine) {
211226
echo '
212-
<p><i class="fa fa-book text-info"></i>
213-
'.Modules::link('Ordini cliente', $ordine->id, tr('Ordine num. _NUM_ del _DATA_', ['_NUM_' => $ordine->numero_esterno, '_DATA_' => Translator::dateToLocale($ordine->data)])).'
214-
</p>';
227+
<div class="mb-3">
228+
<i class="fa fa-shopping-cart text-info"></i>
229+
'.Modules::link('Ordini cliente', $ordine->id, tr('Ordine num. _NUM_ del _DATA_', ['_NUM_' => '<strong>'.$ordine->numero_esterno.'</strong>', '_DATA_' => Translator::dateToLocale($ordine->data)])).'
230+
</div>';
215231
}
216-
echo '
232+
echo '
217233
</div>
218234
</div>
219235
</div>';
@@ -230,62 +246,67 @@
230246

231247
echo '
232248
<div class="col-md-4">
233-
<div class="card card-info card-outline shadow">
249+
<div class="card card-success card-outline shadow">
234250
<div class="card-header">
235-
<h3 class="card-title"><i class="fa fa-map"></i> '.tr('Geolocalizzazione').'</h3>
251+
<h3 class="card-title text-success"><i class="fa fa-map"></i> '.tr('Geolocalizzazione').'</h3>
236252
</div>
237253
<div class="card-body">';
238254

239255
if (!empty($sede_cliente->gaddress) || (!empty($sede_cliente->lat) && !empty($sede_cliente->lng))) {
240256
echo '
241-
<div id="map-edit" style="width: 100%;"></div>
257+
<div id="map-edit" style="width: 100%; min-height: 150px; border-radius: 4px; border: 1px solid #eee;"></div>
242258
243259
<div class="clearfix"></div>
244-
<br>
245-
246-
<div class="row">
247-
<div class="col-md-6">';
260+
<div class="mt-3">
261+
<div class="row">
262+
<div class="col-md-6 mb-2">';
248263
// Navigazione diretta verso l'indirizzo
249264
echo '
250-
<button class="btn btn-xs btn-default btn-block" onclick="caricaMappa();">
251-
<div class="load"><i class="fa fa-compass"></i> '.tr('Carica mappa').'</div>
252-
<a class="go-to hidden" href="geo://'.$sede['lat'].','.$sede['lng'].'"><i class="fa fa-map"></i> '.tr('Apri mappa').'</a>
253-
</button>
254-
</div>
255-
256-
<div class="col-md-6">';
265+
<button class="btn btn-light btn-sm btn-block" onclick="caricaMappa();">
266+
<div class="load"><i class="fa fa-compass text-success"></i> '.tr('Carica mappa').'</div>
267+
<a class="go-to hidden" href="geo://'.$sede['lat'].','.$sede['lng'].'"><i class="fa fa-map text-success"></i> '.tr('Apri mappa').'</a>
268+
</button>
269+
</div>
270+
271+
<div class="col-md-6 mb-2">';
257272
// Navigazione diretta verso l'indirizzo
258273
echo '
259-
<a class="btn btn-xs btn-default btn-block" onclick="calcolaPercorso()">
260-
<i class="fa fa-map-signs"></i> '.tr('Calcola percorso').'
261-
</a>
274+
<a class="btn btn-light btn-sm btn-block" onclick="calcolaPercorso()">
275+
<i class="fa fa-map-signs text-success"></i> '.tr('Calcola percorso').'
276+
</a>
277+
</div>
262278
</div>
263279
</div>';
264280
} else {
265281
echo '
282+
<div class="alert alert-light text-center mb-3">
283+
<i class="fa fa-map-o fa-3x text-muted mb-2"></i>
284+
<p class="text-muted">'.tr('Nessuna mappa disponibile').'</p>
285+
</div>
286+
266287
<div class="row">
267-
<div class="col-md-6">';
288+
<div class="col-md-6 mb-2">';
268289
// Navigazione diretta verso l'indirizzo
269290
echo '
270-
<a class="btn btn-xs btn-default btn-block" onclick="calcolaPercorso()">
271-
<i class="fa fa-map-signs"></i> '.tr('Calcola percorso').'
291+
<a class="btn btn-light btn-sm btn-block" onclick="calcolaPercorso()">
292+
<i class="fa fa-map-signs text-success"></i> '.tr('Calcola percorso').'
272293
</a>
273294
</div>
274295
275-
<div class="col-md-6">';
296+
<div class="col-md-6 mb-2">';
276297
// Ricerca diretta su Mappa
277298
echo '
278-
<a class="btn btn-xs btn-default btn-block" onclick="cercaOpenStreetMap()">
279-
<i class="fa fa-map-marker"></i> '.tr('Cerca su Mappa').'
299+
<a class="btn btn-light btn-sm btn-block" onclick="cercaOpenStreetMap()">
300+
<i class="fa fa-map-marker text-success"></i> '.tr('Cerca su Mappa').'
280301
</a>
281302
</div>
282303
</div>';
283304
}
284305

285-
echo '
306+
echo '
286307
</div>
287308
</div>
288-
</div>
309+
</div>
289310
</div>
290311
291312
<script>
@@ -352,18 +373,19 @@ function caricaMappa() {
352373
const $map_container = $(".module-header:visible .card").eq(2);
353374
354375
// Ingrandimento area mappa
355-
$map_container.css("height", "300px");
376+
$map_container.css("height", "320px");
356377
alignMaxHeight(".module-header .card");
357-
$("#map-edit").css("height", "80%");
378+
$("#map-edit").css("height", "85%");
379+
$("#map-edit").css("border", "none");
358380
359381
$map_container.find(".load").addClass("hidden");
360382
$map_container.find(".go-to").removeClass("hidden");
361383
362384
const lat = parseFloat("'.$sede_cliente->lat.'");
363385
const lng = parseFloat("'.$sede_cliente->lng.'");
364-
365-
var container = L.DomUtil.get("map-edit");
366-
if(container._leaflet_id != null){
386+
387+
var container = L.DomUtil.get("map-edit");
388+
if(container._leaflet_id != null){
367389
map.eachLayer(function (layer) {
368390
if(layer instanceof L.Marker) {
369391
map.removeLayer(layer);
@@ -388,9 +410,9 @@ function caricaMappa() {
388410
L.tileLayer("'.setting('Tile server OpenStreetMap').'", {
389411
maxZoom: 17,
390412
attribution: "© OpenStreetMap"
391-
}).addTo(map);
413+
}).addTo(map);
392414
}
393-
415+
394416
var icon = new L.Icon({
395417
iconUrl: globals.rootdir + "/assets/dist/img/marker-icon.png",
396418
shadowUrl:globals.rootdir + "/assets/dist/img/leaflet/marker-shadow.png",
@@ -403,7 +425,7 @@ function caricaMappa() {
403425
var marker = L.marker([lat, lng], {
404426
icon: icon
405427
}).addTo(map);
406-
428+
407429
map.setView([lat, lng], 10);
408430
}
409431
</script>';

0 commit comments

Comments
 (0)