Definování notifikace

Definování notifikace.markdown

Definování notifikace

odeslání notifikace - samostná šablona e-mailu se definuje samostatně.

Forked from Tomáš Tintěra's Pen Definování notifikace.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<div class="container" >
  <form class="form-horizontal" role="form">
  <div class="row">
    <div class="col-md-2 border nazvyPoli" style="margin-top: 30px;">Název:</div>
    <div class="col-md-4 border nazevOblasti">
      <h1>Úkoly na dnes</h1>
    </div>
    <div class="col-md-4 border">    
      <br />
      <div class="radio activeTop">
        <label><input type="radio" name="active" value="active" checked />aktivní</label>
      </div>
      <div class="radio" style="margin-bottom: 10px;"><!--zdá se, že běžný dolní margin se neuplatňuje u .radio ve .form-iniline-->
        <label><input type="radio" name="active" value="deactivated" />deaktivovaná</label>
      </div>
      <a href="#" class="btn_delete btn btn-xs btn-default" data-toggle="modal" data-target="#deleteUserModal"><span class="fa fa-times"></span> smazat</a>
    </div><!-- /col -->
    <div class="col-md-2 border" style="text-align:right">
      <a href="#" class="activeTop btn btn-sm btn-default"><span class="fa fa-files-o"></span> použít jako vzor</a>
    </div><!-- /col -->
  </div><!-- /row -->
  <hr />
  <div class="form-group">
    <label for="usage" class="col-md-2 control-label">Použití:</label>
    <div class="col-md-10 border">
      <select id="usage" class="form-control">
        <option value="select">-- vyberte --</option>
        <option value="notification">Notifikace</option>
        <option value="escalation">Eskalace</option>
        <option value="summary">Souhrn</option>
      </select>
    </div>
  </div>
  <hr />
  <h3>O čem:</h3>
  <div class="form-group">
    <label for="filterName" class="col-md-2 control-label">Filtr:</label>
    <div class="col-md-4 border top">
      <select id="filterName" class="form-control chosen-select top">
        <option>--- vyberte ---</option>
        <option>Přiděleno mně</option>
        <option>Zadal jsem</option>
        <option>Oblast: Opravy HW</option>
        <option>Oblast: Poruchy mobilních pokladen</option>
        <option>Oblast: opravy IS</option>
        <option>Ve zpoždění</option>
        <option>Nepřevzaté helpdesky</option>
      </select>
    </div>
    <div class="col-md-6 border">
      <div class="input-group">
        <input class="form-control" placeholder="doplňující podmínka (nepovinné)" />
        <div class="input-group-addon"><i class="fa fa-angle-double-down"></i></div>
      </div>
    </div>
  </div>
  <hr />
  <h3>Adresáti:</h3>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Komu:</div>
    <div class="col-md-10 border top">
      <select data-placeholder="odeslat e-mail" class="form-control chosen-select" multiple>
        <optgroup label="role v požadavku">
          <option selected>Zadavatel požadavku</option>
          <option>Zadavatel helpdesku - zákazník</option>
          <option selected>Přidělený řešitel požadavku</option>
          <option selected>Spolurešitelé požadavku</option>
        </optgroup>
        <optgroup label="Konkrétní osobě">
          <option> Milan Janeček <span class="email">&lt;janecek.m@cooper.cz&gt;</span></option>
          <option> Radek Strnad <span class="email">&lt;strnad.r@cooper.cz&gt;</span></option>
          <option> Jiří Černý <span class="email">&lt;cerny.j@cooper.cz&gt;</span></option>
          <option> Stephen Ball <span class="email">&lt;ball.s@cooper.com&gt;</span></option>
        </optgroup>
        <optgroup label="Countries">
          <option>V.I.P</option>
          <option>Cooper</option>
        </optgroup>
        <optgroup label="Teams">
          <option>Sales</option>
          <option>Back Office</option>
          <option>Production</option>
          <option> SAP</option>
          <option> IT</option>
          <option> IT_network_admins</option>
          <option> IT_SW_developers</option>
        </optgroup>
        <optgroup label="Countries">
          <option> Germany</option>
          <option> Poland</option>
          <option> Czech</option>
          <option> Slovakia</option>
          <option> Hungary</option>
          <option> Rumania</option>
        </optgroup>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Kopie:</div>
    <div class="col-md-10 border middle">
      <input class="form-control jakoSelectbox" placeholder="možnost přidávat adresy jako v poli komu" />
    </div>
  </div>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Skrytá kopie:</div>
    <div class="col-md-10 border bottom">
      <input class="form-control jakoSelectbox" placeholder="možnost přidávat adresy jako v poli komu" />
    </div>
  </div>
  <div class="row">
    <br />
    <div class="col-md-2 border nazvyPoli"></div>
    <div class="col-md-10 border">
      <label><input type="checkbox" checked> Neposílat autorovi změny.</label>
    </div>
  </div>
  <hr />
  <h3>Časování:</h3>
  <div class="row">
    <br />
    <div class="col-md-2 border nazvyPoli">Frekvence:</div>
    <div class="col-md-10 border">
      <select class="form-control">
        <option value="select">-- vyberte --</option>
        <option value="daily">Denně</option>
        <option value="monthly">Měsíčně</option>
        <option value="yearly">Ročně</option>
      </select>
    </div>
  </div>
  <div class="row">
    <br />
    <div class="col-md-2 border" style="text-align:right">Ve dnech:</div>
    <div class="col-md-10 border">
      <label class="weekday"><input type="checkbox" checked> Pondělí</label>
      <label class="weekday"><input type="checkbox" checked> Úterý</label>
      <label class="weekday"><input type="checkbox" checked> Středa</label>
      <label class="weekday"><input type="checkbox" checked> Čtvrtek</label>
      <label class="weekday"><input type="checkbox" checked> Pátek</label>
      <label class="weekday"><input type="checkbox"> Sobota</label>
      <label class="weekday"><input type="checkbox"> Neděle</label>
      <br /><label class="weekday"><input type="checkbox" checked> Neposílat ve svátek</label>
    </div>
  </div>
  <div class="row">
    <br />
    <div class="col-md-2 border nazvyPoli">
      <span class="yearly">Dne:</span>
      <span class="monthly">Den v měsíci:</span>
      <span class="daily">V:</span>
    </div>
    <br />
    <div class="col-md-2 border monthly yearly">
      <input class="form-control" value="--"/>
      <button class="btn btn-default btn-small timeButton"><i class="icon-calendar"></i></button>
    </div>
    <div class="col-md-1 nazvyPoli border monthly yearly monthly">V:</div>
    <div class="col-md-2 border">
      <input class="form-control" value="8:00"/>
      <button class="btn btn-default btn-small timeButton"><i class="icon-time"></i></button>
    </div>
    <div class="col-md-5 border dodatek">hodin</div>
  </div><!-- /row -->
  <div class="row">
    <div class="col-md-4">
      <br />
      <a href="#" class="btn btn-default btn-sm" style="float:right"><span class="fa fa-plus"></span> přidat další</a>
      <!-- přidává další řádek, obsahují buď datum a čas nebo jen čas -->
<!--  --  zobrazené prvky pro jednotlivé frekvence:
      -- denně: ve dnech, čas
      -- měsíčně: den v měsíci (text, není v návrhu), čas
      -- ročně: datum, čas
-->      
    </div>
  </div>
  <hr />
  <h3>Typ zprávy:</h3>
  <div class="row">
    <div class="col-md-2 border nazvyPoli">Šablona zprávy:</div>
    <div class="col-md-10 border bottom">
      <select class="form-control chosen-select top">
        <option>--- vyberte ---</option>
        <option>--- vytvořit novou šablonu ---</option>
        <option>Helpesk notifikace</option>
        <option>Stadardní řešitelská notifikace</option>
        <option>Urgentní řešitelská notifikace</option>
        <option>SMS</option>
        <option>Urgentní SMS</option>
        <option>Seznam požadavků</option>
      </select>
    </div>
  </div>
  </form>
  <hr />
  <br />
  <br />
  <br />
  <br />
</div>
<div class="pageComments">
<ul>
  <li><b>Novinky:</b></li>
  <li>23. 6. 2015: JK, TT: Checkbox pod adresami změněn na "Neposílat autorovi změny". Motivace: Je potřeba vytvořit poděkování za zadání požadavku. Nově řešeno rolí "Customer" a nezaškrtnutím. Tak bude fungovat správně i při zadání v zastoupení. Posílat vždy autorovi lze rolí autor (kterou přidáme, když bude potřeba).</li>
  <li>Nová: zaškrtnutá volba 'neposílat' odebere autora (pokud byla v adresátech). Pokud není zaškrtnuto, žádná adresa se neodebírá ani nepřidává.
    <br />Původní volbu "Odeslat změny autorovi" včetně logiky ruším.</li>
  <li>Pokud bude stejná osoba (například vlivem štítků) ve více řádcích, ponechá se vždy v nejvyšším. Motivace: například na seznam se takový e-mail doručí vícekrát. Diskutováno v <a href="https://www.taskpool.net/showJob.do?id=258410">https://www.taskpool.net/showJob.do?id=258410</a></li>
  <li>7. 9. 2014: Změněna ikona stavby filtu z lupy na hledání na trojtečku (elipsis)</li>
  <li>V měněném místě vyčištěn HTML kód, použito inline-form a input-group.</li>
  <li>Přetextována jedna volba na "Posílat i autorovi změny."</li>
  <li>Sobota a neděle nejsou ve výchozím stavy zaškrtnuté.</li>
  <li>Přidána ikona použít jako vzor.</li>
  <li>Přidáno tlačítko smazat.</li>
  <li>4. 9. 2014: Přidána volba neposílat ve svátek.</li>
</ul>  
  <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 elektronickou verzi v Pdf nebo XML.</li>
    <li>Zvětšivání a zmenšování stánky neprobízá vždy správně</li>
    <li>Při šířkách stránky pod cca 992px jsou například názvy polí nesprávně zarovnané.</li>
    <li><b>Poznámky k implementaci:</b></li>
    <li>Některá pole se objeví až po výběru z příslušného selectboxu. V HTML kódu je to označeno pomocí .class, JS není doplněn.</li>
    <li>Po výběru v selectboxu použití se teprve objeví zbytek stránky pod ním.</li>
    <li>Stánku zobrazit po výběru v selectboxu použití. Checkbox neposílat původci akce se zobrazuje pouze u notifikace. Eskalace a přehled jej nemají.</li>
    <li>E-mail posílat na jméno osoby (Milan Janeček &lt;janecek.m@cooper.cz> a ne jen janecek.m@cooper.cz). U požadavku zadaného e-mailem budeme jméno záskávat z obdrženého e-mailu.</li>
    <li>Štítky mohou mít jak společnosti, tak zákazníci ve společnostech, tak řešitelé. Pak jsou speciální štítky na role v tomto požadavku. Viz návrh v poli "Komu".</li>
    <li>Vyhodnocení příjemců podle štítků platí pro všechny osoby. Tedy řešitele, členy společnosti i jednotlivé kontakty, které ten štítek mají.</li>
    <li><strike>Volba "Odeslat změny autorovi": Pokud není zaškrtnutá, odebírá ho to ze seznamů; když je zaškrtnutá, do seznamu ho přidá. Předpokládám, že bude většinou vypnutá. Hlavní přínos je při testování novým zájemcem o TP, kdy byde autor změny zároveň třeba jediným uživatelem.</strike> 23.&nbsp;6.&nbsp;2015: Když vidím hotovou aplikaci, je jasné, že k testování má nový řešitel jiné věci a starosti. Notifikace navíc by ho mátly, proto tento požadavek ruším.</li>
  </ul>
</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]);
    }

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://demo.taskpool.net/getUserFile?customerId=377&filename=chosen.jquery.js"></script>

style.css

.activeTop { margin-top: 20px; }
.btn_delete:hover {
    color: #FFF;
    background-color: #D9534F;
    border-color: #D43F3A;
}
.weekday { margin-right: 1.25em; }
label { font-weight: normal; }
.top ul.chosen-choices { 
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important; 
}
.middle input { border-radius: 0; }
.bottom input {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important; 
}
input.jakoSelectbox { height: 43px; }
.loupe, .timeButton { position:absolute; right: 1.1em; top: 0; border-bottom-left-radius: 0; border-top-left-radius: 0}
.border { border: 0px solid lightgray; }
.enterprise { display: none; }
textarea.licenceFile { height: 10em; }
hr.noBottom { margin-bottom: 0px; }
.nazvyPoli { text-align: right;  margin-top: 10px; }
.nazvypoli, .dodatek { margin-top: 10px; }
body { background-color: #F9F9FF; color: #222; }

/*---------------------------------------*/
select.form-control + .chosen-container.chosen-container-single .chosen-single {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-image:none;
}

select.form-control + .chosen-container.chosen-container-single .chosen-single div {
    top:4px;
    color:#000;
}

select.form-control + .chosen-container .chosen-drop {
    background-color: #FFF;
    border: 1px solid #CCC;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    margin: 2px 0 0;

}

select.form-control + .chosen-container .chosen-search input[type=text] {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container .chosen-results {
    margin: 2px 0 0;
    padding: 5px 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    margin-bottom: 5px;
}

select.form-control + .chosen-container .chosen-results li , 
select.form-control + .chosen-container .chosen-results li.active-result {
    display: block;
    padding: 3px 40px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
    background-image:none;
}
select.form-control + .chosen-container .chosen-results li.group-result {
  padding: 3px 20px;
  font-weight: bold;
} 


select.form-control + .chosen-container .chosen-results li:hover, 
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
    color: #FFF;
    text-decoration: none;
    background-color: #428BCA;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 6px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height:auto;
    padding:5px 0;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice {

    background-image: none;
    padding: 3px 24px 3px 5px;
    margin: 0 6px 0 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background-color: #FFF;
    border-color: #CCC;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top:8px;
    right:6px;
}

select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus{
    border-color: #66AFE9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}

select.form-control + .chosen-container-multi .chosen-results li.result-selected{
    display: list-item;
    color: #ccc;
    cursor: default;
    background-color: white;
}

styles

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="//codepen.io/tintera/pen/0dde25ffff403bfaac1c45cc0ecb5b25" rel="stylesheet" />