Messenger

<!DOCTYPE html>
<html lang="de">

<head>
    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> - Youthweb Styleguide</title>
    <!-- Include the CSS -->
    <link href="../../dist/toolkit.min.css" rel="stylesheet">
    <meta name="theme-color" content="#1c60a1">
</head>

<body>
    <script type="text/javascript">
        app_settings = {
            // Profildaten zum eingeloggten User
            // TODO: Refactoring profile-settings
            profile: null,
            urls: {
                // Wegen eines Bugs in Fractal wird z.B. `_config.project.baseUrl` statt `baseUrl` verwendet
                // @see https://github.com/frctl/fractal/issues/1042
                'root': 'https://styleguide.youthweb.net/components/preview',
                'baseUrl': 'http://localhost:8000',
                'communityJsonHost': 'http://localhost:8000',
                'imagesUploadUrl': 'http://localhost:8000/imageUpload',
            },
            'loaderUIDelay': 1000, //Asynchrone Funktionen fühlen sich flüssiger an, wenn es aufgrund eines künstlichen Delays nicht flackert
            'redirectDelay': 3000, //Bei Redirects sollten die Nutzer die Möglichkeit haben, den Bestätigungstext zu sehen
            'locale': window.navigator.userLanguage || window.navigator.language, // z.B. 'de' oder 'de_DE'
        };
    </script>
    <div id="app">
        <div class="with-top-navbar">
            <div class="growl" id="app-growl"></div>
            <add-friend></add-friend>
            <report-user></report-user>
            <error-message></error-message>

            <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-yw-gradient-primary app-navbar" id="mainNavigation">
                <a class="navbar-brand" href="https://styleguide.youthweb.net/components/preview/timeline"><img src="../../dist/img/logo-16.png" alt="Youthweb" /></a>

                <div class="collapse navbar-collapse" id="navbarResponsive" data-parent="#mainNavigation">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
                        </li>
                        <li class="nav-item ">
                            <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
                        </li>
                    </ul>

                    <search-user source="/" type="users" target="user/{0}" id="autosuggest__navbar"></search-user>
                </div>
                <a class="nav-link-with-icon ml-auto" href="https://styleguide.youthweb.net/components/preview/messenger">
                    <span class="icon icon-chat"></span> <!-- TODO: <unread-messages></unread-messages> -->
                </a>
                <a class="nav-link-with-icon" href="https://styleguide.youthweb.net/components/preview/notifications">
                    <span class="icon icon-bell"></span> </a>
                <button class="navbar-btn-avatar ml-2" type="button" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover" aria-expanded="false" aria-label="Toggle profile">
                    <img class="rounded-circle" src="https://eu.ui-avatars.com/api/?name=John+Doe&p=square35">
                </button>

                <button class="navbar-toggler d-lg-none ml-2" type="button" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon icon-menu"></span>
                </button>
            </nav>

            <div id="navigationPopover" class="collapse w-100 d-lg-none" role="dialog" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover">

                <div class="navbar navbar-dark bg-yw-gradient-primary" onclick="event.stopPropagation();">
                    <div class="navbar-collapse">
                        <div class="w-100">
                            <search-user source="/" type="users" target="user/{0}" id="autosuggest__popover"></search-user>
                        </div>
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
                            </li>
                            <li class="nav-item ">
                                <a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
                            </li>
                        </ul>
                        <div class="dropdown-divider"></div>
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
                            </li>
                        </ul>
                        <div class="dropdown-divider"></div>
                        <ul class="navbar-nav ">
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
                                    Facebook
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
                                    Instagram
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
                                    Twitter
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
                                    Pinterest
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
                                    Shop
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="profilePopover" class="collapse w-100" role="dialog" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover">
                <div class="float-right m-2" onclick="event.stopPropagation();">
                    <div class="card card-profile mb-4 ">
                        <div class="card-header bg-secondary"></div>
                        <div class="card-body text-center">
                            <a href="https://styleguide.youthweb.net/components/preview/user">
                                <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=John+Doe">
                            </a>

                            <h6 class="card-title">
                                <a class="text-inherit" href="user">John Doe</a>
                            </h6>

                            <p class="mb-4">Ut nam fabulas ponderum assentior</p><!-- Verhältnis zu Lebensmotto? -->

                            <ul class="card-menu">
                                <li class="card-menu-item">
                                    <a href="https://styleguide.youthweb.net/components/preview/friends" class="text-inherit">
                                        Freunde
                                        <h6 class="my-0">17</h6>
                                    </a>
                                </li>

                                <li class="card-menu-item">
                                    <a href="https://styleguide.youthweb.net/components/preview/participation/hall-of-fame" class="text-inherit">
                                        CP
                                        <h6 class="my-0">352</h6>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="">
                                    <a href="https://styleguide.youthweb.net/components/preview/account/settings" class="btn btn-secondary btn-block"><i class="fas fa-user-cog"></i> Account</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/account/profile_settings" class="btn btn-secondary btn-block"><i class="fas fa-user-circle"></i> Profil</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/account/ignorelist" class="btn btn-secondary btn-block"><i class="fas fa-eye-slash"></i> Ignoreliste</a>
                                </div>
                            </li>
                            <li class="list-group-item"><a href="https://styleguide.youthweb.net/components/preview/logout"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
                        </ul>
                    </div>
                    <div class="card mb-4">
                        <div class="card-body">
                            <h6 class="card-title">Über mich<small> · <a href="https://styleguide.youthweb.net/components/preview/user">Zum Steckbrief</a></small></h6>
                            <p><i class="fas fa-user"></i> Angemeldet vor 5 Jahren
                            </p>
                            <p>
                                <i class="fas fa-star"></i> 21.02.1995 (32 Jahre alt)
                            </p>
                            <p>
                                <i class="fas fa-user-friends"></i> Gruppen: <a href="https://styleguide.youthweb.net/components/preview/groups/1234">Github</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="container pt-4 pb-5">

                <div class="row">
                    <div class="col-lg-3">
                        <div class="d-none d-lg-block">
                            <Conversations type="conversations"></Conversations>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div id="carouselMessages" class="carousel slide">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <div class="d-lg-none">
                                        <Conversations type="conversations"></Conversations>
                                    </div>
                                    <div class="d-none d-lg-block">
                                        <div class="container-fill-height">
                                            <div class="container-content-middle text-center">
                                                <h1 class="text-muted"><span class="icon icon-chat "></span></h1>
                                                <p>Du hast noch keinen Chat ausgewählt</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="carousel-item ">
                                    <div class="card">

                                        <!-- TODO: media-list-stream und Chat angleichen -->
                                        <Messages source="/conversations/{0}" conversation="this.$store.state.messenger.selectedConversation" type="messages"></Messages>

                                        <create-message receiverid=""></create-message>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-none d-lg-block d-xl-block col-lg-3">
                        <div class="card card-profile mb-4 ">
                            <!-- maxh298: background sollte eher Breitformatbild sein, max. Darstellungshöhe: 149px, maxh298 ist Puffer für 1:2 Verhältnis -->
                            <div class="card-header bg-secondary" style="background-image: url('http://localhost:3000/dist/img/samantha-stortecky-sP5CaWEN7Do-unsplash.jpg?p=maxh298'); "></div>
                            <div class="card-body text-center">
                                <a href="https://styleguide.youthweb.net/components/preview/user">
                                    <img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=John+Doe&p=square94">
                                </a>

                                <h6 class="card-title">
                                    <a class="text-inherit" href="https://styleguide.youthweb.net/components/preview/user">John Doe</a>
                                </h6>

                                <p class="mb-4">Ut nam fabulas ponderum assentior</p><!-- Verhältnis zu Lebensmotto? -->

                                <ul class="card-menu">
                                    <li class="card-menu-item">
                                        <a href="https://styleguide.youthweb.net/components/preview/friends" class="text-inherit">
                                            <!--@Frontend Integration: URL aus Profile -->
                                            Freunde
                                            <h6 class="my-0">17</h6>
                                        </a>
                                    </li>

                                    <li class="card-menu-item">
                                        <a href="https://styleguide.youthweb.net/components/preview/participation/hall-of-fame" class="text-inherit">
                                            CP
                                            <h6 class="my-0">352</h6>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card mb-4">
                            <div class="card-body">
                                <h6 class="card-title">Über mich<small> · <a href="https://styleguide.youthweb.net/components/preview/user">Zum Steckbrief</a></small></h6>
                                <p><i class="fas fa-user fa-fw"></i> Angemeldet vor 5 Jahren
                                </p>
                                <p>
                                    <i class="fas fa-star fa-fw"></i> 21.02.1995 (32 Jahre alt)
                                </p>
                                <p>
                                    <i class="fas fa-user-friends fa-fw"></i> Gruppen: <a href="https://styleguide.youthweb.net/components/preview/groups/1234">Github</a>
                                </p>
                            </div>
                        </div>
                        <div class="card mb-4 d-none d-lg-flex">
                            <div class="card-header">Youthweb</div>

                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <a href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
                                    <a href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
                                </li>
                                <li class="list-group-item text-center d-none d-lg-flex">
                                    <!---->
                                    <a class="brand-nav" href="https://www.facebook.com/youthweb.net"><i class="fab fa-facebook-f"></i></a>
                                    <a class="brand-nav" href="https://www.instagram.com/youthwebnet/"><i class="fab fa-instagram"></i></a>
                                    <a class="brand-nav" href="https://twitter.com/youthwebnet"><i class="fab fa-twitter"></i></a>
                                    <a class="brand-nav" href="https://www.pinterest.de/youthwebnet/"><i class="fab fa-pinterest-p"></i></a>
                                    <a class="brand-nav" href="https://shop.spreadshirt.de/youthweb"><i class="fas fa-shopping-basket"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../dist/toolkit.min.js"></script>
</body>

</html>
{% extends 'shared/layouts/community-3-col.html.twig' %}
{% block leftcol %}
  <div class="d-none d-lg-block">
    <Conversations type="conversations"></Conversations>
  </div>
{% endblock %}
{% block content %}
  <div id="carouselMessages" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item {% if selected_receiver is empty %}active{% endif %}">
        <div class="d-lg-none">
          <Conversations type="conversations"></Conversations>
        </div>
        <div class="d-none d-lg-block">
          <div class="container-fill-height">
            <div class="container-content-middle text-center">
              <h1 class="text-muted"><span class="icon icon-chat "></span></h1>
              <p>Du hast noch keinen Chat ausgewählt</p>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item {% if selected_receiver is not empty %}active{% endif %}">
        <div class="card">

          <!-- TODO: media-list-stream und Chat angleichen -->
          <Messages source="/conversations/{0}" conversation="this.$store.state.messenger.selectedConversation" type="messages"></Messages>

          <create-message receiverid="{{selected_receiver}}" ></create-message>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{
  "active_page": "messenger/messenger",
  "selected_receiver": "",
  "auth_profile": {
    "id": "12345",
    "username": "John Doe",
    "picture_url": "https://eu.ui-avatars.com/api/?name=John+Doe",
    "picture_description": "Ut nam fabulas ponderum assentior",
    "background": "http://localhost:3000/dist/img/samantha-stortecky-sP5CaWEN7Do-unsplash.jpg",
    "community_points_count": 352,
    "friends_count": 17,
    "birthday": "1995-02-21",
    "age_in_years": "32",
    "created_years_ago": "5",
    "groups": [
      {
        "id": 1234,
        "name": "Github"
      }
    ]
  }
}

No notes defined.