Concepts vs Ideas: concepts

In this example below you will see how to do a Concepts vs Ideas: concepts with some HTML / CSS and Javascript

A prototype to explore concepts

Thumbnail
This awesome code was written by paopow, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright paopow ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Concepts vs Ideas: concepts</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="app">
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js'></script>
<script src='https://marvl.infotech.monash.edu/webcola/cola.v3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/paopow/concepts-vs-ideas-concepts-wJBvJw */
#whiteboard {
  border: 1px solid black;
  width: 1200px;
  height: 600px;
/*   margin-left: 100px; */
  overflow: hidden;
}

.concept {
  cursor: pointer;
  width: 850px;
  background: lightblue;
  padding:5px;
  margin: 2px;
  border: 1px solid black;
}

.concept-pill{
  display: inline-block; 
  padding:2px;
  background: lightblue;
  margin: 2px;
  margin-top:5px;
}
.idea {
  display: inline-block;
  cursor: pointer;
  padding: 2px;
  width: 200px;
/*   height: 100px; */
  overflow: hidden;
  background: #eee;
  margin: 1px;
  border: 1px solid #ccc;
  
}

.detail-pane iframe {
  position:absolute;
  width: 250px;
  height: 600px;
  border: 1px solid black;
  z-index: 100;
}

.add-concept-box {
  position: absolute;
  background: lightblue;
  padding:5px;
  
}

.right-pane{
  position:fixed;
  background: lightgray;
  width: 400px;
  top:0;
  right:0;
  height: 100vh;
  padding: 5px;
  overflow-y: scroll;
}

.right-pane input[type=text]{
  width: 300px;
} 

.right-pane textarea{
  width: 300px;
  height: 5em;
}

/*Downloaded from https://www.codeseek.co/paopow/concepts-vs-ideas-concepts-wJBvJw */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var data = { "concepts": ["Full cycle process", "reduce waste", "biodegradable containter", "reuse waste", "waste -> fertilizer", "market", "waste -> bio-gas", "renewable energy", "household", "no excess buying", "zero-waste", "bread -> beer", "connecting business", "food label", "2 expiration dates", "education", "school", "school meal", "control portion", "tracking preferences", "beer grain -> animal food", "beer grain -> food", "technology: protein coating", "preserve food", "dehydration", "process enabler", "mobile app", "track food expiration", "gamification", "crowdsourcing", "imperfect produce", "tiered price", "donation", "food transport", "nonprofit", "volunteer", "location aware", "community effort", "food subscription", "farm", "catering", "on-demand", "platform", "grocery stores", "QR code for quick input", "community", "biodegradable container", "system", "virtaul farm", "waste -> worms -> animal food", "food storage method", "track expiration", "physical product", "share resources", "wholesaler", "cheaper in bulk", "job creation", "non-profit", "government", "instruction on how to handle food", "stores", "food shopping experience", "restaurants", "food transportation", "campus", "restaurant", "reputation system", "incentive mechanism", "offer different portion sizes", "penalty on waste", "digital tool", "information on result portions", "menu planning", "shopping cart", "suggested recipes", "mobile station", "surplus food", "provide food in area with no restaurant", "city", "lcoation aware", "food truck", "cooking", "imperfect food", "waste collection", "recycling infrastructure", "baking", "healthy breakfast", "dry food -> healthy food", "waste -> plastic", "business", "dining halls", "frozen meals", "reuse leftover", "ready to eat", "certificate", "businesses", "organization", "challenge", "raise awareness", "service", "food supplier", "kitchen", "surplus produce", "empower homeless people", "training program", "cooking lessons", "educate", "kids", "newsletter", "garbage dump", "space", "convert empty space to farm", "hotel", "animal farm"], "ideas": [{ "concepts": ["Full cycle process", "reduce waste", "biodegradable containter", "reuse waste", "waste -> fertilizer", "market", "waste -> bio-gas", "renewable energy", "household", "no excess buying", "zero-waste"], "brief": "Food loss campaign aimed at reducing the wastage footprint and convert the wastage to wealth by making business.", "title": "Reduce, Reuse, Recycle of \"FOOD WASTE\"", "url": "/challenge/food-waste/ideas/reduce-reuse-recycle-of-food-waste" }, { "concepts": ["reuse waste", "bread -> beer", "connecting business"], "brief": "Let\u2019s eliminate local bread waste, raise awareness, and pour profits into fixing our broken food system.", "title": "Toast Ale: delicious craft beer, brewed from surplus bread", "url": "/challenge/food-waste/ideas/toast-ale-delicious-craft-beer-brewed-from-surplus-bread" }, { "concepts": ["food label", "2 expiration dates"], "brief": "Xpire.org - Our idea involves using dual expiration dates (with soft/buffer date) coupled with a donation mechanism to reduce food waste.", "title": "Xpire.org: Food Expiration Dates 2.0 (Update:Label Design- 10/15/2016)", "url": "/challenge/food-waste/ideas/food-expiration-dates-2-0" }, { "concepts": ["education", "school", "school meal", "control portion", "tracking preferences"], "brief": "Students are the future citizens of our country and as a part of a Global network the awareness of \u201CLove Food ,Save Food\u201D Idea is imbibed.", "title": "School Design on \"Love Food , Save Food\"", "url": "/challenge/food-waste/ideas/school-design-on-love-food-save-food" }, { "concepts": ["connecting business", "reuse waste", "beer grain -> animal food", "beer grain -> food"], "brief": "We turn organic by-products into healthy and sustainable food ingredients; one industry at a time, creating value for all stakeholders.", "title": "RISE + Feedback + Wine update - October 13", "url": "/challenge/food-waste/ideas/rise-recycling-food" }, { "concepts": ["reuse waste", "technology: protein coating", "preserve food", "dehydration", "process enabler"], "brief": "We enable farmers and food producers to economically turn their waste into the highest quality dehydrated foods in the market!", "title": "UPDATED: Our Sustainable dehydration turns post-harvest food waste into profits for producers and nutrition for People! (Comments on fire!)", "url": "/challenge/food-waste/ideas/our-sustainable-dehydration-turns-post-harvest-food-waste-into-profits-for-producers-and-nutrition-for-people" }, { "concepts": ["mobile app", "track food expiration", "household"], "brief": "\"Expire\" is an app that catalogs food expiration dates and reminds you when food is about to expire.", "title": "Expire: The App That Reminds You When Your Food Is About to Go Bad [Update 10/15 - Website Addition]", "url": "/challenge/food-waste/ideas/expire-the-app-that-reminds-you-when-your-food-is-about-to-go-bad" }, { "concepts": ["mobile app", "gamification", "crowdsourcing", "imperfect produce", "tiered price", "donation", "food transport", "nonprofit", "volunteer", "location aware"], "brief": "Novel \"last mile\" urban food rescue logistics model using crowdmapping & gamification to engage, educate & empower food rescuers everywhere", "title": "Be an Urban Food Rescuer... Pokemon Go style! [UPDATE: Proof-of-concept demo can be tested worldwide using Kricket app]", "url": "/challenge/food-waste/ideas/a-pokemon-go-model-using-gps-for-urban-fruit-rescue-to-promote-healthy-snacking-while-gamifying-fighting-food-waste-especially-for-children" }, { "concepts": ["imperfect produce", "preserve food", "community effort", "food subscription", "market", "farm"], "brief": "I'mperfect uses food surplus to grow community groups & build networks with monthly subscription preserves served with stories.", "title": "I'mperfect - turning perfectly wonky produce to preserves that support local community groups through social entrepreneurship.", "url": "/challenge/food-waste/ideas/i-mperfect" }, { "concepts": ["food transport", "donation", "nonprofit", "mobile app", "catering", "on-demand"], "brief": "Re-Plate is a nonprofit tech company that matches high quality surplus meals with communities in need...instantly!", "title": "A Robust System for Re-Plating Surplus Meals (Update: 10/15/2016 Notes from App Critique)", "url": "/challenge/food-waste/ideas/a-robust-system-for-re-plating-surplus-meals" }, { "concepts": ["platform", "community effort", "food transport", "volunteer", "on-demand", "gamification", "donation"], "brief": "Food flow is a platform that helps deliver excess food to places in need and provides food experiences in return.", "title": "Food Flow - Reduce Food Waste, Gain Food Experiences", "url": "/challenge/food-waste/ideas/foodkarma" }, { "concepts": ["mobile app", "track food expiration", "household", "grocery stores", "QR code for quick input"], "brief": "Food is often wasted in the home when it's lost in our overloaded shelves forgotten about until it's too late. There's an app for that.", "title": "Update 10/5/16 - Shelf Life - An App for keeping track of the food in our kitchens", "url": "/challenge/food-waste/ideas/shelf-life-an-app-for-leeping-track-of-the-food-in-our-kitchens" }, { "concepts": ["farm", "zero-waste", "community", "biodegradable container", "system", "grocery stores", "gamification", "virtaul farm", "mobile app", "reuse waste", "waste -> worms -> animal food"], "brief": "The main objective with Heart Brain Farm is the creation of a zero-waste community.", "title": "HEART BRAIN FARM - (Updated-Model making process- Red worm and SBF : 10.13.2016)", "url": "/challenge/food-waste/ideas/heart-brain-farm" }, { "concepts": ["food storage method", "track expiration", "physical product"], "brief": "Changes our way to store our foods to avoid the food waste", "title": "Eat the old one first", "url": "/challenge/food-waste/ideas/eat-the-old-one-first" }, { "concepts": ["imperfect produce", "tiered price", "market"], "brief": "Open up different price points (tiers) for fresh produce based on appearance and age", "title": "Tiered price produce marketplace (Updated additional refinement questions)", "url": "/challenge/food-waste/ideas/tiered-price-produce-marketplace" }, { "concepts": ["community", "share resources", "wholesaler", "reduce waste", "cheaper in bulk"], "brief": "Group buying directly from wholesalers eliminates supply chain waste in the retail sector & minimises packaging as items are bought in bulk.", "title": "Cobuy - Group buying software that helps people buy good food at good prices, together.", "url": "/challenge/food-waste/ideas/cobuy-group-buying-software-that-helps-people-buy-good-food-at-good-prices-together" }, { "concepts": ["food transport", "job creation", "non-profit", "government"], "brief": "ALL IN Alameda County will develop a food recovery service sector that creates high quality paid jobs for food runners.", "title": "Save Food, Grow Jobs: Creating A Food Recovery Service Sector", "url": "/challenge/food-waste/ideas/save-food-grow-jobs-creating-a-food-recovery-service-sector" }, { "concepts": ["education", "instruction on how to handle food", "market", "stores", "food shopping experience"], "brief": "Informational sign at grocery stores/markets that gives tips on food storage best practices for fresher, tastier, longer-lasting produce.", "title": "How To \"Keep Fresh\" Sign", "url": "/challenge/food-waste/ideas/how-to-keep-fresh-sign" }, { "concepts": ["mobile app", "community", "donation", "restaurants", "food transportation", "location aware"], "brief": "We create the app that connected with restaurants and institutions, in this way to reduce the food waste.", "title": "Food Connection-An app to send out extra food to the community in order to prevent food wasting", "url": "/challenge/food-waste/ideas/food-connection-an-app-to-send-out-extra-food-to-the-community-in-order-to-prevent-food-wasting" }, { "concepts": ["share resources", "campus"], "brief": "Share Meals is a resource that prevents wasted meal swipes and uneaten food in dining halls.", "title": "Combating Food Waste by Sharing Meals(Updated 10/15/16)", "url": "/challenge/food-waste/ideas/combating-food-waste-by-sharing-meals" }, { "concepts": ["restaurant", "reputation system", "incentive mechanism", "offer different portion sizes", "penalty on waste"], "brief": "Provide a network, a platform and a certificate for restaurants that reduce food waste e.g. by offering portions in >2 different sizes.", "title": "\"Food Saving Restaurant\" Network, Platform & Certificate - Update 10/11 (benefits for customers clarified)", "url": "/challenge/food-waste/ideas/serving-adaptable-portions-certificate" }, { "concepts": ["stores", "grocery stores", "food label", "digital tool", "food shopping experience", "digital tool", "information on result portions", "menu planning", "shopping cart", "suggested recipes"], "brief": "Buy less - waste less! Food labels and digital tool that prevent you from buying more than you can eat.", "title": "What-You-Can-Eat", "url": "/challenge/food-waste/ideas/buy-less-waste-less" }, { "concepts": ["mobile app", "location aware", "restaurant", "catering", "donation"], "brief": "Using GPS technology, affordable or free delivery options, and a bit of encouragement, this app connects the needy with excess food.", "title": "An app connecting those in need with those with excess food via GPS technology", "url": "/challenge/food-waste/ideas/an-app-connecting-those-in-need-with-those-with-excess-food-via-gps-technology" }, { "concepts": ["mobile station", "farm", "grocery stores", "surplus food", "provide food in area with no restaurant", "city", "mobile app", "lcoation aware", "suggested recipes"], "brief": "A service that provides surplus produce and promotes healthy diets in food deserts.", "title": "Sprout", "url": "/challenge/food-waste/ideas/sprout" }, { "concepts": ["mobile station", "food truck", "donation", "food transport", "cooking"], "brief": "We use a foodtruck both to collect ingredients that would be wasted in food fairs and markets, prepare and serve 1k snacks daily.", "title": "FeedTruck - Transforming waste in meals (Top Idea) --> Next Stop: December 3 and 4 at Comic Con Experience 2016 - S\xE3o Paulo (Brazil)", "url": "/challenge/food-waste/ideas/feedtruck-transforming-waste-in-meals" }, { "concepts": ["dehydration", "imperfect food", "preserve food"], "brief": "The project will partner with farmers in rural Nigeria to get rid of rot tomatoes and peppers,by processing the produce into dried products.", "title": "Solar drying tomatoes and peppers through a Highly improved processing technology.", "url": "/challenge/food-waste/ideas/solar-drying-tomatoes-through-a-highly-improved-processing-technology" }, { "concepts": ["waste -> bio-gas", "reuse waste", "waste -> fertilizer", "waste collection", "recycling infrastructure"], "brief": "This project is aiming at recycling excess waste organic materials into biogas energy and soil amender, through anaerobic digestion.", "title": "Integrated Biogas Energy and Soil Amender, by Recycling waste organic food materials through anaerobic digestion technology.", "url": "/challenge/food-waste/ideas/soil-amender-by-recycling-waste-organic-food-materials-through-composting-and-anaerobic-digestion" }, { "concepts": ["dehydration", "school meal", "baking", "healthy breakfast", "dry food -> healthy food", "donation"], "brief": "Using dehydrated vegetable scraps and surplus produce to create nutrient-dense, locally-sourced breakfast for public school students.", "title": "Mighty muffins- dehydrated produce scraps plus surplus produce for public school breakfast- an entire vegetable serving in each muffin!", "url": "/challenge/food-waste/ideas/mighty-muffins-dehydrated-fruit-vegetable-peels-skins-etc-for-public-school-breakfast-an-entire-vegetable-serving" }, { "concepts": ["reduce waste", "biodegradable container", "waste -> plastic"], "brief": "We transform organic waste into PHA, a fully compostable and cost competitive biopolymer that is an alternative to petro-plastics.", "title": "Full Cycle: Converting Waste into a Fully Compostable BioPlastic! (Updated: 10/14/2016)", "url": "/challenge/food-waste/ideas/full-cycle-converting-waste-into-a-fully-compostable-bioplastic" }, { "concepts": ["business", "campus", "dining halls", "frozen meals", "reuse leftover", "ready to eat"], "brief": "Repackage frozen surplus prepared food into individual meals to serve those who face barriers to cooking for themselves.", "title": "Family Meals", "url": "/challenge/food-waste/ideas/family-meals" }, { "concepts": ["city", "government", "volunteer", "food transport", "donation"], "brief": "Creating a self-sustaining scalable food recovery working group model w/ impactful & proven initiatives that can be implemented in any city.", "title": "The DC Food Recovery Working Group Model", "url": "/challenge/food-waste/ideas/dc-food-recovery-working-group-s-3-citywide-initiatives-to-complete-a-scalable-working-group-model-to-be-implemented-in-other-cities" }, { "concepts": ["reuse waste", "beer grain -> food"], "brief": "ReGrained enables circular markets to grow by transforming overlooked waste byproducts (like beer grain) into delicious, desirable foods.", "title": "ReGrained: Inspiring consumer preferences for food waste alchemized products. Starting with beer, of course. (+Updates!)", "url": "/challenge/food-waste/ideas/regrained-inspiring-consumer-preferences-for-food-waste-alchemized-products-starting-with-beer-of-course" }, { "concepts": ["certificate", "businesses", "reputation system", "incentive mechanism"], "brief": "Offering Water Conservation Certificates (WCC) to businesses that donate excess food to redistribution organisations.", "title": "Water Conservation Certification (WCC) to reduce food waste [UPDATE 16/10/16: prototype 9]", "url": "/challenge/food-waste/ideas/water-conservation-certificates-wcc-to-reduce-food-waste" }, { "concepts": ["organization", "challenge", "education", "mobile app", "gamification", "raise awareness"], "brief": "Include food waste information and challenges in employee wellness program initiatives.", "title": "Employee wellness programs offer more than just healthy eating tips (Updated 10/11 - Prototype Feedback and Next Steps)", "url": "/challenge/food-waste/ideas/employee-wellness-programs-offer-more-than-just-healthy-eating-tips" }, { "concepts": ["service", "business", "restaurant", "food supplier", "imperfect produce", "platform"], "brief": "A smart supply service, to help businesses make the most of food that normally is waisted. (SmartFood: low price, high nutritional value).", "title": "Chef Bruno - The supply expert on SmartFood", "url": "/challenge/food-waste/ideas/chef-bruno-smartsupply-for-smartfood" }, { "concepts": ["kitchen", "cooking", "surplus produce", "community", "empower homeless people", "training program", "cooking lessons"], "brief": "A kitchen that transforms lives and food by making and distributing nutritious products out of otherwise wasted food.", "title": "Food Shift presents: The Alameda Kitchen! So food is not wasted, people are fed, and jobs are created.", "url": "/challenge/food-waste/ideas/food-shift-s-soup-rise-pop-ups-cooked-by-on-the-job-trainees-using-rescued-produce-sold-to-businesses-around-the-bay-area" }, { "concepts": ["challenge", "raise awareness", "educate", "reputation system", "kids", "newsletter", "mobile app"], "brief": "Food Trooper aims to raise awareness of food waste in kids and promote a long term cultural change in the future generation of consumers.", "title": "The Food Trooper Smart Tool Kit [Updated: 10.11.16 photos of tool kit, challenge explained, new digital prototype]", "url": "/challenge/food-waste/ideas/the-food-trooper-smart-tool-kit" }, { "concepts": ["physical product", "kitchen", "reuse waste", "waste -> fertilizer", "household"], "brief": "A kitchen island featuring an odor-free vermicomposter and a grey water tank.", "title": "EcoIsland", "url": "/challenge/food-waste/ideas/ecoisland" }, { "concepts": ["garbage dump", "reuse waste", "waste -> fertilizer"], "brief": "we produce organic fertilizers from garbage collections for farmers to use in their gardens to increase soil fertility & productivity.", "title": "organic fertilizers-updated", "url": "/challenge/food-waste/ideas/organic-fertilizers" }, { "concepts": ["community", "share resources", "campus", "donation", "platform"], "brief": "Reducing food waste through food sharing and community building", "title": "Project Avocado: Sharing food to build stronger community", "url": "/challenge/food-waste/ideas/project-avocado-sharing-food-to-build-stronger-community" }, { "concepts": ["city", "space", "farm", "convert empty space to farm", "reuse waste", "waste -> fertilizer"], "brief": "Available vacant lots in urban areas are used to utilize food wastes for bringing sustainability,aesthetics, fresh food and employment", "title": "The Most Sustainable and Efficient Utilization of Food Wastes In Urban Settlements", "url": "/challenge/food-waste/ideas/the-most-sustainable-and-efficient-utilization-of-food-wastes-in-urban-settlements" }, { "concepts": ["reuse waste", "waste -> bio-gas", "hotel", "animal farm"], "brief": "We recycle organic waste from hotels and small pig farms into clean energy and fertilizer in a manner that strengthens rural livelihoods.", "title": "CaribShare Biogas -1st Caribbean social enterprise turning organic waste into clean energy, fertilizer, and social good", "url": "/challenge/food-waste/ideas/caribshare-biogas-1st-caribbean-social-enterprise-recycling-organic-waste-into-clean-energy-and-fertilizer" }], "concept_to_ideas": { "technology: protein coating": [5], "food transport": [7, 9, 10, 16, 24, 30], "dining halls": [29], "imperfect food": [25], "wholesaler": [15], "bread -> beer": [1], "catering": [9, 22], "restaurants": [18], "information on result portions": [21], "lcoation aware": [23], "food subscription": [8], "training program": [35], "food truck": [24], "food transportation": [18], "service": [34], "waste -> plastic": [28], "job creation": [16], "process enabler": [5], "track expiration": [13], "control portion": [3], "food storage method": [13], "digital tool": [21, 21], "community effort": [8, 10], "businesses": [32], "business": [29, 34], "cheaper in bulk": [15], "raise awareness": [33, 36], "share resources": [15, 19, 39], "waste collection": [26], "reduce waste": [0, 15, 28], "surplus food": [23], "shopping cart": [21], "school": [3], "community": [12, 15, 18, 35, 39], "volunteer": [7, 10, 30], "waste -> fertilizer": [0, 26, 37, 38, 40], "food supplier": [34], "dry food -> healthy food": [27], "hotel": [41], "waste -> worms -> animal food": [12], "crowdsourcing": [7], "2 expiration dates": [2], "animal farm": [41], "garbage dump": [38], "city": [23, 30, 40], "healthy breakfast": [27], "incentive mechanism": [20, 32], "physical product": [13, 37], "market": [0, 8, 14, 17], "stores": [17, 21], "farm": [8, 12, 23, 40], "challenge": [33, 36], "renewable energy": [0], "biodegradable containter": [0], "gamification": [7, 10, 12, 33], "convert empty space to farm": [40], "recycling infrastructure": [26], "reuse waste": [0, 1, 4, 5, 12, 26, 31, 37, 38, 40, 41], "empower homeless people": [35], "biodegradable container": [12, 28], "imperfect produce": [7, 8, 14, 34], "dehydration": [5, 25, 27], "no excess buying": [0], "cooking lessons": [35], "track food expiration": [6, 11], "location aware": [7, 18, 22], "donation": [7, 9, 10, 18, 22, 24, 27, 30, 39], "organization": [33], "space": [40], "ready to eat": [29], "food label": [2, 21], "government": [16, 30], "newsletter": [36], "platform": [10, 34, 39], "tiered price": [7, 14], "cooking": [24, 35], "menu planning": [21], "Full cycle process": [0], "provide food in area with no restaurant": [23], "virtaul farm": [12], "grocery stores": [11, 12, 21, 23], "suggested recipes": [21, 23], "zero-waste": [0, 12], "restaurant": [20, 22, 34], "reputation system": [20, 32, 36], "surplus produce": [35], "instruction on how to handle food": [17], "preserve food": [5, 8, 25], "penalty on waste": [20], "non-profit": [16], "kitchen": [35, 37], "waste -> bio-gas": [0, 26, 41], "education": [3, 17, 33], "mobile station": [23, 24], "household": [0, 6, 11, 37], "nonprofit": [7, 9], "mobile app": [6, 7, 9, 11, 12, 18, 22, 23, 33, 36], "frozen meals": [29], "system": [12], "school meal": [3, 27], "QR code for quick input": [11], "on-demand": [9, 10], "tracking preferences": [3], "baking": [27], "connecting business": [1, 4], "certificate": [32], "kids": [36], "offer different portion sizes": [20], "educate": [36], "food shopping experience": [17, 21], "campus": [19, 29, 39], "reuse leftover": [29], "beer grain -> food": [4, 31], "beer grain -> animal food": [4] } };

data.concepts = _.shuffle(data.concepts);

var Idea = function (_React$Component) {
  _inherits(Idea, _React$Component);

  function Idea() {
    _classCallCheck(this, Idea);

    return _possibleConstructorReturn(this, (Idea.__proto__ || Object.getPrototypeOf(Idea)).apply(this, arguments));
  }

  _createClass(Idea, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        { className: "idea" },
        React.createElement(
          "p",
          null,
          React.createElement(
            "strong",
            null,
            React.createElement(
              "a",
              { href: 'https://challenges.openideo.com' + this.props.idea.url,
                target: "_blank" },
              this.props.idea.title
            )
          )
        ),
        React.createElement(
          "p",
          null,
          this.props.idea.brief
        )
      );
    }
  }]);

  return Idea;
}(React.Component);

var Concept = function (_React$Component2) {
  _inherits(Concept, _React$Component2);

  function Concept() {
    _classCallCheck(this, Concept);

    return _possibleConstructorReturn(this, (Concept.__proto__ || Object.getPrototypeOf(Concept)).apply(this, arguments));
  }

  _createClass(Concept, [{
    key: "render",
    value: function render() {
      var _this3 = this;

      var ideaIndices = data.concept_to_ideas[this.props.concept];
      var conceptIdeas = ideaIndices.map(function (i) {
        return React.createElement(Idea, { idea: data.ideas[i] });
      });
      return React.createElement(
        "div",
        { className: "concept" },
        React.createElement(
          "div",
          null,
          React.createElement(
            "h2",
            null,
            this.props.concept
          )
        ),
        React.createElement(
          "div",
          null,
          conceptIdeas
        ),
        React.createElement(
          "div",
          null,
          React.createElement(
            "small",
            null,
            React.createElement(
              "button",
              { onClick: function onClick() {
                  _this3.props.addConcept(_this3.props.concept);
                } },
              "Add to solution"
            )
          )
        )
      );
    }
  }]);

  return Concept;
}(React.Component);

var Whiteboard = function (_React$Component3) {
  _inherits(Whiteboard, _React$Component3);

  function Whiteboard(props) {
    _classCallCheck(this, Whiteboard);

    var _this4 = _possibleConstructorReturn(this, (Whiteboard.__proto__ || Object.getPrototypeOf(Whiteboard)).call(this, props));

    _this4.state = {
      detailPanePage: null
    };
    return _this4;
  }

  _createClass(Whiteboard, [{
    key: "componentDidMount",
    value: function componentDidMount() {}
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      var conceptBoxes = data.concepts.map(function (c, idx) {
        return React.createElement(Concept, { concept: c,
          addConcept: _this5.props.addConcept });
      });
      var detailPane = null;

      return React.createElement(
        "div",
        { ref: "whiteboard" },
        conceptBoxes
      );
    }
  }]);

  return Whiteboard;
}(React.Component);

var RightPane = function (_React$Component4) {
  _inherits(RightPane, _React$Component4);

  function RightPane(props) {
    _classCallCheck(this, RightPane);

    var _this6 = _possibleConstructorReturn(this, (RightPane.__proto__ || Object.getPrototypeOf(RightPane)).call(this, props));

    _this6.submit = _this6.submit.bind(_this6);
    return _this6;
  }

  _createClass(RightPane, [{
    key: "submit",
    value: function submit() {
      var title = this.refs.title.value;
      var description = this.refs.description.value;
      this.props.addSolution(title, description);
      this.refs.title.value = "";
      this.refs.description.value = "";
    }
  }, {
    key: "render",
    value: function render() {
      var thisConcepts = this.props.currSolution.concepts.map(function (c) {
        return React.createElement(
          "span",
          { className: "concept-pill" },
          c
        );
      });
      var thisSolutions = this.props.solutions.map(function (s) {
        return React.createElement(
          "div",
          null,
          React.createElement(
            "strong",
            null,
            s.title
          ),
          React.createElement(
            "p",
            null,
            s.description
          )
        );
      });
      return React.createElement(
        "div",
        { className: "right-pane" },
        React.createElement(
          "div",
          null,
          React.createElement(
            "h2",
            null,
            "Add a new solution"
          ),
          React.createElement(
            "p",
            null,
            "Concepts:",
            React.createElement("br", null),
            thisConcepts
          ),
          React.createElement(
            "p",
            null,
            React.createElement(
              "label",
              null,
              "Title"
            ),
            React.createElement("br", null),
            React.createElement("input", { type: "text", ref: "title" })
          ),
          React.createElement(
            "p",
            null,
            React.createElement(
              "label",
              null,
              "Brief description"
            ),
            React.createElement("br", null),
            React.createElement("textarea", { placeholder: "Explain your solution in a few sentences.",
              ref: "description" })
          ),
          React.createElement(
            "button",
            { onClick: this.submit },
            "Submit"
          ),
          React.createElement("hr", null),
          React.createElement(
            "h3",
            null,
            "Solutions"
          ),
          thisSolutions
        )
      );
    }
  }]);

  return RightPane;
}(React.Component);

var App = function (_React$Component5) {
  _inherits(App, _React$Component5);

  function App(props) {
    _classCallCheck(this, App);

    var _this7 = _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).call(this, props));

    _this7.state = {
      solutions: [],
      currSolution: {
        title: "",
        description: "",
        concepts: []
      }
    };
    _this7.addConcept = _this7.addConcept.bind(_this7);
    _this7.addSolution = _this7.addSolution.bind(_this7);
    return _this7;
  }

  _createClass(App, [{
    key: "addConcept",
    value: function addConcept(concept) {
      var _concepts = this.state.currSolution.concepts;
      if (_concepts.indexOf(concept) == -1) {
        _concepts.push(concept);
        this.setState({
          currSolution: this.state.currSolution
        });
      }
    }
  }, {
    key: "addSolution",
    value: function addSolution(title, description) {
      this.state.solutions.push({
        title: title,
        description: description,
        concepts: this.state.currSolution.concepts
      });
      this.setState({
        solutions: this.state.solutions,
        currSolution: {
          title: "",
          descriptions: "",
          concepts: []
        }
      });
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(Whiteboard, { addConcept: this.addConcept }),
        React.createElement(RightPane, { currSolution: this.state.currSolution,
          solutions: this.state.solutions,
          addSolution: this.addSolution
        })
      );
    }
  }]);

  return App;
}(React.Component);

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

Comments