iTop/tests/manual-visual-tests/attributeset_widget_poc.html

<!--
  ~  Copyright (c) 2010-2021 Combodo SARL
  ~
  ~    This file is part of iTop.
  ~
  ~    iTop is free software; you can redistribute it and/or modify
  ~    it under the terms of the GNU Affero General Public License as published by
  ~    the Free Software Foundation, either version 3 of the License, or
  ~    (at your option) any later version.
  ~
  ~    iTop is distributed in the hope that it will be useful,
  ~    but WITHOUT ANY WARRANTY; without even the implied warranty of
  ~    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  ~    GNU Affero General Public License for more details.
  ~
  ~    You should have received a copy of the GNU Affero General Public License
  ~    along with iTop. If not, see <http://www.gnu.org/licenses/>
  ~
  -->

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>AttributeSet fields widget test</title>

<script>
var aDictEntries = {"Core:AttributeSet:placeholder": "click to add"};
</script>

<script src="../js/utils.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery-ui.custom.min.js"></script>
<script src="../js/selectize.min.js"></script>
<script src="../js/jquery.itop-set-widget.js"></script>

<link rel="stylesheet" type="text/css" href="../css/light-grey.css">
<link rel="stylesheet" type="text/css" href="../css/selectize.default.css">

</head>
<body>

<h1>POC Set widget (itop.set_widget) et CSS</h1>

<h2>Edition : widget</h2>
<form>
<div class="field_container">
<div>
<div class="field_value">
<div class="attribute-edit">
<div class="field_input_zone field_input_set">
<textarea id="tagset-field" rows="30" cols="60">
{
  "possible_values": [
    {
      "code": "critical",
      "label": "Critical ticket"
    },
    {
      "code": "high",
      "label": "don't forget it !"
    },
    {
      "code": "normal",
      "label": "when time available"
    },
    {
      "code": "low",
      "label": "don't worry ;)"
    }
  ],
  "max_items_allowed": 3,
  "partial_values": [
    "low"
  ],
  "orig_value": [
    "critical",
    "low"
  ],
  "added": "",
  "removed": ["toto"]
}
</textarea>
</div>
</div>
</div>
</div>
</div>
</form>

<script>
$("#tagset-field").set_widget({isDebug: true});
</script>


<h2>Visualisation</h2>

<p>
<span class="attribute-set attribute-tag-set">
  <a href="" class="attribute-set-item attribute-set-item-city" data-code="city" data-label="Ville 🏢" data-description="">Ville 🏢</a>
  <a href="" class="attribute-set-item attribute-set-item-ocean" data-code="ocean" data-label="Mer 🌊" data-description="">Mer 🌊</a>
  <a href="" class="attribute-set-item attribute-set-item-sunny" data-code="sunny" data-label="Soleil 🌞" data-description="">Soleil 🌞</a>
</span>
</p>


</body>
</html>