Editace oblasti

Editace-oblasti.markdown

Editace oblasti

25. 3. • nastavení číslování požadavků

A Pen by Tomáš Tintěra on CodePen.

License.

index.html

<div class="container" >
  <div class="row">
    <div class="col-md-2 border nazvyPoli" style="margin-top: 36px;">Oblast:</div>    
    <div class="col-md-7 border nazevOblasti">    
      <h1>Poruchy vybavení vozidel</h1>
    </div>    
    <div class="col-md-2 border">    
      <div class="radio">
        <label><input type="radio" name="active" value="active" checked />aktivní</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="active" value="deactivated" />deaktivovaná</label>
      </div>
    </div><!-- /.col -->
    <div class="col-md-1">
      <br />
      <a href="#" class="btn_delete btn btn-xs btn-default" data-toggle="modal" data-target="#deletePoolModal"><span class="fa fa-times"></span> smazat</a>
    </div><!-- /.col -->
  </div><!-- /.row -->
  <div class="row">
    <div class="col-md-2 border nazvyPoli">ID:</div>    
    <div class="col-md-10 border">
      <input class="form-control" value="Poruchy_vybaveni_vozidel" /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Typ:</div>    
    <div class="col-md-10 border">
      <div class="radio">
        <label><input type="radio" name="active" value="active" checked />helpdesk</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="active" value="deactivated" />interní</label>
      </div>
    </div>
  </div>
  <hr class="noBottom" />
  <div class="row border">
    <div class="col-md-10 border"><h3>Vlastnosti oblasti</h3></div>
    <div class="col-md-2 border enterprise">
      <button class="btn btn-info btn-mini kod"><i class="icon-cogs"></i> Vlastní kód</button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Použité volitelné stavy:</div>
    <div class="col-md-10 border">    
      <select data-placeholder="Použít vybrané volitelné stavy." class="form-control chosen-select" multiple>
        <option selected>Přiděleno</option>
        <option selected>Subdodávka</option>
        <option selected>Výstupní kontrola</option>
        <option selected>Dokončení</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Vlastní pole:</div>    
    <div class="col-md-10 border">    
      <select data-placeholder="Použít v této oblasti vybraná vlastní pole ..." class="form-control chosen-select" multiple>
        <option selected>Sériové číslo</option>
        <option selected>Předmět</option>
        <option>Verze Firmwaru</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Dílčí úkoly dovoleno dávat do:</div>    
    <div class="col-md-10 border">    
      <select data-placeholder="Dílčí úkoly je dovoleno dávat do vybraných oblastí. (Prázdné pole = nedělit úkoly)" class="form-control chosen-select" multiple>
        <option selected>Servis HW</option>
        <option selected>Mobilní firmware</option>
        <option>Vývoj DB a IS</option>
      </select>
    </div>
  </div>
  <br />
  <div class="row">
    <span class="col-md-4 col-md-offset-6">Kdo je oprávněn k dané činnosti?</span>
    <span class="col-md-2">Výchozí priorita</span>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Priority a oprávnění:</div>    
    <div class="col-md-4 border">    
      <select data-placeholder="Nastavit možné priority ..." class="form-control chosen-select" multiple>
        <option selected>Kritická</option>
        <option>Vysoká</option>
        <option>Běžná<option>
        <option>Nízká<option>
        <option>Nezadáno<option>
      </select>
    </div>
    <div class="col-md-4 border">
      <select data-placeholder="Kdo tuto prioritu může nastavit ..." class="form-control chosen-select" multiple>
        <option selected>V.I.P.</option>
        <option>Selected</option>
        <option>Firma A<option>
        <option>Zaměstnanci<option>
      </select>
    </div><!-- /col -->
    <div class="col-md-2 border">
      <select data-placeholder="Pokud chybí oprávnění, je výchozí priorita nezadáno." class="form-control chosen-select">
        <option>Kritická</option>
        <option>Vysoká<option>
        <option>Běžná<option>
        <option>Nízká<option>
        <option selected>Nezadáno</option>
      </select>
    </div><!-- /col -->
  </div><!-- /row -->
  <div class="row">
    <div class="col-md-2 border nazvyPoli"></div>    
    <div class="col-md-4 border">    
      <select data-placeholder="Nastavit možné priority ..." class="form-control chosen-select" multiple>
        <option selected>Vysoká</option>
        <option selected>Běžná<option>
        <option selected>Nízká<option>
        <option selected>Nezadáno</option>
      </select>
      <a href="#" style="float:right">přidat další</a>
      <a href="#odebratJednuPrioritu">smazat jeden řádek</a>
    </div>
    <div class="col-md-4 border">
      <select data-placeholder="Kdo tuto prioritu může nastavit ..." class="form-control chosen-select" multiple>
        <option>V.I.P.</option>
        <option>Selected</option>
        <option selected>Firma A<option>
        <option selected>Zaměstnanci<option>
      </select>
    </div><!-- /col -->   
  </div><!-- /row -->
  <br />
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Nastavení ceny:</div>    
    <div class="col-md-4 border">    
      <select class="form-control">
        <optgroup label="Tato funkce je:">
          <option selected>neaktivní</option>
        </optgroup>
        <optgroup label="Aktivní pro stavy:">
          <option>před zpracováním</option>
          <option>do výstupní kontroly (včetně)</option>
          <option>do schválení</option>
        <optgroup>
      </select>
    </div>
    <div class="col-md-6 border">
      <input class="form-control" value="Kdo může stanovit a upravit cenu viditelnou protistraně." />
    </div>    
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Nastavení termínu:</div>    
    <div class="col-md-4 border">    
      <select class="form-control">
        <optgroup label="Tato funkce je:">
          <option selected>datum nezobrazovat</option>
        </optgroup>
        <optgroup label="Aktivní pro stavy:">
          <option>před zpracováním</option>
          <option>do výstupní kontroly (včetně)</option>
          <option>do schválení</option>
        <optgroup>
      </select>
      <br />
    </div>
    <div class="col-md-6 border">
      <input class="form-control" value="Kdo může stanovit termín" />
    </div>    
  </div>
  <div class="row">
    <div class="col-md-4 col-md-offset-2">předčíslí:</div>
    <div class="col-md-6">start číselné řady od:</div>
  </div>
  <div class="row professional">
    <div class="col-md-2 border nazvyPoli">Číslování požadavků: <small>(předčíslí, číslovat od:)</small></div>
    <div class="col-md-4 border">
      <input class="form-control" value="Předčíslí (nepovinné, 1-9, a-ž, A-Ž, _-])" /> 
    </div>
    <div class="col-md-6 border">
      <input class="form-control" value="Číslovat od (výchozí hodnota: 1001)" /> 
    </div>
  </div>
  <div class="row enterprise">
    <div class="col-md-2 border nazvyPoli">Číslování požadavků: <small>(předčíslí, fukce pro získání následujícího ID:)</small></div>
    <div class="col-md-4 border">
      <input class="form-control" value="Předčíslí (nepovinné, 1-9, a-ž, A-Ž, _-])" /> 
    </div>
    <div class="col-md-3 border">
      <select class="form-control">
        <optgroup label="Zabudované:">
          <option>globální</option>
          <option selected>vlastní řada (výchozí)</option>
        </optgroup>
        <optgroup label="Vlastní:">
          <option>Copper servis</option>
          <option>Coper IS</option>
          <option>My bugtrack numbers</option>
        <optgroup>
      </select>

    </div>
    <div class="col-md-3 border">
      <input class="form-control" value="Číslovat od (výchozí hodnota: 1001)" /> 
    </div>
  </div>

  <hr class="noBottom" />
  <div class="row border">
    <div class="col-md-10 border"><h3>Oprávnění k požadavkům</h3></div>
    <div class="col-md-2 border enterprise">
      <button class="btn btn-info btn-mini kod"><i class="icon-cogs"></i> Vlastní kód</button>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Zakládat nové:</div>
    <div class="col-md-10 border">
      <input class="form-control" value="štítky pro: zadavatel, konkrétní osoby, štítky interních osob, štítky zákazníků (platí pouze uvnitř firmy)" /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Vidět vše v oblasti:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Být řešitelem:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Výstupní kontrola:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Schvalování:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Deaktivace:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <br /><br />
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Posuzovat zadané:</div>
    <div class="col-md-10 border">
      <input class="form-control" value="konkrétní interní osoby, štítky interních osob" /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Přebírat nové:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Přidělovat nové:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Přidělovat své:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">přidělovat vše:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <br />
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Vytvořit pravidelně opakovaný požadavek:</div>
    <div class="col-md-10 border">
      <input class="form-control" value='"' /> 
    </div>
  </div>
  <hr />
  <br />
</div><!-- container -->
<div style="display:2none; background-color:silver; padding:0.25em 1em; margin-bottom:2em;">
  <ul>
    <li><b>Obecné poznámky:</b></li>
    <li>Stánku je možno vytiskount najednou a přiložit do firemní dokumentace procesů. Stejně tak její XML reprezentaci.</li>
    <li>Zvětšování a zmenšování šířky stránky neprobíhá vždy správně responzivně.</li>
    <li>Při šířkách stránky pod cca 992px jsou například názvy polí nesprávně zarovnané.</li>
  </ul>
  <ul>    
    <li><b>Poznámky k implementaci:</b></li>
    <li>Vazba typu link vzniká uvedením čísla požadavku do popisu nebo komentáře požadavku (v popisu povolena není). Viz. <a href=" https://gandalf.comarr.cz/taskpool/doku.php?id=tp3:navrhy&#pracoviste">popis pracoviště v naší wiki.</a></li>
    <li>Dílčí úkoly - jednotlivé štítky mají barvu své oblasti.</li>
    <li>Nastavení barvy oblasti - je součástí editace názvu. Doplníme dle vzhledu pracoviště. Pro 3.0 nebude zavedeno.</li>
    <li>Předmět a popis požadavku mohou měnit interní (řešitelská strana) vidící daný požadavek.</li>
    <li>Mezi řádky oprávnění lze přecházet kurzorovými klávesami nahoru a dolů.</li>
    <li>Editor štítků je jen demo, předpokládám v něm další funkčnost.</li>
    <li>SLA v 3.0 nebude</li>
    <li>Zápis odpracovaného času ve 3.0 nebude</li>
    <li>Pánování bude zřejmě řešeno vazbou na externí plánovací SW</li>
    <li>Načítání e-mailů je řešeno samostatně.</li>
    <li>Pro zobrazení vzhledu enterprise edice odebarte display:none u css třídy enterprise</li>
    <li>XML export nemá GUI. Probíhá automaticky před použitím výsledku.Pokud by selhal, není dovoleno výsledek uložit.</li>
    <li>Číslování/ID požadavků - pro různá předčíslí existují vlastní číselné řady. Mohu být společné pro několik oblastí. Vždy se přiřazuje nejnižší možné číslo. max(cislovatOd, jizPridelene+1). Pokud uživatel v číslovat od nastavil příliš nízké číslo, zobrazit varování.<br />
      Číselné řady v enterprise pak umožňují číslovat splečně s jiným systémem nebo například použít v rámci generování číslo související výdejky/faktury, inventární číslo výrobku. datum či den v týdnu.</li>
  </ul>
  <ul>    
    <li><b>Design TODO:</b> - </li>
    <li>Tlačítko uložít/použít.</li>
  </ul>
  <!--
  <div class="btn-group" data-toggle="buttons-radio">
    <button class="btn btn-mini active"><i class="icon-key icon-rotate-180"></i> Zobrazit business verzi</button>
    <button class="btn btn-mini"><i class="icon-key icon-rotate-180"></i> Zobrazit enterprise verzi</button>
  </div>
  -->
</div>

script.js

$(".chosen-select").chosen();

var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'hledaný text nenalezen!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }

style.css

.btn_delete:hover {
    color: #FFF;
    background-color: #D9534F;
    border-color: #D43F3A;
}

.border { border: 0px solid lightgray; }

.enterprise { display: none; }
.proffessional { display: yes; }

hr.noBottom { margin-bottom: 0px; }
.kod { float: right; margin-top: 15px; }
.nazvyPoli { text-align: right; margin-top: 10px;}
body { background-color: #F9F9FF; color: #222; }