Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created May 4, 2023 08:37
Show Gist options
  • Save neisdev/67df7b15af0102f1d675cbc8afa3aab3 to your computer and use it in GitHub Desktop.
Save neisdev/67df7b15af0102f1d675cbc8afa3aab3 to your computer and use it in GitHub Desktop.
Download ZIP
Project creation panel
Raw
index.html
<div class="" id="createNewProject" tabindex="-1" role="dialog" aria-labelledby="createNewProject" aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="formCreateNewProject">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Create new project</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="new-project-modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" js-createNewProject>Create project</button>
</div>
</div>
</form>
</div>
</div>
Raw
script.babel
const icons = {
"accessible-icon": "\uf368", "accusoft": "\uf369", "acquisitions-incorporated": "\uf6af", "ad": "\uf641", "address-book": "\uf2b9", "address-card": "\uf2bb", "adjust": "\uf042", "adn": "\uf170", "adobe": "\uf778", "adversal": "\uf36a", "affiliatetheme": "\uf36b", "air-freshener": "\uf5d0", "airbnb": "\uf834", "algolia": "\uf36c", "align-center": "\uf037", "align-justify": "\uf039", "align-left": "\uf036", "align-right": "\uf038", "alipay": "\uf642", "allergies": "\uf461", "amazon": "\uf270", "amazon-pay": "\uf42c", "ambulance": "\uf0f9", "american-sign-language-interpreting": "\uf2a3", "amilia": "\uf36d", "anchor": "\uf13d", "android": "\uf17b", "angellist": "\uf209", "angle-double-down": "\uf103", "angle-double-left": "\uf100", "angle-double-right": "\uf101", "angle-double-up": "\uf102", "angle-down": "\uf107", "angle-left": "\uf104", "angle-right": "\uf105", "angle-up": "\uf106", "angry": "\uf556", "angrycreative": "\uf36e", "angular": "\uf420", "ankh": "\uf644", "app-store": "\uf36f", "app-store-ios": "\uf370", "apper": "\uf371", "apple": "\uf179", "apple-alt": "\uf5d1", "apple-pay": "\uf415", "archive": "\uf187", "archway": "\uf557", "arrow-alt-circle-down": "\uf358", "arrow-alt-circle-left": "\uf359", "arrow-alt-circle-right": "\uf35a", "arrow-alt-circle-up": "\uf35b", "arrow-circle-down": "\uf0ab", "arrow-circle-left": "\uf0a8", "arrow-circle-right": "\uf0a9", "arrow-circle-up": "\uf0aa", "arrow-down": "\uf063", "arrow-left": "\uf060", "arrow-right": "\uf061", "arrow-up": "\uf062", "arrows-alt": "\uf0b2", "arrows-alt-h": "\uf337", "arrows-alt-v": "\uf338", "artstation": "\uf77a", "assistive-listening-systems": "\uf2a2", "asterisk": "\uf069", "asymmetrik": "\uf372", "at": "\uf1fa", "atlas": "\uf558", "atlassian": "\uf77b", "atom": "\uf5d2", "audible": "\uf373", "audio-description": "\uf29e", "autoprefixer": "\uf41c", "avianex": "\uf374", "aviato": "\uf421", "award": "\uf559", "aws": "\uf375", "baby": "\uf77c", "baby-carriage": "\uf77d", "backspace": "\uf55a", "backward": "\uf04a", "bacon": "\uf7e5", "balance-scale": "\uf24e", "balance-scale-left": "\uf515", "balance-scale-right": "\uf516", "ban": "\uf05e", "band-aid": "\uf462", "bandcamp": "\uf2d5", "barcode": "\uf02a", "bars": "\uf0c9", "baseball-ball": "\uf433", "basketball-ball": "\uf434", "bath": "\uf2cd", "battery-empty": "\uf244", "battery-full": "\uf240", "battery-half": "\uf242", "battery-quarter": "\uf243", "battery-three-quarters": "\uf241", "battle-net": "\uf835", "bed": "\uf236", "beer": "\uf0fc", "behance": "\uf1b4", "behance-square": "\uf1b5", "bell": "\uf0f3", "bell-slash": "\uf1f6", "bezier-curve": "\uf55b", "bible": "\uf647", "bicycle": "\uf206", "biking": "\uf84a", "bimobject": "\uf378", "binoculars": "\uf1e5", "biohazard": "\uf780", "birthday-cake": "\uf1fd", "bitbucket": "\uf171", "bitcoin": "\uf379", "bity": "\uf37a", "black-tie": "\uf27e", "blackberry": "\uf37b", "blender": "\uf517", "blender-phone": "\uf6b6", "blind": "\uf29d", "blog": "\uf781", "blogger": "\uf37c", "blogger-b": "\uf37d", "bluetooth": "\uf293", "bluetooth-b": "\uf294", "bold": "\uf032", "bolt": "\uf0e7", "bomb": "\uf1e2", "bone": "\uf5d7", "bong": "\uf55c", "book": "\uf02d", "book-dead": "\uf6b7", "book-medical": "\uf7e6", "book-open": "\uf518", "book-reader": "\uf5da", "bookmark": "\uf02e", "bootstrap": "\uf836", "border-all": "\uf84c", "border-none": "\uf850", "border-style": "\uf853", "bowling-ball": "\uf436", "box": "\uf466", "box-open": "\uf49e", "boxes": "\uf468", "braille": "\uf2a1", "brain": "\uf5dc", "bread-slice": "\uf7ec", "briefcase": "\uf0b1", "briefcase-medical": "\uf469", "broadcast-tower": "\uf519", "broom": "\uf51a", "brush": "\uf55d", "btc": "\uf15a", "buffer": "\uf837", "bug": "\uf188", "building": "\uf1ad", "bullhorn": "\uf0a1", "bullseye": "\uf140", "burn": "\uf46a", "buromobelexperte": "\uf37f", "bus": "\uf207", "bus-alt": "\uf55e", "business-time": "\uf64a", "buy-n-large": "\uf8a6", "buysellads": "\uf20d", "calculator": "\uf1ec", "calendar": "\uf133", "calendar-alt": "\uf073", "calendar-check": "\uf274", "calendar-day": "\uf783", "calendar-minus": "\uf272", "calendar-plus": "\uf271", "calendar-times": "\uf273", "calendar-week": "\uf784", "camera": "\uf030", "camera-retro": "\uf083", "campground": "\uf6bb", "canadian-maple-leaf": "\uf785", "candy-cane": "\uf786", "cannabis": "\uf55f", "capsules": "\uf46b", "car": "\uf1b9", "car-alt": "\uf5de", "car-battery": "\uf5df", "car-crash": "\uf5e1", "car-side": "\uf5e4", "caret-down": "\uf0d7", "caret-left": "\uf0d9", "caret-right": "\uf0da", "caret-square-down": "\uf150", "caret-square-left": "\uf191", "caret-square-right": "\uf152", "caret-square-up": "\uf151", "caret-up": "\uf0d8", "carrot": "\uf787", "cart-arrow-down": "\uf218", "cart-plus": "\uf217", "cash-register": "\uf788", "cat": "\uf6be", "cc-amazon-pay": "\uf42d", "cc-amex": "\uf1f3", "cc-apple-pay": "\uf416", "cc-diners-club": "\uf24c", "cc-discover": "\uf1f2", "cc-jcb": "\uf24b", "cc-mastercard": "\uf1f1", "cc-paypal": "\uf1f4", "cc-stripe": "\uf1f5", "cc-visa": "\uf1f0", "centercode": "\uf380", "centos": "\uf789", "certificate": "\uf0a3", "chair": "\uf6c0", "chalkboard": "\uf51b", "chalkboard-teacher": "\uf51c", "charging-station": "\uf5e7", "chart-area": "\uf1fe", "chart-bar": "\uf080", "chart-line": "\uf201", "chart-pie": "\uf200", "check": "\uf00c", "check-circle": "\uf058", "check-double": "\uf560", "check-square": "\uf14a", "cheese": "\uf7ef", "chess": "\uf439", "chess-bishop": "\uf43a", "chess-board": "\uf43c", "chess-king": "\uf43f", "chess-knight": "\uf441", "chess-pawn": "\uf443", "chess-queen": "\uf445", "chess-rook": "\uf447", "chevron-circle-down": "\uf13a", "chevron-circle-left": "\uf137", "chevron-circle-right": "\uf138", "chevron-circle-up": "\uf139", "chevron-down": "\uf078", "chevron-left": "\uf053", "chevron-right": "\uf054", "chevron-up": "\uf077", "child": "\uf1ae", "chrome": "\uf268", "chromecast": "\uf838", "church": "\uf51d", "circle": "\uf111", "circle-notch": "\uf1ce", "city": "\uf64f", "clinic-medical": "\uf7f2", "clipboard": "\uf328", "clipboard-check": "\uf46c", "clipboard-list": "\uf46d", "clock": "\uf017", "clone": "\uf24d", "closed-captioning": "\uf20a", "cloud": "\uf0c2", "cloud-download-alt": "\uf381", "cloud-meatball": "\uf73b", "cloud-moon": "\uf6c3", "cloud-moon-rain": "\uf73c", "cloud-rain": "\uf73d", "cloud-showers-heavy": "\uf740", "cloud-sun": "\uf6c4", "cloud-sun-rain": "\uf743", "cloud-upload-alt": "\uf382", "cloudscale": "\uf383", "cloudsmith": "\uf384", "cloudversify": "\uf385", "cocktail": "\uf561", "code": "\uf121", "code-branch": "\uf126", "codepen": "\uf1cb", "codiepie": "\uf284", "coffee": "\uf0f4", "cog": "\uf013", "cogs": "\uf085", "coins": "\uf51e", "columns": "\uf0db", "comment": "\uf075", "comment-alt": "\uf27a", "comment-dollar": "\uf651", "comment-dots": "\uf4ad", "comment-medical": "\uf7f5", "comment-slash": "\uf4b3", "comments": "\uf086", "comments-dollar": "\uf653", "compact-disc": "\uf51f", "compass": "\uf14e", "compress": "\uf066", "compress-arrows-alt": "\uf78c", "concierge-bell": "\uf562", "confluence": "\uf78d", "connectdevelop": "\uf20e", "contao": "\uf26d", "cookie": "\uf563", "cookie-bite": "\uf564", "copy": "\uf0c5", "copyright": "\uf1f9", "cotton-bureau": "\uf89e", "couch": "\uf4b8", "cpanel": "\uf388", "creative-commons": "\uf25e", "creative-commons-by": "\uf4e7", "creative-commons-nc": "\uf4e8", "creative-commons-nc-eu": "\uf4e9", "creative-commons-nc-jp": "\uf4ea", "creative-commons-nd": "\uf4eb", "creative-commons-pd": "\uf4ec", "creative-commons-pd-alt": "\uf4ed", "creative-commons-remix": "\uf4ee", "creative-commons-sa": "\uf4ef", "creative-commons-sampling": "\uf4f0", "creative-commons-sampling-plus": "\uf4f1", "creative-commons-share": "\uf4f2", "creative-commons-zero": "\uf4f3", "credit-card": "\uf09d", "critical-role": "\uf6c9", "crop": "\uf125", "crop-alt": "\uf565", "cross": "\uf654", "crosshairs": "\uf05b", "crow": "\uf520", "crown": "\uf521", "crutch": "\uf7f7", "css3": "\uf13c", "css3-alt": "\uf38b", "cube": "\uf1b2", "cubes": "\uf1b3", "cut": "\uf0c4", "cuttlefish": "\uf38c", "d-and-d": "\uf38d", "d-and-d-beyond": "\uf6ca", "dashcube": "\uf210", "database": "\uf1c0", "deaf": "\uf2a4", "delicious": "\uf1a5", "democrat": "\uf747", "deploydog": "\uf38e", "deskpro": "\uf38f", "desktop": "\uf108", "dev": "\uf6cc", "deviantart": "\uf1bd", "dharmachakra": "\uf655", "dhl": "\uf790", "diagnoses": "\uf470", "diaspora": "\uf791", "dice": "\uf522", "dice-d20": "\uf6cf", "dice-d6": "\uf6d1", "dice-five": "\uf523", "dice-four": "\uf524", "dice-one": "\uf525", "dice-six": "\uf526", "dice-three": "\uf527", "dice-two": "\uf528", "digg": "\uf1a6", "digital-ocean": "\uf391", "digital-tachograph": "\uf566", "directions": "\uf5eb", "discord": "\uf392", "discourse": "\uf393", "divide": "\uf529", "dizzy": "\uf567", "dna": "\uf471", "dochub": "\uf394", "docker": "\uf395", "dog": "\uf6d3", "dollar-sign": "\uf155", "dolly": "\uf472", "dolly-flatbed": "\uf474", "donate": "\uf4b9", "door-closed": "\uf52a", "door-open": "\uf52b", "dot-circle": "\uf192", "dove": "\uf4ba", "download": "\uf019", "draft2digital": "\uf396", "drafting-compass": "\uf568", "dragon": "\uf6d5", "draw-polygon": "\uf5ee", "dribbble": "\uf17d", "dribbble-square": "\uf397", "dropbox": "\uf16b", "drum": "\uf569", "drum-steelpan": "\uf56a", "drumstick-bite": "\uf6d7", "drupal": "\uf1a9", "dumbbell": "\uf44b", "dumpster": "\uf793", "dumpster-fire": "\uf794", "dungeon": "\uf6d9", "dyalog": "\uf399", "earlybirds": "\uf39a", "ebay": "\uf4f4", "edge": "\uf282", "edit": "\uf044", "egg": "\uf7fb", "eject": "\uf052", "elementor": "\uf430", "ellipsis-h": "\uf141", "ellipsis-v": "\uf142", "ello": "\uf5f1", "ember": "\uf423", "empire": "\uf1d1", "envelope": "\uf0e0", "envelope-open": "\uf2b6", "envelope-open-text": "\uf658", "envelope-square": "\uf199", "envira": "\uf299", "equals": "\uf52c", "eraser": "\uf12d", "erlang": "\uf39d", "ethereum": "\uf42e", "ethernet": "\uf796", "etsy": "\uf2d7", "euro-sign": "\uf153", "evernote": "\uf839", "exchange-alt": "\uf362", "exclamation": "\uf12a", "exclamation-circle": "\uf06a", "exclamation-triangle": "\uf071", "expand": "\uf065", "expand-arrows-alt": "\uf31e", "expeditedssl": "\uf23e", "external-link-alt": "\uf35d", "external-link-square-alt": "\uf360", "eye": "\uf06e", "eye-dropper": "\uf1fb", "eye-slash": "\uf070", "facebook": "\uf09a", "facebook-f": "\uf39e", "facebook-messenger": "\uf39f", "facebook-square": "\uf082", "fan": "\uf863", "fantasy-flight-games": "\uf6dc", "fast-backward": "\uf049", "fast-forward": "\uf050", "fax": "\uf1ac", "feather": "\uf52d", "feather-alt": "\uf56b", "fedex": "\uf797", "fedora": "\uf798", "female": "\uf182", "fighter-jet": "\uf0fb", "figma": "\uf799", "file": "\uf15b", "file-alt": "\uf15c", "file-archive": "\uf1c6", "file-audio": "\uf1c7", "file-code": "\uf1c9", "file-contract": "\uf56c", "file-csv": "\uf6dd", "file-download": "\uf56d", "file-excel": "\uf1c3", "file-export": "\uf56e", "file-image": "\uf1c5", "file-import": "\uf56f", "file-invoice": "\uf570", "file-invoice-dollar": "\uf571", "file-medical": "\uf477", "file-medical-alt": "\uf478", "file-pdf": "\uf1c1", "file-powerpoint": "\uf1c4", "file-prescription": "\uf572", "file-signature": "\uf573", "file-upload": "\uf574", "file-video": "\uf1c8", "file-word": "\uf1c2", "fill": "\uf575", "fill-drip": "\uf576", "film": "\uf008", "filter": "\uf0b0", "fingerprint": "\uf577", "fire": "\uf06d", "fire-alt": "\uf7e4", "fire-extinguisher": "\uf134", "firefox": "\uf269", "first-aid": "\uf479", "first-order": "\uf2b0", "first-order-alt": "\uf50a", "firstdraft": "\uf3a1", "fish": "\uf578", "fist-raised": "\uf6de", "flag": "\uf024", "flag-checkered": "\uf11e", "flag-usa": "\uf74d", "flask": "\uf0c3", "flickr": "\uf16e", "flipboard": "\uf44d", "flushed": "\uf579", "fly": "\uf417", "folder": "\uf07b", "folder-minus": "\uf65d", "folder-open": "\uf07c", "folder-plus": "\uf65e", "font": "\uf031", "font-awesome": "\uf2b4", "font-awesome-alt": "\uf35c", "font-awesome-flag": "\uf425", "font-awesome-logo-full": "\uf4e6", "fonticons": "\uf280", "fonticons-fi": "\uf3a2", "football-ball": "\uf44e", "fort-awesome": "\uf286", "fort-awesome-alt": "\uf3a3", "forumbee": "\uf211", "forward": "\uf04e", "foursquare": "\uf180", "free-code-camp": "\uf2c5", "freebsd": "\uf3a4", "frog": "\uf52e", "frown": "\uf119", "frown-open": "\uf57a", "fulcrum": "\uf50b", "funnel-dollar": "\uf662", "futbol": "\uf1e3", "galactic-republic": "\uf50c", "galactic-senate": "\uf50d", "gamepad": "\uf11b", "gas-pump": "\uf52f", "gavel": "\uf0e3", "gem": "\uf3a5", "genderless": "\uf22d", "get-pocket": "\uf265", "gg": "\uf260", "gg-circle": "\uf261", "ghost": "\uf6e2", "gift": "\uf06b", "gifts": "\uf79c", "git": "\uf1d3", "git-alt": "\uf841", "git-square": "\uf1d2", "github": "\uf09b", "github-alt": "\uf113", "github-square": "\uf092", "gitkraken": "\uf3a6", "gitlab": "\uf296", "gitter": "\uf426", "glass-cheers": "\uf79f", "glass-martini": "\uf000", "glass-martini-alt": "\uf57b", "glass-whiskey": "\uf7a0", "glasses": "\uf530", "glide": "\uf2a5", "glide-g": "\uf2a6", "globe": "\uf0ac", "globe-africa": "\uf57c", "globe-americas": "\uf57d", "globe-asia": "\uf57e", "globe-europe": "\uf7a2", "gofore": "\uf3a7", "golf-ball": "\uf450", "goodreads": "\uf3a8", "goodreads-g": "\uf3a9", "google": "\uf1a0", "google-drive": "\uf3aa", "google-play": "\uf3ab", "google-plus": "\uf2b3", "google-plus-g": "\uf0d5", "google-plus-square": "\uf0d4", "google-wallet": "\uf1ee", "gopuram": "\uf664", "graduation-cap": "\uf19d", "gratipay": "\uf184", "grav": "\uf2d6", "greater-than": "\uf531", "greater-than-equal": "\uf532", "grimace": "\uf57f", "grin": "\uf580", "grin-alt": "\uf581", "grin-beam": "\uf582", "grin-beam-sweat": "\uf583", "grin-hearts": "\uf584", "grin-squint": "\uf585", "grin-squint-tears": "\uf586", "grin-stars": "\uf587", "grin-tears": "\uf588", "grin-tongue": "\uf589", "grin-tongue-squint": "\uf58a", "grin-tongue-wink": "\uf58b", "grin-wink": "\uf58c", "grip-horizontal": "\uf58d", "grip-lines": "\uf7a4", "grip-lines-vertical": "\uf7a5", "grip-vertical": "\uf58e", "gripfire": "\uf3ac", "grunt": "\uf3ad", "guitar": "\uf7a6", "gulp": "\uf3ae", "h-square": "\uf0fd", "hacker-news": "\uf1d4", "hacker-news-square": "\uf3af", "hackerrank": "\uf5f7", "hamburger": "\uf805", "hammer": "\uf6e3", "hamsa": "\uf665", "hand-holding": "\uf4bd", "hand-holding-heart": "\uf4be", "hand-holding-usd": "\uf4c0", "hand-lizard": "\uf258", "hand-middle-finger": "\uf806", "hand-paper": "\uf256", "hand-peace": "\uf25b", "hand-point-down": "\uf0a7", "hand-point-left": "\uf0a5", "hand-point-right": "\uf0a4", "hand-point-up": "\uf0a6", "hand-pointer": "\uf25a", "hand-rock": "\uf255", "hand-scissors": "\uf257", "hand-spock": "\uf259", "hands": "\uf4c2", "hands-helping": "\uf4c4", "handshake": "\uf2b5", "hanukiah": "\uf6e6", "hard-hat": "\uf807", "hashtag": "\uf292", "hat-cowboy": "\uf8c0", "hat-cowboy-side": "\uf8c1", "hat-wizard": "\uf6e8", "haykal": "\uf666", "hdd": "\uf0a0", "heading": "\uf1dc", "headphones": "\uf025", "headphones-alt": "\uf58f", "headset": "\uf590", "heart": "\uf004", "heart-broken": "\uf7a9", "heartbeat": "\uf21e", "helicopter": "\uf533", "highlighter": "\uf591", "hiking": "\uf6ec", "hippo": "\uf6ed", "hips": "\uf452", "hire-a-helper": "\uf3b0", "history": "\uf1da", "hockey-puck": "\uf453", "holly-berry": "\uf7aa", "home": "\uf015", "hooli": "\uf427", "hornbill": "\uf592", "horse": "\uf6f0", "horse-head": "\uf7ab", "hospital": "\uf0f8", "hospital-alt": "\uf47d", "hospital-symbol": "\uf47e", "hot-tub": "\uf593", "hotdog": "\uf80f", "hotel": "\uf594", "hotjar": "\uf3b1", "hourglass": "\uf254", "hourglass-end": "\uf253", "hourglass-half": "\uf252", "hourglass-start": "\uf251", "house-damage": "\uf6f1", "houzz": "\uf27c", "hryvnia": "\uf6f2", "html5": "\uf13b", "hubspot": "\uf3b2", "i-cursor": "\uf246", "ice-cream": "\uf810", "icicles": "\uf7ad", "icons": "\uf86d", "id-badge": "\uf2c1", "id-card": "\uf2c2", "id-card-alt": "\uf47f", "igloo": "\uf7ae", "image": "\uf03e", "images": "\uf302", "imdb": "\uf2d8", "inbox": "\uf01c", "indent": "\uf03c", "industry": "\uf275", "infinity": "\uf534", "info": "\uf129", "info-circle": "\uf05a", "instagram": "\uf16d", "intercom": "\uf7af", "internet-explorer": "\uf26b", "invision": "\uf7b0", "ioxhost": "\uf208", "italic": "\uf033", "itch-io": "\uf83a", "itunes": "\uf3b4", "itunes-note": "\uf3b5", "java": "\uf4e4", "jedi": "\uf669", "jedi-order": "\uf50e", "jenkins": "\uf3b6", "jira": "\uf7b1", "joget": "\uf3b7", "joint": "\uf595", "joomla": "\uf1aa", "journal-whills": "\uf66a", "js": "\uf3b8", "js-square": "\uf3b9", "jsfiddle": "\uf1cc", "kaaba": "\uf66b", "kaggle": "\uf5fa", "key": "\uf084", "keybase": "\uf4f5", "keyboard": "\uf11c", "keycdn": "\uf3ba", "khanda": "\uf66d", "kickstarter": "\uf3bb", "kickstarter-k": "\uf3bc", "kiss": "\uf596", "kiss-beam": "\uf597", "kiss-wink-heart": "\uf598", "kiwi-bird": "\uf535", "korvue": "\uf42f", "landmark": "\uf66f", "language": "\uf1ab", "laptop": "\uf109", "laptop-code": "\uf5fc", "laptop-medical": "\uf812", "laravel": "\uf3bd", "lastfm": "\uf202", "lastfm-square": "\uf203", "laugh": "\uf599", "laugh-beam": "\uf59a", "laugh-squint": "\uf59b", "laugh-wink": "\uf59c", "layer-group": "\uf5fd", "leaf": "\uf06c", "leanpub": "\uf212", "lemon": "\uf094", "less": "\uf41d", "less-than": "\uf536", "less-than-equal": "\uf537", "level-down-alt": "\uf3be", "level-up-alt": "\uf3bf", "life-ring": "\uf1cd", "lightbulb": "\uf0eb", "line": "\uf3c0", "link": "\uf0c1", "linkedin": "\uf08c", "linkedin-in": "\uf0e1", "linode": "\uf2b8", "linux": "\uf17c", "lira-sign": "\uf195", "list": "\uf03a", "list-alt": "\uf022", "list-ol": "\uf0cb", "list-ul": "\uf0ca", "location-arrow": "\uf124", "lock": "\uf023", "lock-open": "\uf3c1", "long-arrow-alt-down": "\uf309", "long-arrow-alt-left": "\uf30a", "long-arrow-alt-right": "\uf30b", "long-arrow-alt-up": "\uf30c", "low-vision": "\uf2a8", "luggage-cart": "\uf59d", "lyft": "\uf3c3", "magento": "\uf3c4", "magic": "\uf0d0", "magnet": "\uf076", "mail-bulk": "\uf674", "mailchimp": "\uf59e", "male": "\uf183", "mandalorian": "\uf50f", "map": "\uf279", "map-marked": "\uf59f", "map-marked-alt": "\uf5a0", "map-marker": "\uf041", "map-marker-alt": "\uf3c5", "map-pin": "\uf276", "map-signs": "\uf277", "markdown": "\uf60f", "marker": "\uf5a1", "mars": "\uf222", "mars-double": "\uf227", "mars-stroke": "\uf229", "mars-stroke-h": "\uf22b", "mars-stroke-v": "\uf22a", "mask": "\uf6fa", "mastodon": "\uf4f6", "maxcdn": "\uf136", "mdb": "\uf8ca", "medal": "\uf5a2", "medapps": "\uf3c6", "medium": "\uf23a", "medium-m": "\uf3c7", "medkit": "\uf0fa", "medrt": "\uf3c8", "meetup": "\uf2e0", "megaport": "\uf5a3", "meh": "\uf11a", "meh-blank": "\uf5a4", "meh-rolling-eyes": "\uf5a5", "memory": "\uf538", "mendeley": "\uf7b3", "menorah": "\uf676", "mercury": "\uf223", "meteor": "\uf753", "microchip": "\uf2db", "microphone": "\uf130", "microphone-alt": "\uf3c9", "microphone-alt-slash": "\uf539", "microphone-slash": "\uf131", "microscope": "\uf610", "microsoft": "\uf3ca", "minus": "\uf068", "minus-circle": "\uf056", "minus-square": "\uf146", "mitten": "\uf7b5", "mix": "\uf3cb", "mixcloud": "\uf289", "mizuni": "\uf3cc", "mobile": "\uf10b", "mobile-alt": "\uf3cd", "modx": "\uf285", "monero": "\uf3d0", "money-bill": "\uf0d6", "money-bill-alt": "\uf3d1", "money-bill-wave": "\uf53a", "money-bill-wave-alt": "\uf53b", "money-check": "\uf53c", "money-check-alt": "\uf53d", "monument": "\uf5a6", "moon": "\uf186", "mortar-pestle": "\uf5a7", "mosque": "\uf678", "motorcycle": "\uf21c", "mountain": "\uf6fc", "mouse": "\uf8cc", "mouse-pointer": "\uf245", "mug-hot": "\uf7b6", "music": "\uf001", "napster": "\uf3d2", "neos": "\uf612", "network-wired": "\uf6ff", "neuter": "\uf22c", "newspaper": "\uf1ea", "nimblr": "\uf5a8", "node": "\uf419", "node-js": "\uf3d3", "not-equal": "\uf53e", "notes-medical": "\uf481", "npm": "\uf3d4", "ns8": "\uf3d5", "nutritionix": "\uf3d6", "object-group": "\uf247", "object-ungroup": "\uf248", "odnoklassniki": "\uf263", "odnoklassniki-square": "\uf264", "oil-can": "\uf613", "old-republic": "\uf510", "om": "\uf679", "opencart": "\uf23d", "openid": "\uf19b", "opera": "\uf26a", "optin-monster": "\uf23c", "orcid": "\uf8d2", "osi": "\uf41a", "otter": "\uf700", "outdent": "\uf03b", "page4": "\uf3d7", "pagelines": "\uf18c", "pager": "\uf815", "paint-brush": "\uf1fc", "paint-roller": "\uf5aa", "palette": "\uf53f", "palfed": "\uf3d8", "pallet": "\uf482", "paper-plane": "\uf1d8", "paperclip": "\uf0c6", "parachute-box": "\uf4cd", "paragraph": "\uf1dd", "parking": "\uf540", "passport": "\uf5ab", "pastafarianism": "\uf67b", "paste": "\uf0ea", "patreon": "\uf3d9", "pause": "\uf04c", "pause-circle": "\uf28b", "paw": "\uf1b0", "paypal": "\uf1ed", "peace": "\uf67c", "pen": "\uf304", "pen-alt": "\uf305", "pen-fancy": "\uf5ac", "pen-nib": "\uf5ad", "pen-square": "\uf14b", "pencil-alt": "\uf303", "pencil-ruler": "\uf5ae", "penny-arcade": "\uf704", "people-carry": "\uf4ce", "pepper-hot": "\uf816", "percent": "\uf295", "percentage": "\uf541", "periscope": "\uf3da", "person-booth": "\uf756", "phabricator": "\uf3db", "phoenix-framework": "\uf3dc", "phoenix-squadron": "\uf511", "phone": "\uf095", "phone-alt": "\uf879", "phone-slash": "\uf3dd", "phone-square": "\uf098", "phone-square-alt": "\uf87b", "phone-volume": "\uf2a0", "photo-video": "\uf87c", "php": "\uf457", "pied-piper": "\uf2ae", "pied-piper-alt": "\uf1a8", "pied-piper-hat": "\uf4e5", "pied-piper-pp": "\uf1a7", "piggy-bank": "\uf4d3", "pills": "\uf484", "pinterest": "\uf0d2", "pinterest-p": "\uf231", "pinterest-square": "\uf0d3", "pizza-slice": "\uf818", "place-of-worship": "\uf67f", "plane": "\uf072", "plane-arrival": "\uf5af", "plane-departure": "\uf5b0", "play": "\uf04b", "play-circle": "\uf144", "playstation": "\uf3df", "plug": "\uf1e6", "plus": "\uf067", "plus-circle": "\uf055", "plus-square": "\uf0fe", "podcast": "\uf2ce", "poll": "\uf681", "poll-h": "\uf682", "poo": "\uf2fe", "poo-storm": "\uf75a", "poop": "\uf619", "portrait": "\uf3e0", "pound-sign": "\uf154", "power-off": "\uf011", "pray": "\uf683", "praying-hands": "\uf684", "prescription": "\uf5b1", "prescription-bottle": "\uf485", "prescription-bottle-alt": "\uf486", "print": "\uf02f", "procedures": "\uf487", "product-hunt": "\uf288", "project-diagram": "\uf542", "pushed": "\uf3e1", "puzzle-piece": "\uf12e", "python": "\uf3e2", "qq": "\uf1d6", "qrcode": "\uf029", "question": "\uf128", "question-circle": "\uf059", "quidditch": "\uf458", "quinscape": "\uf459", "quora": "\uf2c4", "quote-left": "\uf10d", "quote-right": "\uf10e", "quran": "\uf687", "r-project": "\uf4f7", "radiation": "\uf7b9", "radiation-alt": "\uf7ba", "rainbow": "\uf75b", "random": "\uf074", "raspberry-pi": "\uf7bb", "ravelry": "\uf2d9", "react": "\uf41b", "reacteurope": "\uf75d", "readme": "\uf4d5", "rebel": "\uf1d0", "receipt": "\uf543", "record-vinyl": "\uf8d9", "recycle": "\uf1b8", "red-river": "\uf3e3", "reddit": "\uf1a1", "reddit-alien": "\uf281", "reddit-square": "\uf1a2", "redhat": "\uf7bc", "redo": "\uf01e", "redo-alt": "\uf2f9", "registered": "\uf25d", "remove-format": "\uf87d", "renren": "\uf18b", "reply": "\uf3e5", "reply-all": "\uf122", "replyd": "\uf3e6", "republican": "\uf75e", "researchgate": "\uf4f8", "resolving": "\uf3e7", "restroom": "\uf7bd", "retweet": "\uf079", "rev": "\uf5b2", "ribbon": "\uf4d6", "ring": "\uf70b", "road": "\uf018", "robot": "\uf544", "rocket": "\uf135", "rocketchat": "\uf3e8", "rockrms": "\uf3e9", "route": "\uf4d7", "rss": "\uf09e", "rss-square": "\uf143", "ruble-sign": "\uf158", "ruler": "\uf545", "ruler-combined": "\uf546", "ruler-horizontal": "\uf547", "ruler-vertical": "\uf548", "running": "\uf70c", "rupee-sign": "\uf156", "sad-cry": "\uf5b3", "sad-tear": "\uf5b4", "safari": "\uf267", "salesforce": "\uf83b", "sass": "\uf41e", "satellite": "\uf7bf", "satellite-dish": "\uf7c0", "save": "\uf0c7", "schlix": "\uf3ea", "school": "\uf549", "screwdriver": "\uf54a", "scribd": "\uf28a", "scroll": "\uf70e", "sd-card": "\uf7c2", "search": "\uf002", "search-dollar": "\uf688", "search-location": "\uf689", "search-minus": "\uf010", "search-plus": "\uf00e", "searchengin": "\uf3eb", "seedling": "\uf4d8", "sellcast": "\uf2da", "sellsy": "\uf213", "server": "\uf233", "servicestack": "\uf3ec", "shapes": "\uf61f", "share": "\uf064", "share-alt": "\uf1e0", "share-alt-square": "\uf1e1", "share-square": "\uf14d", "shekel-sign": "\uf20b", "shield-alt": "\uf3ed", "ship": "\uf21a", "shipping-fast": "\uf48b", "shirtsinbulk": "\uf214", "shoe-prints": "\uf54b", "shopping-bag": "\uf290", "shopping-basket": "\uf291", "shopping-cart": "\uf07a", "shopware": "\uf5b5", "shower": "\uf2cc", "shuttle-van": "\uf5b6", "sign": "\uf4d9", "sign-in-alt": "\uf2f6", "sign-language": "\uf2a7", "sign-out-alt": "\uf2f5", "signal": "\uf012", "signature": "\uf5b7", "sim-card": "\uf7c4", "simplybuilt": "\uf215", "sistrix": "\uf3ee", "sitemap": "\uf0e8", "sith": "\uf512", "skating": "\uf7c5", "sketch": "\uf7c6", "skiing": "\uf7c9", "skiing-nordic": "\uf7ca", "skull": "\uf54c", "skull-crossbones": "\uf714", "skyatlas": "\uf216", "skype": "\uf17e", "slack": "\uf198", "slack-hash": "\uf3ef", "slash": "\uf715", "sleigh": "\uf7cc", "sliders-h": "\uf1de", "slideshare": "\uf1e7", "smile": "\uf118", "smile-beam": "\uf5b8", "smile-wink": "\uf4da", "smog": "\uf75f", "smoking": "\uf48d", "smoking-ban": "\uf54d", "sms": "\uf7cd", "snapchat": "\uf2ab", "snapchat-ghost": "\uf2ac", "snapchat-square": "\uf2ad", "snowboarding": "\uf7ce", "snowflake": "\uf2dc", "snowman": "\uf7d0", "snowplow": "\uf7d2", "socks": "\uf696", "solar-panel": "\uf5ba", "sort": "\uf0dc", "sort-alpha-down": "\uf15d", "sort-alpha-down-alt": "\uf881", "sort-alpha-up": "\uf15e", "sort-alpha-up-alt": "\uf882", "sort-amount-down": "\uf160", "sort-amount-down-alt": "\uf884", "sort-amount-up": "\uf161", "sort-amount-up-alt": "\uf885", "sort-down": "\uf0dd", "sort-numeric-down": "\uf162", "sort-numeric-down-alt": "\uf886", "sort-numeric-up": "\uf163", "sort-numeric-up-alt": "\uf887", "sort-up": "\uf0de", "soundcloud": "\uf1be", "sourcetree": "\uf7d3", "spa": "\uf5bb", "space-shuttle": "\uf197", "speakap": "\uf3f3", "speaker-deck": "\uf83c", "spell-check": "\uf891", "spider": "\uf717", "spinner": "\uf110", "splotch": "\uf5bc", "spotify": "\uf1bc", "spray-can": "\uf5bd", "square": "\uf0c8", "square-full": "\uf45c", "square-root-alt": "\uf698", "squarespace": "\uf5be", "stack-exchange": "\uf18d", "stack-overflow": "\uf16c", "stackpath": "\uf842", "stamp": "\uf5bf", "star": "\uf005", "star-and-crescent": "\uf699", "star-half": "\uf089", "star-half-alt": "\uf5c0", "star-of-david": "\uf69a", "star-of-life": "\uf621", "staylinked": "\uf3f5", "steam": "\uf1b6", "steam-square": "\uf1b7", "steam-symbol": "\uf3f6", "step-backward": "\uf048", "step-forward": "\uf051", "stethoscope": "\uf0f1", "sticker-mule": "\uf3f7", "sticky-note": "\uf249", "stop": "\uf04d", "stop-circle": "\uf28d", "stopwatch": "\uf2f2", "store": "\uf54e", "store-alt": "\uf54f", "strava": "\uf428", "stream": "\uf550", "street-view": "\uf21d", "strikethrough": "\uf0cc", "stripe": "\uf429", "stripe-s": "\uf42a", "stroopwafel": "\uf551", "studiovinari": "\uf3f8", "stumbleupon": "\uf1a4", "stumbleupon-circle": "\uf1a3", "subscript": "\uf12c", "subway": "\uf239", "suitcase": "\uf0f2", "suitcase-rolling": "\uf5c1", "sun": "\uf185", "superpowers": "\uf2dd", "superscript": "\uf12b", "supple": "\uf3f9", "surprise": "\uf5c2", "suse": "\uf7d6", "swatchbook": "\uf5c3", "swift": "\uf8e1", "swimmer": "\uf5c4", "swimming-pool": "\uf5c5", "symfony": "\uf83d", "synagogue": "\uf69b", "sync": "\uf021", "sync-alt": "\uf2f1", "syringe": "\uf48e", "table": "\uf0ce", "table-tennis": "\uf45d", "tablet": "\uf10a", "tablet-alt": "\uf3fa", "tablets": "\uf490", "tachometer-alt": "\uf3fd", "tag": "\uf02b", "tags": "\uf02c", "tape": "\uf4db", "tasks": "\uf0ae", "taxi": "\uf1ba", "teamspeak": "\uf4f9", "teeth": "\uf62e", "teeth-open": "\uf62f", "telegram": "\uf2c6", "telegram-plane": "\uf3fe", "temperature-high": "\uf769", "temperature-low": "\uf76b", "tencent-weibo": "\uf1d5", "tenge": "\uf7d7", "terminal": "\uf120", "text-height": "\uf034", "text-width": "\uf035", "th": "\uf00a", "th-large": "\uf009", "th-list": "\uf00b", "the-red-yeti": "\uf69d", "theater-masks": "\uf630", "themeco": "\uf5c6", "themeisle": "\uf2b2", "thermometer": "\uf491", "thermometer-empty": "\uf2cb", "thermometer-full": "\uf2c7", "thermometer-half": "\uf2c9", "thermometer-quarter": "\uf2ca", "thermometer-three-quarters": "\uf2c8", "think-peaks": "\uf731", "thumbs-down": "\uf165", "thumbs-up": "\uf164", "thumbtack": "\uf08d", "ticket-alt": "\uf3ff", "times": "\uf00d", "times-circle": "\uf057", "tint": "\uf043", "tint-slash": "\uf5c7", "tired": "\uf5c8", "toggle-off": "\uf204", "toggle-on": "\uf205", "toilet": "\uf7d8", "toilet-paper": "\uf71e", "toolbox": "\uf552", "tools": "\uf7d9", "tooth": "\uf5c9", "torah": "\uf6a0", "torii-gate": "\uf6a1", "tractor": "\uf722", "trade-federation": "\uf513", "trademark": "\uf25c", "traffic-light": "\uf637", "train": "\uf238", "tram": "\uf7da", "transgender": "\uf224", "transgender-alt": "\uf225", "trash": "\uf1f8", "trash-alt": "\uf2ed", "trash-restore": "\uf829", "trash-restore-alt": "\uf82a", "tree": "\uf1bb", "trello": "\uf181", "tripadvisor": "\uf262", "trophy": "\uf091", "truck": "\uf0d1", "truck-loading": "\uf4de", "truck-monster": "\uf63b", "truck-moving": "\uf4df", "truck-pickup": "\uf63c", "tshirt": "\uf553", "tty": "\uf1e4", "tumblr": "\uf173", "tumblr-square": "\uf174", "tv": "\uf26c", "twitch": "\uf1e8", "twitter": "\uf099", "twitter-square": "\uf081", "typo3": "\uf42b", "uber": "\uf402", "ubuntu": "\uf7df", "uikit": "\uf403", "umbraco": "\uf8e8", "umbrella": "\uf0e9", "umbrella-beach": "\uf5ca", "underline": "\uf0cd", "undo": "\uf0e2", "undo-alt": "\uf2ea", "uniregistry": "\uf404", "universal-access": "\uf29a", "university": "\uf19c", "unlink": "\uf127", "unlock": "\uf09c", "unlock-alt": "\uf13e", "untappd": "\uf405", "upload": "\uf093", "ups": "\uf7e0", "usb": "\uf287", "user": "\uf007", "user-alt": "\uf406", "user-alt-slash": "\uf4fa", "user-astronaut": "\uf4fb", "user-check": "\uf4fc", "user-circle": "\uf2bd", "user-clock": "\uf4fd", "user-cog": "\uf4fe", "user-edit": "\uf4ff", "user-friends": "\uf500", "user-graduate": "\uf501", "user-injured": "\uf728", "user-lock": "\uf502", "user-md": "\uf0f0", "user-minus": "\uf503", "user-ninja": "\uf504", "user-nurse": "\uf82f", "user-plus": "\uf234", "user-secret": "\uf21b", "user-shield": "\uf505", "user-slash": "\uf506", "user-tag": "\uf507", "user-tie": "\uf508", "user-times": "\uf235", "users": "\uf0c0", "users-cog": "\uf509", "usps": "\uf7e1", "ussunnah": "\uf407", "utensil-spoon": "\uf2e5", "utensils": "\uf2e7", "vaadin": "\uf408", "vector-square": "\uf5cb", "venus": "\uf221", "venus-double": "\uf226", "venus-mars": "\uf228", "viacoin": "\uf237", "viadeo": "\uf2a9", "viadeo-square": "\uf2aa", "vial": "\uf492", "vials": "\uf493", "viber": "\uf409", "video": "\uf03d", "video-slash": "\uf4e2", "vihara": "\uf6a7", "vimeo": "\uf40a", "vimeo-square": "\uf194", "vimeo-v": "\uf27d", "vine": "\uf1ca", "vk": "\uf189", "vnv": "\uf40b", "voicemail": "\uf897", "volleyball-ball": "\uf45f", "volume-down": "\uf027", "volume-mute": "\uf6a9", "volume-off": "\uf026", "volume-up": "\uf028", "vote-yea": "\uf772", "vr-cardboard": "\uf729", "vuejs": "\uf41f", "walking": "\uf554", "wallet": "\uf555", "warehouse": "\uf494", "water": "\uf773", "wave-square": "\uf83e", "waze": "\uf83f", "weebly": "\uf5cc", "weibo": "\uf18a", "weight": "\uf496", "weight-hanging": "\uf5cd", "weixin": "\uf1d7", "whatsapp": "\uf232", "whatsapp-square": "\uf40c", "wheelchair": "\uf193", "whmcs": "\uf40d", "wifi": "\uf1eb", "wikipedia-w": "\uf266", "wind": "\uf72e", "window-close": "\uf410", "window-maximize": "\uf2d0", "window-minimize": "\uf2d1", "window-restore": "\uf2d2", "windows": "\uf17a", "wine-bottle": "\uf72f", "wine-glass": "\uf4e3", "wine-glass-alt": "\uf5ce", "wix": "\uf5cf", "wizards-of-the-coast": "\uf730", "wolf-pack-battalion": "\uf514", "won-sign": "\uf159", "wordpress": "\uf19a", "wordpress-simple": "\uf411", "wpbeginner": "\uf297", "wpexplorer": "\uf2de", "wpforms": "\uf298", "wpressr": "\uf3e4", "wrench": "\uf0ad", "x-ray": "\uf497", "xbox": "\uf412", "xing": "\uf168", "xing-square": "\uf169", "y-combinator": "\uf23b", "yahoo": "\uf19e", "yammer": "\uf840", "yandex": "\uf413", "yandex-international": "\uf414", "yarn": "\uf7e3", "yelp": "\uf1e9", "yen-sign": "\uf157", "yin-yang": "\uf6ad", "yoast": "\uf2b1", "youtube": "\uf167", "youtube-square": "\uf431", "zhihu": "\uf63f"}
const taxonomy = {
"taxonomy" : {
"ignorance": {
"icon": "\uf04b",
"color": "#9270a8"
},
"credibility": {
"icon": "\uf0c8",
"color": "#cc4c3b"
},
"imprecision": {
"icon": "\uf005",
"color": "#f1d155"
},
"incompleteness": {
"icon": "\uf0c2",
"color": "#67b2ac"
},
},
"entities" : {
"date": {
"icon": "\uf073",
"color": "#868788"
},
"event": {
"icon": "\uf274",
"color": "#cecece"
},
"location": {
"icon": "\uf5a0",
"color": "#ff6464"
},
"geolocation": {
"icon": "\uf5a0",
"color": "#ff6464"
},
"name": {
"icon": "\uf007",
"color": "#ff7f00"
},
"occupation": {
"icon": "\uf0b1",
"color": "#3c8745"
},
"object": {
"icon": "\uf466",
"color": "#b4d38d"
},
"org": {
"icon": "\uf1ad",
"color": "#b4edfc"
},
"person": {
"icon": "\uf007",
"color": "#ff7f00"
},
"place": {
"icon": "\uf279",
"color": "#204191"
},
"placeName": {
"icon": "\uf279",
"color": "#204191"
},
"country": {
"icon": "\uf279",
"color": "#204191"
},
"time": {
"icon": "\uf017",
"color": "#eab9e4"
}
}
};
class IconPicker extends React.Component {
constructor(props){
super(props);
this.state = {
search: '',
icon: '',
available: [],
};
}
handleIconFilter(searchValue){
const newState = {search: searchValue};
if(searchValue != ''){
const filtered = Object.entries(icons).filter(x=>x[0].startsWith(searchValue));
const subset = filtered.splice(0,Math.min(10, filtered.length));
newState['available'] = subset;
}
this.setState(newState);
}
handleIconSelect(icon){
this.setState({icon});
}
handleIconSet(){
if(this.state.icon != '')
this.props.onChange(this.state.icon);
this.hidePicker();
this.setState({
search: '',
icon: '',
available: [],
});
}
showPicker(){
document.getElementById(this.props.iconKey + "-icon-picker").classList.remove('d-none');
}
hidePicker(){
this.setState({
search: '',
icon: '',
available: [],
},()=>document.getElementById(this.props.iconKey + "-icon-picker").classList.add('d-none'));
}
render(){
return(
<div class="icon pointer mx-2" id={this.props.iconKey} data-icon={this.props.icon} onClick={()=>this.showPicker()}>
<div class="iconPicker card shadow bg-white d-none" id={this.props.iconKey + "-icon-picker"}>
<div class="card-body">
<form>
<div class="form-group">
<label for={this.props.iconKey+"-search"}>Search field</label>
<input class="form-control"
id={this.props.iconKey+"-search"}
onChange={e=>this.handleIconFilter(e.target.value)}
placeholder="Search an icon by name" />
</div>
<div class="form-group">
<label for={this.props.iconKey+"-select"}>
{this.state.available.length} Filtered icons
{this.state.icon != ''?<span>(<div class="icon" data-icon={this.state.icon}></div> selected)</span>:''}:
</label>
<div class="chipContainer">
{this.state.available.map(x=>(
<div class={"chip border "+(this.state.icon == x[1]?'checked':'')} key={x[0]}>
<div class="icon" data-icon={x[1]}></div>
<span className="bg-white mx-1 px-2">{x[0]}</span>
<span class="button"
onClick={e=>this.setState({icon: x[1]})}>
<i class={this.state.icon != x[1]?"fas fa-check":''}></i>
</span>
</div>))}
</div>
</div>
<div className="form-group d-flex justify-content-between">
<button type="button" class="btn btn-danger text-white" onClick={()=>this.hidePicker()}>Cancel</button>
<button type="button" class="btn btn-primary text-white" onClick={()=>this.handleIconSet()}>Set icon</button>
</div>
</form>
</div>
</div>
</div>)
}
}
class ProjectDescriptionSection extends React.Component {
constructor(props){
super(props);
}
createExampleParagraph(entity){
}
render(){
return(
<div class="row">
<div class="col-2">
<b>Project description</b>
</div>
<div class="col">
<div class="form-group">
<label for="projectTitle">Project title</label>
<input type="text"
class="form-control"
name="title"
id="projectTitle"
placeholder="Enter project title"
value={this.props.title}
onChange={e=>this.props.setTitle(e.target.value)}/>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="projectDescription">Project description</label>
<textarea class="form-control"
name="description"
id="projectDescription"
rows="3"
placeholder="Enter project description"
value={this.props.description}
onChange={e=>this.props.setDescription(e.target.value)}></textarea>
</div>
</div>
</div>
);
}
}
class TEIentitiesSection extends React.Component {
constructor(props){
super(props);
this.defState = {
icon: "\uf042",
color: '',
name: '',
};
this.state = this.defState;
}
createExampleParagraphs(){
const wordPool = "Proin in urna metus. Integer urna mauris, dapibus in lacus sed, dictum porttitor metus.".split(" ");
const fragments = this.props.scheme.map((e,i)=>{
const pre = Math.trunc(Math.random()*wordPool.length),
preWordCount = 1 + Math.trunc(Math.random()*(wordPool.length - pre - 1)),
preWords = wordPool.slice(pre, pre+preWordCount).join(' '),
post = Math.trunc(Math.random()*wordPool.length),
postWordCount = 1 + Math.trunc(Math.random()*(wordPool.length - pre - 1)),
postWords = wordPool.slice(post, post+postWordCount).join(' ');
return(
<span key="e[0]">
{preWords}
<span className="tagIcon" style={{color:e[1].color}} data-icon={e[1].icon}>
</span>
<span className="tag" style={{borderColor:e[1].color}}>
{` some ${e[0]} `}
</span>
{postWords}
</span>
);
});
return <p class="exampleText">{fragments}</p>
}
entityListEntries(){
const entries = this.props.scheme.map((e, i)=>(
<li key={i}>
<input type="color"
value={e[1].color}
class="colorScheme border"
onChange={event=>this.handleValueChange(i, 'color', event.target.value)}>
</input>
<IconPicker icon={e[1].icon} iconKey={'icon'+i} onChange={icon=>this.handleValueChange(i, 'icon', icon)}/>
<div class="form-group d-inline-block">
<input type="text"
class="form-control"
id="staticEmail2"
value={e[0]}
onChange={event=>this.handleNameChange(i, event.target.value)}/>
</div>
<button type="button"
class="close"
aria-label="Close"
onClick={()=>this.handleRemoveEntry(i)}>
<span aria-hidden="true">&times;</span>
</button>
</li>
));
return entries;
}
entityNewEntryField(){
return(
<li>
<input type="color"
value={this.state.color}
class="colorScheme border"
onChange={event=>this.setState({color: event.target.value})}>
</input>
<IconPicker icon={this.state.icon} iconKey={'newicon'} onChange={icon=>this.setState({icon})}/>
<div class="form-group d-inline-block">
<input type="text"
class="form-control"
id="staticEmail2"
value={this.state.name}
onChange={event=>this.setState({name: event.target.value})}/>
</div>
<button type="button" class="btn btn-light" onClick={()=>this.handleAddEntity()}>Add</button>
</li>
);
}
handleAddEntity(){
const newScheme = [...this.props.scheme, [this.state.name, {color:this.state.color, icon: this.state.icon}]];
this.props.updateScheme(newScheme);
this.setState(this.defState);
}
handleNameChange(index, newName){
this.props.scheme[index][0] = newName;
this.props.updateScheme(this.props.scheme);
}
handleRemoveEntry(index){
this.props.scheme.splice(index,1);
this.props.updateScheme(this.props.scheme);
}
handleValueChange(index, key, value){
this.props.scheme[index][1][key] = value;
this.props.updateScheme(this.props.scheme);
}
render(){
return(
<div>
<div class="row mt-4 bg-light">
<div class="col-2">
<b>TEI entities</b>
</div>
<div class="col">
TEI provides with unique identifiers for named entities which can be then made use of in
the platform. Choose what entities will be used in the project, and their color and icon scheme.
</div>
</div>
<div class="row mt-4">
<div class="col-2"></div>
<div class="col">
<label>Entities</label>
<ul class="noListStyle">
{this.entityListEntries()}
{this.entityNewEntryField()}
</ul>
</div>
<div class="col">
<div class="form-group">
<label for="projectDescription">Example text with current scheme</label>
{this.createExampleParagraphs()}
</div>
</div>
</div>
</div>
);
}
}
class TaxonomySection extends React.Component {
constructor(props){
super(props);
this.defState = {
icon: "\uf042",
color: '',
name: '',
};
this.state = this.defState;
}
createExampleParagraphs(){
const wordPool = "Proin in urna metus. Integer urna mauris, dapibus in lacus sed, dictum porttitor metus.".split(" ");
const fragments = this.props.scheme.map((e,i)=>{
const pre = Math.trunc(Math.random()*wordPool.length),
preWordCount = 1 + Math.trunc(Math.random()*(wordPool.length - pre - 1)),
preWords = wordPool.slice(pre, pre+preWordCount).join(' '),
post = Math.trunc(Math.random()*wordPool.length),
postWordCount = 1 + Math.trunc(Math.random()*(wordPool.length - pre - 1)),
postWords = wordPool.slice(post, post+postWordCount).join(' ');
return(
<span key="e[0]">
{preWords}
<span className="tagIcon" style={{color:e[1].color}} data-icon={e[1].icon}>
</span>
<span className="tag" style={{borderColor:e[1].color}}>
{` some ${e[0]} `}
</span>
{postWords}
</span>
);
});
return <p class="exampleText">{fragments}</p>
}
categoryListEntries(){
const entries = this.props.scheme.map((e, i)=>(
<li key={i}>
<input type="color"
value={e[1].color}
class="colorScheme border"
onChange={event=>this.handleValueChange(i, 'color', event.target.value)}>
</input>
<IconPicker icon={e[1].icon} iconKey={'cert'+i} onChange={icon=>this.handleValueChange(i, 'icon', icon)}/>
<div class="form-group d-inline-block">
<input type="text"
class="form-control"
id="staticEmail2"
value={e[0]}
onChange={event=>this.handleNameChange(i, event.target.value)}/>
</div>
<button type="button"
class="close"
aria-label="Close"
onClick={()=>this.handleRemoveEntry(i)}>
<span aria-hidden="true">&times;</span>
</button>
</li>
));
return entries;
}
categoryNewEntryField(){
return(
<li>
<input type="color"
value={this.state.color}
class="colorScheme border"
onChange={event=>this.setState({color: event.target.value})}>
</input>
<IconPicker icon={this.state.icon} iconKey={'newcaticon'} onChange={icon=>this.setState({icon})}/>
<div class="form-group d-inline-block">
<input type="text"
class="form-control"
id="staticEmail2"
value={this.state.name}
onChange={event=>this.setState({name: event.target.value})}/>
</div>
<button type="button" class="btn btn-light" onClick={()=>this.handleAddCategory()}>Add</button>
</li>
);
}
handleAddCategory(){
const newScheme = [...this.props.scheme, [this.state.name, {color:this.state.color, icon: this.state.icon}]];
this.props.updateScheme(newScheme);
this.setState(this.defState);
}
handleNameChange(index, newName){
this.props.scheme[index][0] = newName;
this.props.updateScheme(this.props.scheme);
}
handleRemoveEntry(index){
this.props.scheme.splice(index,1);
this.props.updateScheme(this.props.scheme);
}
handleValueChange(index, key, value){
this.props.scheme[index][1][key] = value;
this.props.updateScheme(this.props.scheme);
}
render(){
return(
<div>
<div class="row mt-4 bg-light">
<div class="col-2">
<b>Certainty taxonomy</b>
</div>
<div class="col">
Certainty tags in TEI allow to annotate missing or incorrect information,
specify your confidence on a modification, and collaborate with other people's work through nested
annotations. Choose what different sources of uncertainty you will use to describe your annotations and ther color and icon scheme.
</div>
</div>
<div class="row mt-4">
<div class="col-2">
</div>
<div class="col">
<label>Category name</label>
<ul class="noListStyle">
{this.categoryListEntries()}
{this.categoryNewEntryField()}
</ul>
</div>
<div class="col">
<div class="form-group">
<label for="projectDescription">Example text with current scheme</label>
{this.createExampleParagraphs()}
</div>
</div>
</div>
</div>
);
}
}
class App extends React.Component {
constructor(props){
super(props);
this.state = {
title: '',
description: '',
teiScheme: Object.entries(taxonomy.entities),
certScheme: Object.entries(taxonomy.taxonomy),
};
}
render(){
return(
<div>
<ProjectDescriptionSection
title={this.state.title}
description={this.state.description}
setTitle={title=>this.setState({title:title})}
setDescription={description=>this.setState({description:description})}
/>
<TEIentitiesSection
scheme={this.state.teiScheme}
updateScheme={scheme=>this.setState({teiScheme: scheme})}
/>
<TaxonomySection
scheme={this.state.certScheme}
updateScheme={scheme=>this.setState({certScheme: scheme})}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('new-project-modal-body'));
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>
Raw
style.css
.modal-dialog{
max-width: 950px;
}
.colorScheme, .icon{
display: inline-block;
}
.colorScheme{
width: 1em;
height: 1em;
}
.icon::before,
.iconPicker .option::before{
font-family: 'Font Awesome 5 Free';
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: auto;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
content: attr(data-icon);
}
.noListStyle{
list-style: none;
padding-left: 0;
}
input[type="color"]{
height: 1.5em;
width: 1.5em;
border-radius: 50%;
padding: 3px;
}
.icon{
position: relative;
}
.iconPicker{
cursor: initial;
position: absolute;
top: 2em;
width: 28em;
z-index: 4000;
}
.chip {
display: inline-block;
padding: 0 15px;
margin-bottom: 3px;
border-radius: 25px;
background-color: #f1f1f1;
}
.chip .icon {
float: left;
width: 2em;
border-radius: 50%;
}
.chip.checked{
background-color: lightgreen;
}
.chip .button{
cursor: pointer;
}
.pointer{cursor: pointer;}
.tagIcon::before{
font-family: 'Font Awesome 5 Free';
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: auto;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
content: attr(data-icon);
position: absolute;
font-size: 0.9em;
padding-top:1.45em;
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.tag{
min-height: 4px;
margin: 2px 0;
border-bottom: solid 2px;
cursor: default;
background-color: white;
}
.exampleText{
line-height: 2.3em;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment