Add carousel selector

Adds a carousel.json file that contains dummy stories for the carousel.
A list of uuids to real stories can also be added to the file. The real
stories are chosen in preference to the dummy stories as long as:

1. The real stories have been moderated and approved.
2. The real stories have no trigger labels.

server/apps/main/carousel.json

@@ -0,0 +1,35 @@
+{
+  "number-to-display": 3,
+  "max-chars-title": 48,
+  "max-chars-experience": 512,
+  "placeholders": [
+    {
+      "title": "Eating in a restaurant",
+      "experience": "I’ve always found it so difficult going to restaurants. When I’m hungry everything sounds even louder and feels even more intimidating. As a kid, I never understood why it was so hard and my parents would often get mad at me for ‘misbehaving’ in public. I’d just meltdown whenever we went out to eat. Waiting for the food felt like some kind of marathon and I just got so overwhelmed. But now that I’ve realised hunger exacerbates my sensory differences I know how to cope.",
+      "difference": "I try to make sure I’ve eaten something before I go out and a while back I bought some earplugs which are great for small and bustling places. Looking at menus beforehand also helps as I can better prep myself and focus on adjusting to the environment rather than debating what to eat. I do wish restaurants wouldn’t play super loud music. I get it adds to the ambience but having even one section that’s quiet would be so helpful.",
+      "image": "animation_a.jpg"
+    },
+    {
+      "title": "Spatial awareness",
+      "experience": "My lack of spatial awareness is probably the most debilitating part of my autism. I’m constantly walking into door frames and tripping over the corners of furniture even in my own home. And have a terrible habit of walking backwards into old women in shopping aisles. It’s been super hard with COVID as I’ve had to be in full ‘defensive mode’ whenever I go out, making sure I’m not too near to anyone.\n\nHowever, I feel it most when I’m playing sports. I think I’m marking someone but they're actually halfway across the pitch. Or I call for the ball thinking I’m in a clear space when in reality there are three players standing right behind me. It’s even harder if there’s more than one game going on as I find it hard to focus on just one sound and I tend to use my hearing as a way of working out whether people are near me or not. Because autism is an invisible disability I feel like people don’t understand and just see me as a bad player. At times this gets really upsetting. It takes so much effort for me to participate in group activities because of my social anxiety, so if I feel like I’m underperforming it sometimes gets too much.",
+      "difference": "I think shops need to be more aware of spatial issues. Stop putting piles of things in the middle of aisles! In social situations, I just wish people were more aware. If I’m playing football and you’re on my team, tell me where the opponents are.",
+      "image": "animation_b.jpg"
+    },
+    {
+      "title": "Television",
+      "experience": "My family recently got a new TV. It’s much larger than our previous one and has limited screen settings. 3/4 are too bright for me but my family dislikes the fourth option. I don’t often watch telly with the family but I feel like I should have the option to. It just feels unfair, I get that I’m a minority but they don’t see what I see and the fact that they won’t adapt to my needs upsets me. My parents are constantly nagging me to spend less time in my room but it’s situations like this that make me do just that. I can regulate my input in my own space and I can’t elsewhere.",
+      "difference": "Well firstly TVs need more options and the menu should be easy to navigate. But like with so much it’s just a matter of awareness and others actually having a  willingness to adapt. ",
+      "image": "animation_c.jpg"
+    }
+  ],
+  "stories": [
+    {
+      "uuid": "bf48c18e-6133-11ee-8f2d-0242ac120003",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "",
+      "image": ""
+    }
+  ]
+}

server/apps/main/helpers.py

@@ -646,7 +646,7 @@ def message_wrap(text, width):
 def experience_titles_for_session(files):
     """
     take a member.list_files() list of files and add them to dict
-    of the form 
+    of the form
     {"titles":{
         "uuid": "title",
         "uuid2": "title2"
@@ -657,4 +657,109 @@ def experience_titles_for_session(files):
     for f in files:
         if "uuid" in f['metadata'].keys():
             titles[f['metadata']['uuid']] = f['metadata']['description']
-    return titles
+    return titles
+
+def truncate_text(text, length):
+    truncated = textwrap.wrap(text, length)[0]
+    if len(truncated) < len(text):
+        truncated = textwrap.wrap(text, length - 3)[0];
+        truncated += "..."
+    return truncated
+
+def get_carousel_stories(filename="carousel.json"):
+    """
+    Return the stories to use for the carousel on the home page
+
+    Returns an array of stories, each with the following structdure:
+    {
+        "title_summary": "",
+        "experience_summary": "",
+        "title": "",
+        "experience": "",
+        "difference": "",
+        "image": "",
+        "uuid": ""
+    }
+
+    The actual content of the stories is controlled by the variables in the
+    server/apps/main/carousel.json file.
+    """
+    module_dir = os.path.dirname(__file__)
+    file_path = os.path.join(module_dir, filename)
+    stories = []
+    try:
+        with open(file_path, "r") as f:
+            data = json.load(f)
+    except IOError as e:
+        print("Exception when opening carousel file: {}".format(str(e)))
+        return None
+
+    total = data.get("number-to-display", 3)
+    title_max = data.get("max-chars-title", 16)
+    experience_max = data.get("max-chars-experience", 128)
+
+
+    # Step 1: collect together real stories
+    if len(stories) < total:
+        for story in data.get("stories", []):
+            try:
+                uuid = story["uuid"]
+                public_story = PublicExperience.objects.get(
+                    experience_id=uuid
+                )
+                if (public_story.moderation_status != "approved"
+                    or public_story.abuse
+                    or public_story.violence
+                    or public_story.drug
+                    or public_story.mentalhealth
+                    or public_story.negbody
+                    or public_story.other):
+                    # This isn't an appropriate story to use so we'll skip it
+                    continue
+                title = public_story.title_text
+                experience = public_story.experience_text
+                item = {
+                    "title_summary": truncate_text(title, title_max),
+                    "experience_summary": truncate_text(experience, experience_max),
+                    "title": title,
+                    "experience": experience,
+                    "difference": public_story.difference_text,
+                    "image": story.get("image", ""),
+                    "uuid": uuid,
+                }
+                stories.append(item)
+                if len(stories) >= total:
+                    break
+            except KeyError as e:
+                print("Exception when reading carousel dictionary: {}".format(str(e)))
+            except PublicExperience.DoesNotExist as e:
+                print("Carousel experience does not exist:: {}".format(uuid))
+
+
+    # Step 2: collect together placeholder stories
+    placeholder = 0
+    if len(stories) < total:
+        for story in data.get("placeholders", []):
+            try:
+                uuid = 'placeholder{}'.format(placeholder)
+                title = story["title"]
+                experience = story["experience"]
+                item = {
+                    "title_summary": truncate_text(title, title_max),
+                    "experience_summary": truncate_text(experience, experience_max),
+                    "title": title,
+                    "experience": experience,
+                    "difference": story["difference"],
+                    "image": story.get("image", ""),
+                    "uuid": uuid,
+                }
+                stories.append(item)
+                placeholder += 1
+                if len(stories) >= total:
+                    break
+            except KeyError as e:
+                print("Exception when reading carousel dictionary: {}".format(str(e)))
+
+    return stories
+
+

server/apps/main/templates/main/home.html

@@ -18,9 +18,6 @@ <h1 class="big-heading">AutSPACEs</h1>
     <div class="row intro intro-text">
       <div class="col-lg-7">
         <h3 class="title-text">A space for autistic people to share our stories about our senses so we can build a better world for autistic people</h3>
-        <a class="col-lg-12" href="{% url 'main:about_us' %}">
-          <button class="btn btn-outline-light btn-lg float-left" type="button">Read More</button>
-        </a>
       </div>
 
       <div class="col-lg-5">
@@ -150,20 +147,20 @@ <h2 class="section-heading">Shared stories</h2>
           {% if story.image %}
           <div class="experience-half w-50">
           <div class="experience-image-box w-100">
-          <img class="experience-image d-block w-100" src="{% static "/images/" %}{{ story.image }}" alt="First slide" />
+          <img class="experience-image d-block w-100" src="{% static "/images/" %}{{ story.image }}" />
           </div>
           </div>
           <div class="experience-half w-50">
           <div class="experience-text-box w-100">
-            <h3 class="experience-heading">{{ story.title }}</h3>
-            <p class="experience-content">{{ story.summary }}</p>
+            <h3 class="experience-heading">{{ story.title_summary }}</h3>
+            <p class="experience-content">{{ story.experience_summary }}</p>
           </div>
           </div>
         {% else %}
           <div class="experience-full w-100">
           <div class="experience-text-box w-100">
-            <h3 class="experience-heading">{{ story.title }}</h3>
-            <p class="experience-content">{{ story.summary }}</p>
+            <h3 class="experience-heading">{{ story.title_summary }}</h3>
+            <p class="experience-content">{{ story.experience_summary }}</p>
           </div>
           </div>
         {% endif %}

server/apps/main/templates/main/single_story.html

@@ -45,11 +45,15 @@
 
     <div class="container story-section">
     <h2>Title: <i>{% firstof experience.title_text "No Title Given" %}</i></h2>
+    {% if placeholder %}
+    <em>Example story</em>
+    {% else %}
     {% if experience.first_hand_authorship %}
     <em>Autistic individual</em>
     {% else %}
     <em>{% firstof experience.authorship_relation "AutSPACEs Contributor" %}</em>
     {% endif %}
+    {% endif %}
 
     <h3>Experience</h3>
     <p><i>{% firstof experience.experience_text "No Experience Text Given" %}</i></p>

server/apps/main/tests/carousel-test01.json

@@ -0,0 +1,35 @@
+{
+  "number-to-display": 3,
+  "max-chars-title": 14,
+  "max-chars-experience": 24,
+  "placeholders": [
+    {
+      "title": "title01title01title01title01title01title01title01title01title01title01title01title01",
+      "experience": "experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01",
+      "difference": "difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01",
+      "image": "animation_a.jpg"
+    },
+    {
+      "title": "title02title02title02title02title02title02title02title02title02title02title02title02",
+      "experience": "experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02",
+      "difference": "difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02",
+      "image": "animation_b.jpg"
+    },
+    {
+      "title": "title03title03title03title03title03title03title03title03title03title03title03title03",
+      "experience": "experience03experience03experience03experience03experience03experience03experience03experience03experience03experience03experience03experience03",
+      "difference": "difference03difference03difference03difference03difference03difference03difference03difference03difference03difference03difference03difference03",
+      "image": "animation_c.jpg"
+    }
+  ],
+  "stories": [
+    {
+      "uuid": "1234_1",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "",
+      "image": ""
+    }
+  ]
+}

server/apps/main/tests/carousel-test02.json

@@ -0,0 +1,33 @@
+{
+  "number-to-display": 5,
+  "max-chars-title": 14,
+  "max-chars-experience": 24,
+  "placeholders": [
+    {
+      "title": "title01title01title01title01title01title01title01title01title01title01title01title01",
+      "experience": "experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01",
+      "difference": "difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01",
+      "image": "animation_a.jpg"
+    },
+    {
+      "title": "title02title02title02title02title02title02title02title02title02title02title02title02",
+      "experience": "experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02",
+      "difference": "difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02",
+      "image": "animation_b.jpg"
+    }
+  ],
+  "stories": [
+    {
+      "uuid": "1234_2",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "1234_2",
+      "image": "animation_c.jpg"
+    },
+    {
+      "uuid": "",
+      "image": ""
+    }
+  ]
+}

server/apps/main/tests/carousel-test03.json

@@ -0,0 +1,32 @@
+{
+  "number-to-display": 3,
+  "max-chars-title": 14,
+  "max-chars-experience": 24,
+  "placeholders": [
+    {
+      "title": "title01title01title01title01title01title01title01title01title01title01title01title01",
+      "experience": "experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01experience01",
+      "difference": "difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01difference01",
+      "image": "animation_a.jpg"
+    },
+    {
+      "experience": "experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02experience02",
+      "difference": "difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02difference02",
+      "image": "animation_b.jpg"
+    },
+    {
+      "title": "title03title03title03title03title03title03title03title03title03title03title03title03",
+      "experience": "experience03experience03experience03experience03experience03experience03experience03experience03experience03experience03experience03experience03"
+    }
+  ],
+  "stories": [
+    {
+      "uuid": "1234_2",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "nonexistent",
+      "image": "animation_c.jpg"
+    }
+  ]
+}

server/apps/main/tests/carousel-test04.json

@@ -0,0 +1,36 @@
+{
+  "number-to-display": 1,
+  "max-chars-title": 14,
+  "max-chars-experience": 24,
+  "placeholders": [
+  ],
+  "stories": [
+    {
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "1234_1",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "1234_2",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "1234_3",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "1234_1",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "1234_1",
+      "image": "animation_b.jpg"
+    },
+    {
+      "uuid": "",
+      "image": ""
+    }
+  ]
+}