Strategimal - Live Demo

Eksterne muligheter

0
Vekttall:
Relaterte målsetninger - Derfor skal vi...

Eksterne trusler

Interne muligheter

Interne trusler

Målsetninger

0
0
Måltall Enhet Tidsplan
Situasjonskriterier - Vi gjør dette fordi...
Relaterte handlinger - For å nå dette skal vi...

Handlingsplan

0
Utføres av Innen Status
Relaterte målsetninger - Dette gjør vi fordi...

× Configure 

<p data-func="input" data-name="Beskrivelse" data-placeholder="Definer overordnet situasjon som vurderes her ..."></p>
<section class="row">
    <div class="col-sm-4 situasjon">
        <h3>
            <span class="btn-group btn-group-lg btn-group-justified">
                <a class="btn btn-success" style="width:auto" data-action="add" data-target="Situasjoner" data-type="Situasjon" data-variant="Item" data-toggle="tooltip" data-placement="top" title="Det gir en mulighet at ...">Eksterne muligheter</a>
                <a class="btn btn-success" style="width:3em" data-action="add" data-glyphicon="chevron-down" data-target="Situasjoner" data-type="Situasjon" data-variant="Group" data-toggle="tooltip" data-placement="top" title="Legg inn gruppe ..."></a>
            </span>
        </h3>
        <div data-array="Situasjoner" data-placeholder="Ingen elementer i listen" data-type="Situasjon" data-remove="1">
            <div data-variant="Item">
                <div class="panel panel-default sit">
                    <div class="pull-right">
                        <span class="label label-default counter" data-field="Maal" style="position:relative;left:0.5em;top:-0.5em;" data-action="sort" data-glyphicon="">0</span>
                    </div>
                    <div class="panel-heading" data-func="input" data-deleteempty="1" data-name="Tittel" data-placeholder="Fyll inn situasjon ..."></div>
                    <div data-func="popoverbar" data-target="ItemToolbar">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <td colspan="2" class="small text-primary" data-func="input" data-name="Detaljer" data-placeholder="Fyll inn evt. detaljer"></td>
                                </tr>
                                <tr>
                                    <th class="small text-muted">Vekttall:</th>
                                    <td class="small text-primary" title="Gi situasjonskriteriet vekt etter sin tyngde i vurderingen" style="width:100%" data-func="input" data-name="Vekttall" data-placeholder="Fyll inn tall"></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="text-muted">
                            <strong>Relaterte målsetninger</strong><small> - Derfor skal vi...</small><span class="pull-right glyphicon glyphicon-chevron-right"></span>
                            <select multiple type="text" name="Maal" data-action="link" data-container="section" data-target="Maalsetninger" data-labelfield="Tittel" data-idfield="id" data-linkbackfield="Kriterier"></select>
                        </div>
                    </div>
                    <input type="hidden" name="id" data-func="guid" />
                </div>
            </div>
            <div data-variant="Group">
                <div class="panel panel-default active">
                    <div class="pull-right">
                        <span class="label label-default" style="position:relative;left:0.5em;top:-0.5em;" data-action="sort" data-glyphicon="plus"></span>
                    </div>
                    <div class="panel-heading" style="font-weight:bold" data-func="input" data-deleteempty="1" data-name="Tittel" data-placeholder="Fyll inn gruppenavn ..."></div>
                    <div class="panel-body" data-array="Subitems" data-type="Situasjon" data-template="Situasjoner" data-placeholder="Ingen elementer i gruppen"></div>
                    <div data-func="popoverbar" data-target="ItemToolbar"></div>
                </div>
            </div>
        </div>
        <h3>
            <span class="btn-group btn-group-lg btn-group-justified">
                <a class="btn btn-warning" style="width:auto" data-action="add" data-target="Situasjoner2" data-variant="Item" data-toggle="tooltip" data-placement="top" title="Det kan være en trussel at ...">Eksterne trusler</a>
                <a class="btn btn-warning" style="width:3em" data-action="add" data-glyphicon="chevron-down" data-target="Situasjoner2" data-type="Situasjon" data-variant="Group" data-toggle="tooltip" data-placement="top" title="Legg inn gruppe ..."></a>
            </span>
            
        </h3>
        <div data-array="Situasjoner2" data-type="Situasjon" data-template="Situasjoner" data-placeholder="Ingen elementer i listen"></div>

        <h3>
            <span class="btn-group btn-group-lg btn-group-justified">
                <a class="btn btn-success" style="width:auto" data-action="add" data-target="Situasjoner3" data-variant="Item" data-toggle="tooltip" data-placement="top" title="Vi kan utnytte situasjonen fordi ...">Interne muligheter</a>
                <a class="btn btn-success" style="width:3em" data-action="add" data-glyphicon="chevron-down" data-target="Situasjoner3" data-type="Situasjon" data-variant="Group" data-toggle="tooltip" data-placement="top" title="Legg inn gruppe ..."></a>
            </span>
        </h3>
        <div data-array="Situasjoner3" data-type="Situasjon" data-template="Situasjoner" data-placeholder="Ingen elementer i listen"></div>

        <h3>
            <span class="btn-group btn-group-lg btn-group-justified">
                <a class="btn btn-warning" style="width:auto" data-action="add" data-target="Situasjoner4" data-variant="Item" data-toggle="tooltip" data-placement="top" title="Vi har en utfordring fordi ...">Interne trusler</a>
                <a class="btn btn-warning" style="width:3em" data-action="add" data-glyphicon="chevron-down" data-target="Situasjoner4" data-type="Situasjon" data-variant="Group" data-toggle="tooltip" data-placement="top" title="Legg inn gruppe ..."></a>
            </span>
        
        </h3>
        <div data-array="Situasjoner4" data-type="Situasjon" data-template="Situasjoner" data-placeholder="Ingen elementer i listen"></div>


    </div>
    <div class="col-sm-4 maal">
        <h3>
            <span class="btn-group btn-group-lg btn-group-justified">
                <a class="btn btn-primary" style="width:auto" data-action="add" data-target="Maalsetninger" title="Forholdene gjør at ..." data-toggle="tooltip" data-variant="Item" data-placement="top">Målsetninger</a>
                <a class="btn btn-primary" style="width:3em" data-action="add" data-glyphicon="chevron-down" data-target="Maalsetninger" data-variant="Group" data-toggle="tooltip" data-placement="top" title="Legg inn gruppe ..."></a>
            </span>        
        </h3>
        <div data-array="Maalsetninger" data-placeholder="Ingen elementer i listen" data-remove="1">
            <div data-variant="Item">
                <div class="panel panel-default">
                    <input type="hidden" name="id" data-func="guid" />
                    <div class="pull-left">
                        <span class="label label-default counter" data-field="Kriterier" style="position:relative;left:-0.5em;top:-0.5em;" data-action="sort" data-glyphicon="">0</span>
                    </div>
                    <div class="pull-right">
                        <span class="label label-default counter" data-field="Handlinger" style="position:relative;left:0.5em;top:-0.5em;" data-action="sort" data-glyphicon="">0</span>
                    </div>
                    <div class="panel-heading" data-func="input" data-deleteempty="1" data-name="Tittel" data-placeholder="Vi skal ..."></div>
                     <div data-func="popoverbar" data-target="ItemToolbar">
                        <table class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th class="text-muted">M&aring;ltall</th>
                                    <th class="text-muted">Enhet</th>
                                    <th class="text-muted">Tidsplan</th>
                                    <th style="padding:0">
                                        <a class="btn btn-sm btn-default" data-action="add" data-target="Maalliste"></a>
                                    </th>
                                </tr>
                            </thead>
                            <tbody data-array="Maalliste">
                                <tr>
                                    <td data-func="input" data-name="Kvantitet" data-placeholder="Vi skal oppnå ..." class="small text-primary"></td>
                                    <td data-func="input" data-name="Enhet" data-placeholder="enhet" class="small text-primary"></td>
                                    <td data-func="input" data-name="Dato" data-placeholder="innen ..." class="small text-primary"></td>
                                    <td class="btntd dropdown">
                                        <a data-toggle="dropdown" class="btn btn-block btn-default btn-sm">
                                            <span class="glyphicon glyphicon-chevron-down"></span>
                                        </a>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li>
                                                <a data-action="remove">Slett m&aring;l</a>
                                            </li>
                                            <li>
                                                <a data-action="sort">Flytt m&aring;l</a>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                    <td colspan="4" data-func="input" data-name="Detaljer" data-placeholder="Fyll inn evt. detaljer" class="small text-primary"></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="text-muted">
                            <strong><span class="glyphicon glyphicon-chevron-left"></span> Situasjonskriterier</strong><small> - Vi gjør dette fordi...</small>
                            
                            <select multiple  type="text" name="Kriterier" data-action="link" data-container="section" data-target="Situasjon" data-labelfield="Tittel" data-idfield="id" data-linkbackfield="Maal"></select>
                        </div>
                        <hr/>
                        <div class="text-muted">
                            <strong><span class="glyphicon glyphicon-chevron-right pull-right"></span> Relaterte handlinger</strong><small> - For å nå dette skal vi...</small>
                            <select multiple  type="text" name="Handlinger" data-action="link" data-container="section" data-target="Handlinger" data-labelfield="Tittel" data-idfield="id" data-linkbackfield="Maal"></select>
                        </div>
                    </div>
                </div>
            </div>

            <div data-variant="Group">
                <div class="panel panel-default active">
                    <div class="pull-right">
                        <span class="label label-default" style="position:relative;left:0.5em;top:-0.5em;" data-action="sort" data-glyphicon="plus"></span>
                    </div>
                    <div class="panel-heading" style="font-weight:bold" data-func="input" data-deleteempty="1" data-name="Tittel" data-placeholder="Fyll inn gruppenavn ..."></div>
                    <div class="panel-body" data-array="Subitems" data-type="Maalsetninger" data-template="Maalsetninger" data-placeholder="Ingen elementer i gruppen"></div>
                    <div data-func="popoverbar" data-target="ItemToolbar"></div>
                </div>
                <input type="hidden" name="id" data-func="guid" />
            </div>            
            
        </div>


    </div>
    <div class="col-sm-4 handling">
        <h3>
            <span class="btn-group btn-group-lg btn-group-justified">
                <a class="btn btn-info" style="width:auto" data-action="add" data-target="Handlinger" data-variant="Item" data-toggle="tooltip" data-placement="top" title="For å nå målene våre skal vi ...">Handlingsplan</a>
                <a class="btn btn-info" style="width:3em" data-action="add" data-glyphicon="chevron-down" data-target="Handlinger" data-variant="Group" data-toggle="tooltip" data-placement="top" title="Legg inn gruppe ..."></a>
            </span>
        </h3>
        <div data-array="Handlinger" data-placeholder="Ingen elementer i listen" data-remove="1">
            <div data-variant="Item">
                <input type="hidden" name="id" data-func="guid" />
                <div class="panel panel-default">
                    <div class="pull-left">
                        <span class="label label-default counter" data-field="Maal" style="position:relative;left:-0.5em;top:-0.5em;" data-action="sort" data-glyphicon="">0</span>
                    </div>
                    <div class="panel-heading" data-func="input" data-deleteempty="1" data-name="Tittel" data-placeholder="Tittel"></div>
                    <div data-func="popoverbar" data-target="ItemToolbar">
                        <table class="table table-striped table-condensed table-bordered">
                            <thead>
                                <tr>
                                    <th>Utføres av</th>
                                    <th>Innen</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-func="input" data-name="Ansvarlig" data-placeholder="Fyll inn ansvarlig" class="small text-primary"></td>
                                    <td data-func="input" data-name="Deadline" data-placeholder="Fyll inn deadline" class="small text-primary"></td>
                                    <td data-func="input" data-name="Evaluering" data-placeholder="Dato + Ferdig %" class="small text-primary"></td>
                                </tr>
                                <tr>
                                    <td colspan="3" data-func="input" data-name="Detaljer" data-placeholder="Fyll inn evt. detaljer" class="text-primary small"></td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="text-muted">
                            <strong><span class="glyphicon glyphicon-chevron-left"></span> Relaterte målsetninger</strong><small> - Dette gjør vi fordi...</small>
                            <select multiple  type="text" name="Maal" data-action="link" data-container="section" data-target="Maalsetninger" data-labelfield="Tittel" data-idfield="id" data-linkbackfield="Handlinger"></select>
                        </div>
                    </div>
                </div>
            </div>
            <div data-variant="Group">
                <div class="panel panel-default active">
                    <div class="pull-right">
                        <span class="label label-default" style="position:relative;left:0.5em;top:-0.5em;" data-action="sort" data-glyphicon="plus"></span>
                    </div>
                    <div class="panel-heading" style="font-weight:bold" data-func="input" data-deleteempty="1" data-name="Tittel" data-placeholder="Fyll inn gruppenavn ..."></div>
                    <div class="panel-body" data-array="Subitems" data-type="Handlinger" data-template="Handlinger" data-placeholder="Ingen elementer i gruppen"></div>
                    <div data-func="popoverbar" data-target="ItemToolbar"></div>
                </div>
                <input type="hidden" name="id" data-func="guid" />
            </div>
        </div>
    </div>
</section>
<div data-name="ItemToolbar" class="popover bottom" style="z-index:1000">
    <div class="arrow"></div>
    <h3 class="popover-title">
        <span class="close">×</span>
        Configure
    </h3>
    <div class="popover-content addprops skipautofocus"></div>
    <div class="btn-group btn-group-sm btn-group-justified skipautofocus">
        <div class="btn-group">
            <button data-action="remove" title="Delete this field"></button>
        </div>
        <div class="btn-group">
            <button data-action="clone" title="Clone this field"></button>
        </div>
    </div>
</div>
.panel .pull-right a {
    opacity: 0;
}

.panel:hover .pull-right a {
    opacity: 1;
}

.panel > .panel-body {
    display: none;
}

.panel.active > .panel-body {
    display: block;
}


.label {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /*cursor: pointer;*/
}
.label-default {
    opacity:0.4;
}
    .panel:hover .label-default {
        opacity: 1;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s;
    }

table td.btntd {
    padding: 0 !important;
}
table td.btntd a.btn {
    border: none !important;
    border-radius: 0 !important;
}
/*.panel:hover .panel-body {
    max-height: 10000px;
    padding-top: 1em;
    padding-bottom:1em;
}*/
$(window).on("mousedown touchstart", function(e) {
    //if (!$(event.target).is(".EditDoc,.main,.Bot,.main nav")) return;
    //if (!event.)
    if ($(event.target).is("[data-array] *,[data-name=ItemToolbar] *")) return;
    
    
    // Deactivate
    $form.find(".panel").trigger("depopover");
});
function AttachDocEvents($e) {
//ensureInit();
//$e.find("[name=id]").each(function (index, item) {
//var $i = $(item);
//$i.closest(".well").attr("id", $i.val());

//$e.find(".badge, .label").on("click", function () {
    //$(this).closest(".panel").toggleClass("active");
//});

//$e.find(".panel-heading").on("dblclick", function () {
    //$(this).closest(".panel").toggleClass("active");
//});

/*$e.find(".select2").on("focus", function () {
    alert("focus!");
    var res = [];
    box.closest(".row").find(".situasjon .sit").each(function (index2, item2) {
        var title = $(item2).find("[data-name=Tittel]").text();
        var id = $(item2).find("[name=id]").val();
        res.push({ id: id, text: title });
    });

    $(this).select2("data", res, true);
});*/

$e.find(":input,[contenteditable=true]").on("focus", function() {
    $(this).trigger("popover");
});
}
function UpdateFormGUI() {
// Update counters
$(".counter").each(function(index, item) {
    var $t = $(this);
    var v = $t.closest("[data-array]>*").find("[data-action=link][name=" + $t.attr("data-field") + "]").first().select2("val");
    if (v === null) v = [];
    $t.text(v.length);
    if (v.length === 0) {
        $t.removeClass("label-success");
        $t.addClass("label-warning");
    } else {
        $t.addClass("label-success");
        $t.removeClass("label-warning");
    }
});
}

Output templates

Templates used for document and web page generation:

Friendly Name File Name Template